Gulp imagemin: sindresorhus/gulp-imagemin: Minify PNG, JPEG, GIF and SVG images

Оптимизация изображений в Gulp под Google PageSpeed Insights

30 Сентября 2017, 20:28

Автор: Кудашев Сергей

Мне очень нравится использовать Gulp для сборки проектов, он быстр, легок, поддается прекрасной автоматизации. Но есть небольшой изъян в том решении, которое мною используется, а именно, оптимизированные стандартным imagemin картинки не проходят проверку в Google PageSpeed Insights в виду недостаточной оптимизации. Решил, что пора уже исправить это досадное недоразумение.

Любой, кто использовал стандартный gulp-imagemin для оптимизации картинок, как это делается рассказывал когда описывал основы Gulp, обращал внимание, что картинки жмутся не оптимальным образом. Проверить это достаточно просто, возьмем мой последний пост и отправим его в Google PageSpeed Insights. Как видим Google сообщает нам, что «Оптимизируйте следующие изображения, чтобы уменьшить их размер на 12,7 КБ (42 %)».

Перейдя на страницу помощи мы можем найти кое что полезное, например погуглить опции для jpegtran или поискать реализацию jpegoptim для Gulp. Забегая немного вперед, нам пригодится только jpegoptim. У встроенного в imagemin пакета imagemin-jpegtran практически нет дополнительных опций для оптимизации. В общем, после поисков и экспериментов было принято решение проверить две гипотезы.

Для проведения тестирования мы будем использовать тестовый стенд (тестовая программа), за основу которого был взят пример из прошлой статьи об основах Gulp. Для тестирования были взяты картинки разных форматов и размеров. После чего было сделано поэтапное сжатие этих картинок различными средствами оптимизации картинок с записью результатов и проверкой их в Google PageSpeed Insights. Стенд доступен по ссылке. Оригиналы файлов доступны в архиве source.rar. Пожатые файлы доступны в архиве optimized.rar.

PNG можно сжимать эффективнее

Проблема с PNG в том, что Google PageSpeed Insights на него не ругается. Я загружал ужасно большие фотографии с наборами мета-данных и PageSpeed Insights ни разу даже не пискнул.

Поэтому решил поэкспериментировать с PNG без обратной связи от гугла. Да, штатные средства сжимают PNG формат не очень хорошо.

Небольшие пояснения по таблице:
Название файла — это исходный файл, который жмется и который можно найти в архиве source.rar.
Средство оптимизации и опции — показывает каким именно средством производилась оптимизация и какие при этом использовались параметры. Параметры качества в 60 взяты из Photoshop, который считает, что это нормальное качество (High) картинки при обработке.
Saved Kb — количество байт/килобайт/мегабайт, которые удалось съэкономить благодаря оптимизации.
Saved % — тоже самое, только в процентном соотношении к размеру файла.
Google PageSpeed Insights — предупреждает ли сервис PageSpeed Insights, что данное изображение необходимо подвергнуть повторной оптимизации или нет.

Название файла	Средство оптимизации и опции вызова	Saved Kb	Saved %	Google PageSpeed Insights
Pinguino-Linux. png	imagemin.optipng({optimizationLevel: 5})	74 B	0.1%	не предупреждает
Pinguino-Linux.png	pngquant()	47.7 kB	47.9%	не предупреждает
Pinguino-Linux.png	pngquant({quality: 60, speed: 5})	73 kB	73.3%	не предупреждает

Название файла	Средство оптимизации и опции вызова	Saved Kb	Saved %	Google PageSpeed Insights
linux-2025130.png	imagemin.optipng({optimizationLevel: 5})	18.2 kB	16.1%	не предупреждает
linux-2025130.png	pngquant()	62.6 kB	55.5%	не предупреждает
linux-2025130.png	pngquant({quality: 60, speed: 5})	87.1 kB	77.2%	не предупреждает

Как видно из таблицы, даже без опций дополнение gulp-pngquant жмет гораздо лучше. Буду использовать его.

JPEG можно сжимать эффективнее

После продолжительных поисков было найдено 3 кандидата, которые должны были расширить базовые возможности imagemin. Это imagemin-jpeg-recompress, imagemin-jpegoptim, imagemin-mozjpeg. Не вдаваясь в особые разглагольствования, выкладываю результаты тестов:

Название файла	Средство оптимизации и опции вызова	Saved Kb	Saved %	Google PageSpeed Insights
code-1839406.jpg	imagemin.jpegtran({progressive: true})	19.2 kB	12%	Сжатие страницы уменьшит ее размер на 31,2 КБ (23 %).
code-1839406.jpg	jpegoptim()	7.83 kB	4.9%	Сжатие страницы уменьшит ее размер на 42,3 КБ (29 %).
code-1839406.jpg	jpegoptim({progressive: true, max: 60, stripAll: true})	93.3 kB	58.5%	не предупреждает
code-1839406. jpg	recompress()	58.2 kB	36.4%	не предупреждает
code-1839406.jpg	recompress({quality: «medium», method: «smallfry», loops: 5, progressive: true, strip: true})	87.7 kB	55%	не предупреждает
code-1839406.jpg	mozjpeg()	87.5 kB	54.8%	не предупреждает
code-1839406.jpg	mozjpeg({quality: 60, progressive: true, tune: «ms-ssim», smooth: 2})	113 kB	70.9%	не предупреждает

Название файла	Средство оптимизации и опции вызова	Saved Kb	Saved %	Google PageSpeed Insights
market-839574.jpg	imagemin.jpegtran({progressive: true})	30.7 kB	6.7%	Сжатие страницы уменьшит ее размер на 75,6 КБ (19 %).
market-839574.jpg	jpegoptim()	6.54 kB	1. 4%	Сжатие страницы уменьшит ее размер на 99,2 КБ (23 %).
market-839574.jpg	jpegoptim({progressive: true, max: 60, stripAll: true})	322 kB	69.9%	не предупреждает
market-839574.jpg	recompress()	164 kB	35.6%	не предупреждает
market-839574.jpg	recompress({quality: «medium», method: «smallfry», loops: 5, progressive: true, strip: true})	215 kB	46.8%	не предупреждает
market-839574.jpg	mozjpeg()	286 kB	62.3%	не предупреждает
market-839574.jpg	mozjpeg({quality: 60, progressive: true, tune: «ms-ssim», smooth: 2})	357 kB	77.6%	не предупреждает

Название файла	Средство оптимизации и опции вызова	Saved Kb	Saved %	Google PageSpeed Insights
red-rose-2602048. jpg	imagemin.jpegtran({progressive: true})	29.8 kB	5.1%	уменьшит ее размер на 113,8 КБ (22 %).
red-rose-2602048.jpg	jpegoptim()	210 B	0%	уменьшит ее размер на 142,7 КБ (26 %).
red-rose-2602048.jpg	jpegoptim({progressive: true, max: 60, stripAll: true})	411 kB	70.3%	не предупреждает
red-rose-2602048.jpg	recompress()	210 kB	35.9%	не предупреждает
red-rose-2602048.jpg	recompress({quality: «medium», method: «smallfry», loops: 5, progressive: true, strip: true})	275 kB	47.1%	не предупреждает
red-rose-2602048.jpg	mozjpeg()	367 kB	62.9%	не предупреждает
red-rose-2602048.jpg	mozjpeg({quality: 60, progressive: true, tune: «ms-ssim», smooth: 2})	457 kB	78.3%	не предупреждает

Как видно, лучше всех себя показывает mozjpeg даже без передачи каких-либо параметров. После обработки изображений никаких претензий со стороны Google PageSpeed Insights нет. При этом хочу обратить особое внимание, что несмотря на существенную степень сжатия качество изображений не пострадало, по крайней мере визуально изображения выглядят идентично с оригиналом. Посмотреть результаты и сравнить качество сжатия можно в архиве optimized.rar.

В конце хотел дополнить, что тестирование проводилось не только с теми картинками, которые доступны в архиве. В ходе тестирования заметил, что картинки больше 2000 пикселей по ширине и больше нормально не жмутся любыми перечисленными средствами Gulp согласно Google PageSpeed Insights. Для таких картинок надо искать более серьезные решения, включая те средства, которыми пользуются в самом Google 🙂

UPDATE: в ходе дальнейших экспериментов с JPEG форматом выяснилось несколько вещей:
imagemin-jpeg-recompress с методом компрессии smallfry часто дает ошибку, как-то связано с размерами изображения, но библиотека jpeg-archive давно не исправляется, поэтому от этого jpeg-recompress отказался.
imagemin-mozjpeg все таки визуально сильно портит качество на небольших и особенно маленьких изображениях, поэтому от него так же отказался.

Тэги: Gulp, инструментарий, javascript, скорость загрузки, автоматизация

Просмотров: 6073

Комментариев:

« Обработка наборов файлов в GulpВыявление активного порта на Windows »

gulp-imagemin — Анализ работоспособности пакетов npm

Все уязвимости безопасности относятся к производственных зависимостей прямых и косвенных пакеты. Уязвимости 0022 8.0.0 | 08/2021

• C
• H
• M
• L

9003 2 H
• M
• L

7. 1.0 | 01/2020

Популярные

• C
• H
• 90 041 М
• Л

• В
• М
• Л

6. 2.0 | 11/2019

• C
• H
• M 90 035
• Л

• В
• М
• Л 9 0035

5. 0.3 | 11/2018

• C
• H
• M 90 035
• Л

• В
• М
• Л 9 0035

4. 1.0 | 12/2017

• C
• H
• M
• Л

• В
• М
• Л 9003 4

Лицензия

Массачусетский технологический институт

Политика безопасности

Да

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (145 612)

Скачать тренд

Звезды GitHub

1,89 тыс.

Вилки

166

Авторы

30

---

Популярность прямого использования

TOP 5%

---

Пакет npm gulp-imagemin получает в общей сложности 145 612 загрузок в неделю. Таким образом, мы забили Уровень популярности gulp-imagemin должен быть популярным.

На основе статистики проекта из репозитория GitHub для npm пакет gulp-imagemin, мы обнаружили, что он снялся 1890 раз.

Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.

Частота фиксации

Открытые вопросы

19

Открытый заказ на продажу

1

Последняя версия

2 года назад

Последняя фиксация

7 месяцев назад

---

Дальнейший анализ состояния обслуживания gulp-imagemin на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.

Важным сигналом обслуживания проекта для gulp-imagemin является это 914.13.1 || >=16.0.0

---

Возраст

9 лет

Зависимости

11 прямых

Версии

48

Установочный размер

8,36 КБ

Распределенные теги

1

Количество файлов

4

Обслуживающий персонал

1

Типы TS

Да

---

gulp-imagemin имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм. Это означает, что для этого могут быть доступны другие теги. пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать стабильные релизы.

Репозиторий Gulp-imagemin — Сократите изображения PNG, JPEG, GIF и SVG с помощью imagemin для Gulp в мае 2023 г.

Меню

Главная

Актуальные

Широкий выбор ресурсов

Все ресурсы

Обучение

Создайте свой X

90 002 Алгоритмы Javascript

Проектирование системы

Интервью по программированию в университете

Каждый программист должен знать

Код

Фрагмент кода

Памятка

Вакансии

Удаленные компании

Компании, нанимающие без доски

Удаленные вакансии

Нишевые вакансии

Рекомендуем прочитать

Блог GitPiper

Интересные статьи о технологиях и программировании

Подробнее

Разработчики со всего мира

90 002 Портфолио разработчиков

Профиль разработчика на GitHub

Хакерские поисковые системы

Программирование Memes

Статистики загрузки

Последнее обновление: 11 мая 2023 г.

Загрузка readme

29 Проекты и приложения, похожие на «Gulp -Imagemin — Minify PNG, JPEG, GIF и SVG Images с Imagein для Glop». в мае 2023

• GitHub — holdr/grunt-smushit: задача Grunt для оптимизации изображений с использованием reSmush.it

  задача Grunt для оптимизации изображений с использованием re smush это способствует развитию Holdr grunt smusit путем создания учетной записи на git hub

• G это концентратор — holdr/gulp-smushit: Плагин Gulp для оптимизации PNG и JPG с использованием reSmush.it.

  Плагин Gulp для оптимизации png и jpg с помощью re smash it git hub holdr gulp smushit плагин gulp для оптимизации png и jpg с помощью re smash it

• smush.it!

• GitHub — Imagemin/Imagemin: [невыполненные] министерство изображений бесшовно

  Неудовлетворенные Minify Images плавно способствуют развитию Imagemin Imagemin, создавая учетную запись на Git Hub

• Sharp — Типичный случай использования.

  js предназначен для преобразования больших изображений многих форматов в меньшие, удобные для Интернета изображения JPEG, PNG и WebP различных размеров.

• Gm — GraphicsMagick и ImageMagick для Node.js.

• Exexif — библиотека Pure elixir для извлечения метаданных tiff и exif из файлов JPEG.

• ExifCleaner — БЕСПЛАТНОЕ настольное приложение для очистки метаданных изображений

  Бесплатное настольное приложение для очистки метаданных изображений min — Минимизация изображений PNG и JPEG для Grunt.

• Grunt-WebP — конвертируйте изображения в формат WebP.

• Gulp-WebP — преобразование изображений в WebP для Gulp.

• ImageOptim HTTP API для оптимизации на веб-серверах

• Grunt-imageoptim — Сделайте ImageOptim, ImageAlpha и JPEGmini частью автоматизированного процесса сборки.

• ImageOptim-CLI — автоматизирует ImageOptim, ImageAlpha и JPEGmini для Mac, чтобы сделать пакетную оптимизацию изображений частью автоматизированного процесса сборки.

  

• Tapnesh-CLI — Tapnesh — это инструмент командной строки, который легко и эффективно оптимизирует все ваши изображения параллельно!

• TinyPNG — интеллектуальное сжатие изображений WebP, PNG и JPEG

  Сделайте ваш веб-сайт быстрее и сэкономьте пропускную способность. Крошечный png оптимизирует веб-изображения p png и jpeg на 50 80, сохраняя полную прозрачность

• Kraken.io Image Optimizer

  Kraken io — это надежный сверхбыстрый оптимизатор изображений благодаря широкому набору алгоритмов оптимизации.0005

• Compressor.io — оптимизация и сжатие фотографий JPEG и изображений PNG

  Оптимизация и сжатие изображений JPEG и PNG онлайн-компрессор — это инструмент для сжатия фотографий с потерями и без потерь

• Репозитории GitHub

• mozjpeg — Улучшенный кодировщик JPEG.

• Jpegoptim — Утилита для оптимизации/сжатия файлов JPEG.

• ZopfliPNG — программа командной строки для оптимизации изображений PNG.

  

• Advance Projects

  Играйте в маму на своем телевизионном аркадном мониторе или мониторе с фиксированной частотой

• Leanify — Легкий минимизатор/оптимизатор файлов без потерь.

• Компрессор изображений Trimage (без потерь)

• Главная | ImageEngine

  Механизм обработки изображений повышает производительность веб-сайта и скорость загрузки страниц за счет автоматического обнаружения устройств, оптимизации изображений и предоставления изображений через cdn, повышает SEO-рейтинг, конверсию продаж и производительность мобильных устройств

• Global Image CDN с оптимизацией изображений в реальном времени

  Глобальная сеть серверов для оптимизации изображений в реальном времени, изменение размера загрузки изображений и быстрая cdn изображений, более быстрая и легкая работа для ваших пользователей

• GitHub — funbox/optimizt: Инструмент оптимизации изображений CLI

  Инструмент оптимизации изображений Cli способствует развитию funbox optimizt путем создания учетной записи на git hub

Подпишитесь на нашу рассылку новостей

Подпишитесь, чтобы получать ресурсы прямо на ваш почтовый ящик.