Оптимизация изображений в Gulp под Google PageSpeed Insights
Автор: Кудашев СергейМне очень нравится использовать 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
- C
- H
- M
- L
- 9003 2
- M
- L
1.0Популярные
- C
- H
- 90 041 М
- Л
- В
- М
- Л
2.0- C
-
- M 90 035
- Л
- В
- М
- Л 9 0035
0.3- C
- H
- M 90 035
- Л
- В
- М
- Л 9 0035
1.0- 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
js предназначен для преобразования больших изображений многих форматов в меньшие, удобные для Интернета изображения JPEG, PNG и WebP различных размеров.
Подпишитесь на нашу рассылку новостей
Подпишитесь, чтобы получать ресурсы прямо на ваш почтовый ящик.