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

Katie Hempenius

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

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

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

Мера

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

Imagemin

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

Модуль Imagemin npm

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

Вы также можете использовать Imagemin отдельно в виде скрипта Node.js. Этот код использует плагин "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);
})();