Ручная оптимизация изображений

Если вы хотите поднять значение Google PageSpeed Tools, то 80% времени вам придется заниматься оптимизацией изображений.

I. Squoosh

Идеально подходит если у вас очень маленький сайт/лэндинг. Вы просто загружаете одно изображение, а squoosh его сам пережимает. В нем есть много настроек, но стандартных должно хватить.

II. TinyPNG

У tinypng есть API, плагины для фотошопа и модули для разных CMS, но речь пойдет о сайте.

В бесплатном тарифе есть возможность одновременно загружать не более 20 изображений. И если вам не нужно пережимать сотни картинок, то можете воспользоваться этим сервисом. Соотношение: Качество → Размер очень хорошее.

III. Jpegoptim & OptiPNG

Это уже консольные утилиты. Сжимают намного хуже, чем предыдущие варианты, но гарантированно без потери качества и на любое количество файлов.

Jpegoptim:

jpegoptim *.jp*g

Optipng:

optipng *.png

Для всех файлов всех подпапок можно делать вот так:

find -type f -name "*.jpg" -exec jpegoptim --strip-all {} \; ; find -type f -name "*.png" -exec optipng {} \;

Если у вас больше 1000 файлов — этот вариант вам подойдет. По крайней мере с него можно начать.

IV. SVGO

Векторные изображения тоже нуждаются в оптимизации. И лучшего инструмента чем svgo я не знаю.

svgo --disable='removeViewBox' --enable='removeDimensions' ./