0

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

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


I. Squoosh

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

Ручная оптимизация изображений Svg, Оптимизация, JPEG, Png, Web, IT, Frontend, Оптимизация сайтов, Длиннопост

II. TinyPNG

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

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

Ручная оптимизация изображений Svg, Оптимизация, JPEG, Png, Web, IT, Frontend, Оптимизация сайтов, Длиннопост

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' ./

V. SVGOMG

Если консольная утилита вам не подходит - хорошим решением будет использовать данный ресурс.

Ручная оптимизация изображений Svg, Оптимизация, JPEG, Png, Web, IT, Frontend, Оптимизация сайтов, Длиннопост