Files
site-portfolio/docs/image-optimization.md
T

2.1 KiB
Raw Blame History

Оптимизация картинок: PNG / JPEG → WebP рядом

Скрипт scripts/optimize-images.mjs обходит вложенные папки и для каждого .png, .jpg, .jpeg создаёт рядом то же имя.webp.

  • Размер в пикселях не меняется.
  • WebP с качеством 90 (и alphaQuality: 100 для прозрачного PNG) — сильно не жмёт, ориентир на визуально близкий результат к исходнику при меньшем весе файла.
  • Повторный запуск: если имя.webp уже есть и новее или того же возраста, что и исходник, файл пропускается (чтобы не гонять лишний раз). После правки картинки снова запусти скрипт, либо удали webp, либо используй --force.

Требования

  • Node.js;
  • пакет sharp (ставится вместе с npm install в корне репозитория).

Запуск

Из корня репозитория (где package.json), укажи папку с картинками (относительно корня или абсолютный путь):

npm run optimize-images -- public/assets/cases/мой-кейс/img

либо:

node scripts/optimize-images.mjs public/assets/cases/мой-кейс/img

Пересоздать все WebP, даже если по дате «свежее»:

npm run optimize-images -- public/assets/cases/мой-кейс/img --force

В PowerShell, если в пути есть пробелы:

npm run optimize-images -- "public\assets\cases\мой-кейс\img"

Когда картинка не трогается

См. выше: если foo.webp есть и не старше foo.png / foo.jpg, foo пропускается, кроме режима --force.