Почему вас это должно волновать?
Несжатые изображения наполняют ваши страницы ненужными байтами. Поскольку изображения могут быть кандидатами на наибольшую отрисовку содержимого (LCP) , эти ненужные байты могут увеличить время загрузки ресурсов , что может привести к увеличению времени LCP.
Фотография справа на 40% меньше, чем фотография слева, но, вероятно, будет выглядеть идентично обычному пользователю.
|
|
|---|
Мера
Запустите 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
Модуль Imagemin npm
Если вы используете один из этих инструментов сборки, ознакомьтесь с лабораториями кода для Imagemin с помощью 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);
})();