Используйте Imagemin для сжатия изображений

Кэти Хемпениус
Katie Hempenius

Почему вас это должно волновать?

Несжатые изображения наполняют ваши страницы ненужными байтами. Поскольку изображения могут быть кандидатами на наибольшую отрисовку содержимого (LCP) , эти ненужные байты могут увеличить продолжительность загрузки ресурсов изображения, что может привести к увеличению времени LCP.

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

20 КБ

12 КБ

Мера

Запустите Lighthouse, чтобы проверить возможности улучшения загрузки страницы за счет сжатия изображений. Эти возможности перечислены в разделе «Эффективное кодирование изображений»:

изображение

Изображениемин

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

Плагины

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

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

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

Формат изображения Плагин(ы) с потерями Плагин(ы) без потерь
JPEG imagemin-mozjpeg imagemin-jpegtran
PNG imagemin-pngquant imagemin-optipng
гифка imagemin-giflossy imagemin-gifsicle
SVG imagemin-svgo
ВебП imagemin-webp imagemin-webp

Интерфейс командной строки Imagemin

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

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

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

NPM-модуль Imagemin

Если вы хотите использовать Imagemin с упаковщиком, проверьте, есть ли для выбранного вами упаковщика плагин. Например, webpack — популярный сборщик, который отлично поддерживает Imagemin. Вы можете узнать больше о том , как использовать Imagemin с веб-пакетом, в этой лаборатории кода .

Вы также можете использовать 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);
})();