Fix task optimizeImages

Author: firefoxic

README.md

@@ -137,9 +137,9 @@ _styles.scss_
 ```
 
 ## Работа с графикой
-Абсолютно всю графику складывайте в `source/.raw`.
+Абсолютно всю растровую графику с двухкратной плотностью из макета складывайте в `source/.raw`. Здесь графика игнорируется гитом.
 После того как добавите графику сразу запускайте команду `npm run optimizeImages` для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
-Новая оптимизированная графика появится в `source/images`.
+Новая оптимизированная графика разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.
 
 Векторную графику для спрайта складывайте в `source/images/icons/`. Автоматизация создаст из иконок файл `stack.svg`.
 

gulpfile.js

@@ -48,31 +48,30 @@ export function processScripts () {
 }
 
 export function optimizeImages () {
-  return gulp.src('source/.raw/**/*.{png,jpg}')
-    .pipe(sharp(isDevelopment ? {
-      includeOriginalFile: true,
-      formats: [
-        { format: 'webp' }
-      ]
-    } : {
-      formats: [
-        {
-          jpegOptions: {
-            progressive: true,
-            mozjpeg: true
+  const RAW_DENSITY = 2;
+  const TARGET_FORMATS = [undefined, 'webp']; // undefined — initial format: jpg or png
+
+  function createOptionsFormat() {
+    const formats = [];
+
+    for (const format of TARGET_FORMATS) {
+      for (let density = RAW_DENSITY; density > 0; density--) {
+        formats.push(
+          {
+            format,
+            rename: { suffix: `@${density}x` },
+            width: ({ width }) => Math.ceil(width * density / RAW_DENSITY),
+            jpegOptions: { progressive: true },
           },
-          pngOptions: {
-            palette: true
-          }
-        },
-        {
-          format: 'webp',
-          webpOptions: {
-            effort: 6
-          }
-        }
-      ]
-    }))
+        );
+      }
+    }
+
+    return { formats };
+  }
+
+  return gulp.src('source/.raw/**/*.{png,jpg,jpeg}')
+    .pipe(sharp(createOptionsFormat()))
     .pipe(gulp.dest('source/images'));
 }
 

source/.raw/README.md

@@ -1,7 +1,12 @@
 # Папка для оригиналов изображений
 
-Сюда нужно скидывать неоптимизированные `png` и `jpg` двойной плотности пикселей.
+Сюда нужно скидывать неоптимизированные `png` и `jpg` двойной плотности пикселей.
 
-При запуске `gulp`создаться в `source/images` оптимизированная копия с суффиксом `@2x`, а также уменьшенная в 2 раза копия без суффиксов. У обоих размеров будет копии в прогрессивных форматах (`webp` и `avif`).
+Для каждого изображения в этой папке запуск команды `npm run optimizeImages` создат в `source/images`:
 
-После оптимизации оригиналы картинок можно удалить.
+- оптимизированную копию с суффиксом `@2x`,
+- оптимизированную уменьшенную в 2 раза копию с суффиксом `@1x`,
+- копию в прогрессивном формате `webp` с суффиксом `@2x`,
+- уменьшенную в 2 раза копию в формате `webp` с суффиксом `@1x`.
+
+После оптимизации оригиналы можно удалить, чтобы повторный запуск для новых изображений не генерировал заново уже имеющиеся файлы.