Каждый раз, когда я вижу сайт с картинками по 5 мегабайт, у меня дергается глаз. Серьезно, оптимизация графики — это база, про которую многие почему-то забывают при сборке. Давайте разберем простой пайплайн, как настроить автоматическое сжатие изображений в Webpack 5, чтобы не делать это руками через сторонние сервисы.

Я пробовал разные подходы. Раньше юзал онлайн-оптимизаторы, типа популярного kraken, но когда картинок сотни — это превращается в ад. Гораздо проще автоматизировать все на этапе сборки проекта.

• Установите нужные плагины. Нам понадобится image-minimizer-webpack-plugin и сам оптимизатор imagemin. Ставим их через npm install --save-dev image-minimizer-webpack-plugin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo.
• Настройте webpack.config.js. Добавьте плагин в секцию optimization.minimizer. Это позволит пережимать изображения только при продакшн-сборке, не замедляя процесс разработки.
• Настройте параметры сжатия. Для jpeg лучше выставить quality в районе 75-80. Это дает идеальный баланс между качеством картинки и весом файла. Для png используйте pngquant с параметром speed: 4.
• Внедрите WebP. Это сейчас стандарт де-факто. Можно настроить генерацию webp-копий налету с помощью того же плагина, просто добавив генератор в настройки.

Такой нехитрый конфиг экономит кучу времени. Картинки сжимаются автоматически, а сайт летает. А как вы оптимизируете графику в своих проектах?

ЌРÁЌÉH маркет