Пакетная оптимизация картинок для Google Page Speed Insight

Репозиторий с оптимизатором картинок на Github — https://github.com/DenisShapkun/images-optimization.

В общем, это моя секретная разработка для сжатия картинок (PNG, JPEG, GIF, SVG). Все сейчас гоняются за высокими показателями Google Page Speed Insight, и одним из наиболее важных показателей является вес картинок. Многие пользователи загружают картинки на сайт просто как есть, не оптимизированные, не обрезанные и весом пару Мегабайт., и из-за этого увеличивается время на загрузку контента страницы, падают показатели скорости, и Google ставит ваш сайт на 101 страницу в выдаче (может быть шутка, а может и нет).

Сжать небольшую партию картинок можно с помощью tinypng.com, но как сжать много картинок за раз? Здесь поможет GULP и мои наработки.

Клонируем проект:

git clone git@github.com:DenisShapkun/images-optimization.git

Заходим в директорию проекта:

cd images-optimization

Устанавливаем необходимые пакеты:

npm install

Картинки, а можно даже папки с картинками помещаем в каталог app/images:

Затем просто выполняем команду

gulp

или

gulp default

И получаем сжатые и оптимизированные картинки в каталоге dist/images.

Чтобы очистить кеш (это нужно если несколько раз запускается оптимизация, и в исходной папке мнеяются-заменяются картинки, которые кешируются при первой оптимизации), выполните команду:

gulp clear

Так же можно сделать ресайз картинок. Нужно в файле gulpfile.js указать требуемые размеры для изображений и поместить исходные изображения в папку app/images/original, затем выполнить команду:

gulp resize

После этого вы получите в папке app/images/resized порезанные под нужные размеры картинки. А затем уже можно удалить исходники и запустить оптимизацию.

Важно.

Изображения PNG без альфа-канала лучше переконвертировать в JPG, иначе сжатие будет минимальным.

Анимированные GIF вызовут ошибку.