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

Katie Hempenius

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

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

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

Мера

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

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

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

Плагины

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

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

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

Интерфейс командной строки 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);
})();