Для чего сжимать изображения сайта?
Несжатые изображения наполняют ваши страницы ненужными байтами. Фотография справа на 40% меньше, чем слева, но, определенно будет выглядеть идентично для пользователя вашего ресурса.
Анализ размера изображений с помощью Lighthouse Google
Запустите Lighthouse, чтобы проверить возможности улучшения загрузки страницы путем сжатия изображений. Эти возможности перечислены в разделе «Efficiently encode images».
*В настоящее время Lighthouse сообщает о возможностях сжатия изображений только в формате JPEG.
Imagemin
Imagemin является лучшим выбором для сжатия изображений вашего сайта, поскольку он поддерживает широкий спектр форматов изображений и легко интегрируется со сценариями и инструментами сборки. Imagemin доступен в виде как CLI, так и модуля npm . Как правило, модуль npm — лучший выбор, потому что он предлагает больше опций конфигурации, но CLI может быть достойной альтернативой, если вы хотите попробовать Imagemin, не касаясь кода реализовать все 1 простой командой.
Плагины
Imagemin построен вокруг «плагинов». Плагин — это пакет npm, который сжимает определенный формат изображения (например, «mozjpeg» сжимает JPEG). Популярные графические форматы могут иметь несколько плагинов для выбора.
При выборе плагина важно учитывать, преобразует ли он изображения в «потерянном» виде или «без потерь».
1. При сжатии «без потерь» данные соответственно не теряются.
2. Сжатие с «потерями» уменьшает размер файла, но за счет снижения качества изображения.
Если плагин не имеет какой либо информации о преобразовании на выходе, это можно посмотреть по API (если можно указать качество изображения на выходе — данный платит использует преобразование с «потерями»).
Для большинства людей плагины с «потерей» качества — лучший выбор. Такие плагины предлагают значительно большую экономию размера, и вы можете настроить уровни сжатия в соответствии со своими потребностями. В таблице ниже перечислены популярные плагины Imagemin. Это не единственные плагины web.dev, но все они будут отличным выбором для вашего проекта.
«ТАБЛИЦА»
Imagemin CLI
CLI Imagemin работает с 5 различными плагинами: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant и imagemin-svgo. Imagemin использует соответствующий плагин в зависимости от формата изображения ввода.
Чтобы сжать изображения в каталоге «images /» и сохранить их в том же каталоге, выполните следующую команду (!перезаписывает исходные файлы):
$ imagemin images / * — out-dir = images
Модуль Imagemin npm
Если вы используете один из этих инструментов Webpack , Gulp и Grunt, извлеките кодовые метки для Imaginemin.
Также можно использовать 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_dir’,
{plugins: [imageminMozjpeg({quality: 50})]}
);
console.log(files);
})();