Сжатие изображений с помощью средства Imagemin
Зачем это нужно? #
Несжатые изображения увеличивают размер страниц. У фотографии справа размер файла на 40% меньше, чем у фотографии слева, но большинство пользователей, вероятно, не заметят различий между этими фотографиями.
|
|
|---|
Измерение #
Запустите Lighthouse и проверьте, нет ли возможностей сжать изображения и тем самым ускорить загрузку страницы. Такие возможности будут указаны в разделе Efficiently encode images (Эффективное кодирование изображений):
Imagemin #
Imagemin — отличное средство для сжатия изображений. Оно поддерживает широкий спектр форматов изображений и его легко интегрировать со сценариями и инструментами сборки. Средство Imagemin доступно как в виде программы командной строки, так и в виде модуля npm. Как правило, лучше всего работать с модулем npm, так как в нем больше параметров конфигурации. Программа командной строки — достойная альтернатива, если вы хотите попробовать использовать Imagemin, не имея дела с кодом.
Подключаемые модули #
Средство Imagemin разработано для использования подключаемых модулей. Подключаемый модуль — это пакет npm, который сжимает изображения определенного формата (например, подключаемый модуль mozjpeg сжимает JPEG-файлы). Для популярных форматов изображений может быть доступно несколько подключаемых модулей.
Самое важное, что нужно учитывать при выборе подключаемого модуля, — метод сжатия («с потерями» или «без потерь»). При сжатии без потерь данные изображения не теряются. При сжатии с потерями размер файла уменьшается, но за счет возможного снижения качества изображения. Если для подключаемого модуля не указан используемый метод сжатия («с потерями» или «без потерь»), его можно определить по API подключаемого модуля: если можно указать качество изображения на выходе, то используется метод сжатия «с потерями».
Большинству людей лучше всего подходят подключаемые модули для сжатия с потерями. Они позволяют значительно уменьшать размеры файлов. Кроме того, можно настроить уровни сжатия в соответствии с вашими потребностями. В таблице ниже перечислены популярные подключаемые модули Imagemin. Это не все доступные подключаемые модули, но они хорошо подойдут для ваших проектов.
Программа командной строки 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);
})();