Добавляет оптимизацию изображений аватаров (#342)

web-standards-ru · Oct 13, 2023 · 606244b · 606244b
1 parent 4e707b5
commit 606244b
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 4 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -189,6 +189,71 @@ module.exports = function(config) {
         return document.toString();
     });
 
+    {
+        const avatarImageFormats = isProdMode
+            ? ['avif', 'webp', 'jpeg']
+            : ['webp', 'jpeg'];
+
+        const formatsOrder = ['avif', 'webp', 'jpeg'];
+
+        config.addTransform('optimizeAvatarImages', async function(content) {
+            if (!this.page.outputPath.endsWith?.('.html')) {
+                return content;
+            }
+
+            const { document } = parseHTML(content);
+            const images = Array.from(document.querySelectorAll('.blob__photo'))
+                .filter((image) => !image.src.match(/^https?:/));
+
+            if (images.length === 0) {
+                return content;
+            }
+
+            await Promise.all(images.map(async(image) => {
+                const fullImagePath = path.join(config.dir.input, image.src);
+                const avatarsOutputFolder = path.dirname(path.join(config.dir.output, image.src));
+
+                const imageStats = await Image(fullImagePath, {
+                    widths: image.sizes
+                        .split(',')
+                        .flatMap((entry) => {
+                            entry = entry.split(/\s+/).at(-1);
+                            entry = parseFloat(entry);
+                            return [entry, entry * 2];
+                        }),
+                    formats: avatarImageFormats,
+                    outputDir: avatarsOutputFolder,
+                    urlPath: image.src.split('/').slice(0, -1).join('/'),
+                    svgShortCircuit: true,
+                    filenameFormat: (hash, src, width, format) => {
+                        const extension = path.extname(src);
+                        const name = path.basename(src, extension);
+                        return `${hash}-${name}-${width}.${format}`;
+                    },
+                });
+
+                image.outerHTML = `
+                    <picture>
+                        ${
+                            formatsOrder
+                                .map(((format) => imageStats[format]))
+                                .filter(Boolean)
+                                .map((stats) => {
+                                    const type = stats[0].sourceType;
+                                    const srcset = stats.map((statsItem) => statsItem.srcset).join(',');
+                                    return `<source type="${type}" srcset="${srcset}"/>`;
+                                })
+                                .join('')
+                        }
+                        ${image.outerHTML}
+                    </picture>
+                `;
+            }));
+
+            return document.toString();
+        });
+    }
+
     config.addTransform('htmlmin', (content, outputPath) => {
         if (outputPath && outputPath.endsWith('.html')) {
             let htmlmin = require('html-minifier');

diff --git a/src/includes/article-card.njk b/src/includes/article-card.njk
@@ -69,6 +69,7 @@
                             blob__photo"
                         src="/people/{{ personPhoto }}"
                         width="80" height="80"
+                        sizes="(min-width: 1024px) 112px, 80px"
                         {% if articleType === '--articles' %}loading="lazy"{% endif %}
                         alt="{{ person.name }}">
                 </div>

diff --git a/src/layouts/article.njk b/src/layouts/article.njk
@@ -65,7 +65,9 @@ layout: page.njk
                             <span class="creators__author-avatar blob {% blob person.name %}">
                                 <img class="blob__photo"
                                     src="/people/{{ personPhoto }}"
-                                    width="100" height="100" alt="{{ person.name }}">
+                                    width="100" height="100"
+                                    sizes="(min-width: 1240px) 128px, (min-width: 1024px) 112px, 100px"
+                                    alt="{{ person.name }}">
                             </span>
                             <span class="creators__author-name" itemprop="author">
                                 {{ person.name }}
@@ -76,7 +78,9 @@ layout: page.njk
                             <span class="creators__author-avatar blob {% blob person.name %}">
                                 <img class="blob__photo"
                                     src="/people/{{ personPhoto }}"
-                                    width="100" height="100" alt="{{ person.name }}">
+                                    width="100" height="100"
+                                    sizes="(min-width: 1240px) 128px, (min-width: 1024px) 112px, 100px"
+                                    alt="{{ person.name }}">
                             </span>
                             <span class="creators__author-name" itemprop="author">
                                 {{ person.name }}

diff --git a/src/styles/blocks/creators.css b/src/styles/blocks/creators.css
@@ -57,8 +57,8 @@
 
 @media (min-width: 1024px) {
     .creators__author-avatar {
-        width: 113px;
-        height: 113px;
+        width: 112px;
+        height: 112px;
     }
 }