Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Зачем это нужно?
  • Измерение
  • Imagemin
    • Подключаемые модули
    • Программа командной строки Imagemin
    • Модуль npm Imagemin

Сжатие изображений с помощью средства Imagemin

Nov 5, 2018 — Обновлено Apr 6, 2020
Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
Содержание
  • Зачем это нужно?
  • Измерение
  • Imagemin
    • Подключаемые модули
    • Программа командной строки Imagemin
    • Модуль npm Imagemin

Зачем это нужно? #

Несжатые изображения увеличивают размер страниц. У фотографии справа размер файла на 40% меньше, чем у фотографии слева, но большинство пользователей, вероятно, не заметят различий между этими фотографиями.

20 КБ

12 КБ

Измерение #

Запустите Lighthouse и проверьте, нет ли возможностей сжать изображения и тем самым ускорить загрузку страницы. Такие возможности будут указаны в разделе Efficiently encode images (Эффективное кодирование изображений):

Изображение
В настоящее время Lighthouse проверяет, можно ли сжать изображения, только для формата JPEG.

Imagemin #

Imagemin — отличное средство для сжатия изображений. Оно поддерживает широкий спектр форматов изображений и его легко интегрировать со сценариями и инструментами сборки. Средство Imagemin доступно как в виде программы командной строки, так и в виде модуля npm. Как правило, лучше всего работать с модулем npm, так как в нем больше параметров конфигурации. Программа командной строки — достойная альтернатива, если вы хотите попробовать использовать Imagemin, не имея дела с кодом.

Подключаемые модули #

Средство Imagemin разработано для использования подключаемых модулей. Подключаемый модуль — это пакет npm, который сжимает изображения определенного формата (например, подключаемый модуль mozjpeg сжимает JPEG-файлы). Для популярных форматов изображений может быть доступно несколько подключаемых модулей.

Самое важное, что нужно учитывать при выборе подключаемого модуля, — метод сжатия («с потерями» или «без потерь»). При сжатии без потерь данные изображения не теряются. При сжатии с потерями размер файла уменьшается, но за счет возможного снижения качества изображения. Если для подключаемого модуля не указан используемый метод сжатия («с потерями» или «без потерь»), его можно определить по API подключаемого модуля: если можно указать качество изображения на выходе, то используется метод сжатия «с потерями».

Большинству людей лучше всего подходят подключаемые модули для сжатия с потерями. Они позволяют значительно уменьшать размеры файлов. Кроме того, можно настроить уровни сжатия в соответствии с вашими потребностями. В таблице ниже перечислены популярные подключаемые модули Imagemin. Это не все доступные подключаемые модули, но они хорошо подойдут для ваших проектов.

Формат изображенияПодключаемые модули для сжатия с потерямиПодключаемые модули для сжатия без потерь
JPEGimagemin-mozjpegimagemin-jpegtran
PNGimagemin-pngquantimagemin-optipng
GIFimagemin-giflossyimagemin-gifsicle
SVGImagemin-svgo
WebPimagemin-webp

Программа командной строки Imagemin #

Программа командной строки Imagemin работает с пятью различными подключаемыми модулями: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant и imagemin-svgo. Средство Imagemin использует соответствующий подключаемый модуль в зависимости от формата изображения входных данных.

Чтобы сжать изображения в каталоге images/ и сохранить их в том же каталоге, выполните следующую команду (при этом исходные файлы будут перезаписаны):

$ imagemin images/* --out-dir=images

Модуль npm Imagemin #

Если вы применяете одно из средств сборки, попробуйте использовать codelabs для Imaginemin с webpack, gulp или grunt.

Кроме того, можно использовать само средство Imagemin в качестве сценария Node. В этом коде используется подключаемый модуль imagemin-mozjpeg для сжатия JPEG-файлов до уровня качества 50 (где 0 — самое низкое, а 100 — самое высокое качество):

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
const files = await imagemin(
['source_dir/*.jpg', 'another_dir/*.jpg'],
{
destination: 'destination_dir',
plugins: [imageminMozjpeg({quality: 50})]
}
);
console.log(files);
})();
Производительность
Последнее обновление: Apr 6, 2020 — Улучшить статью
Codelabs

See it in action

Learn more and put this guide into action.

  • Using Imagemin with webpack
  • Using Imagemin with Gulp
  • Using Imagemin with Grunt
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.