Типичная история: лендинг разогнан, скрипты раздроблены на чанки, CSS обрезан до критического — а PageSpeed Insights всё равно показывает красный LCP. Открываешь DevTools, смотришь Network — и видишь героя сцены: одна баннерная фотография на 3,4 МБ, рядом ещё четыре PNG-иконки по 800 КБ каждая. Дальше можно неделями оптимизировать JS, но погоды это не сделает.

Картинки на средней странице забирают от половины до двух третей всего веса трафика — и поэтому минута, потраченная на их сжатие, чаще всего даёт больше, чем час над бандлом. Заметнее всего эффект бьёт по показателю LCP (Largest Contentful Paint), который Google учитывает в ранжировании: чем быстрее загружается главная картинка экрана, тем выше страница в выдаче.

Хорошая новость в том, что инструментов для оптимизации много, и выбирать есть из чего: онлайн-сжиматели на полминуты, CLI для пайплайнов, плагины сборщиков, нативные приложения. Плохая — чтобы они дали реальный эффект, сперва нужно ответить на два вопроса: какой формат подойдёт под конкретную картинку и сколько таких файлов на потоке. Если изображений десятки — лучше встроить оптимизацию в сборку, ручные сервисы тут проиграют по времени. Если речь о паре баннеров для лендинга — достаточно веб-сервиса с drag-and-drop.

Выбор формата под задачу

Все инструменты ниже умеют конвертировать между форматами, но «конвертировать» не значит «улучшить». JPEG, PNG, WebP, AVIF и SVG — разные звери, и оптимизация начинается с правильного выбора:

• JPEG — фотографии и изображения с плавными градиентами. Без альфа-канала, зато везде, во всех браузерах и любых редакторах.
• PNG — скриншоты интерфейсов, иконки с прозрачностью, графика с чёткими краями. На фотографиях весит в разы больше JPEG при сопоставимом качестве.
• WebP — современная замена JPEG и PNG в одном лице. Поддерживает и lossy-, и lossless-сжатие, и альфа-канал. На типичных фото даёт 25–35% экономии относительно JPEG.
• AVIF — следующее поколение, ещё компактнее WebP (часто на 20–50%). Сжатие медленнее, поэтому для on-the-fly использования через сборщик стоит включать кеш.
• SVG — векторная графика: логотипы, иконки, простые иллюстрации. Не для фотографий. Главный фокус оптимизации — чистка лишних атрибутов, метаданных и комментариев в самом XML.

Чтобы не плодить пять вариантов одной картинки в HTML, используют тег picture с источниками разных форматов — браузер сам выберет первый поддерживаемый. Логика выбора при разной плотности экранов разобрана в отдельной статье про атрибуты srcset и sizes.

Универсальные веб-сервисы

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

Squoosh

Веб-приложение от команды Chrome Labs, показанное публике на Chrome Dev Summit 2018. На фоне конкурентов выделялось тем, что давало пощупать сразу несколько кодеков (MozJPEG, WebP, AVIF, JPEG XL) в одном интерфейсе со слайдером «до/после» и моментальным превью. До этого, чтобы сравнить, как одна и та же картинка ведёт себя в разных форматах, приходилось гонять её через три-четыре сервиса по очереди.

Работает целиком на клиенте, файл наружу не уходит — полезно, если оптимизируется что-то под NDA. К Squoosh прилагается ещё CLI и JS-библиотека — о них чуть ниже.

TinyPNG

Ветеран жанра, запущен голландской студией Voormedia ещё в 2010 году — узнаваемый по иконке с пандой. Главная фишка — собственная реализация smart-lossy для PNG: алгоритм уменьшает цветовую палитру до 256 оттенков с подбором так, чтобы глаз не зацепился. Аналогичный подход для JPEG-ов разработчики дописали позже, и сейчас сервис принимает PNG, JPEG и WebP. Бесплатный лимит — до 20 файлов по 5 МБ за подход. Есть API и плагины для Photoshop и Figma, что отличает сервис от чисто веб-страничных конкурентов: оптимизация втягивается прямо в воркфлоу дизайнера.

Compressor.io

Французский проект, появившийся в 2015 году и сразу зашедший за счёт максимально простого интерфейса: один большой drop-зон, одна кнопка. Среди широких сжимателей выделяется тем, что без отдельной утилиты ужимает SVG — большинство веб-комбайнов работают только с растром. Принимает JPEG, PNG, GIF, SVG и WebP с переключателем между lossy- и lossless-режимом. Бесплатный потолок — 10 МБ на файл, что покрывает почти все веб-кейсы кроме исходников от фотографа.

Optimizilla

Запущен командой imagecompressor.com примерно в то же время, что и Compressor.io. Главное отличие от соседей по нише — индивидуальный слайдер качества на каждый файл из пакета. У большинства конкурентов ползунок один на всё, а здесь можно одной фотографии оставить 90%, а соседнему скриншоту с шумом без потерь укатать до 50%. Принимает до 20 JPEG, PNG и GIF за подход.

Shrink.media

Лицевая сторона румынской компании ShortPixel, известной массовому пользователю по одноимённому плагину к WordPress. Сам сервис делает упор на мобильное использование: помимо обычного сжатия умеет автоматически уменьшать разрешение до заданного размера, что часто полезнее самого сжатия (картинка 4000×3000 на превью 320×240 не нужна никому). Без регистрации, есть нативные мобильные приложения для iOS и Android — конкурентов с приличным мобильным UI среди оптимизаторов до сих пор немного.

Узкоспециализированные сервисы

Когда нужен не комбайн, а точечный инструмент под конкретный формат или задачу.

SVGOMG

Веб-фронт к консольной утилите SVGO, написанный Джейком Арчибальдом из команды Google Chrome в 2014 году. Сам SVGO существует с 2012-го как Node.js-инструмент с десятками плагинов — пользоваться им из терминала на разовой задаче неудобно. SVGOMG закрывает эту нишу: показывает оптимизированный SVG в превью, рядом — выигрыш в байтах и список всех плагинов с тогглами, чтобы видно было, какая правка что меняет в коде. Иконку из Figma часто получается ужать в 2–5 раз без потерь — перетаскиванием файла на страницу.

Convertio (AVIF)

Универсальный онлайн-конвертер от украинской команды Softo, работает с 2014 года и тянет более 300 форматов. В подборку попадает за счёт отдельной страницы под каждый таргет: можно зайти сразу на AVIF-конвертер и не копаться в общих настройках. Отличие от чисто браузерных энкодеров — серверная обработка, благодаря которой бесплатно проглатываются файлы до 100 МБ за раз. Подойдёт, когда нужно собрать набор picture-источников из тяжёлых исходников и нет желания ставить локальный энкодер. Из той же серии — конвертеры в WebP и JPEG XL на соседних страницах сайта.

ezgif.com

Ветеран отдельной ниши, существует с начала 2010-х и фактически держит на себе весь любительский GIF-инструментарий веба. На фоне обычных сжимателей картинок выделяется тем, что закрывает анимированные форматы и видео — то, что обычные оптимизаторы стороной обходят. Умеет ужимать анимированные GIF и APNG, конвертировать GIF в MP4/WebM (что почти всегда уменьшает вес в разы), нарезать кадры, накладывать текст. С недавних лет добавили работу с AVIF и WebP-анимациями. Если в проекте остались тяжёлые автоплееры на GIF — через ezgif они обычно превращаются в десять раз более лёгкий видеоэлемент.

VerExif

Простой испанский сервис, живёт примерно с 2013 года и делает строго одно: показывает EXIF-метаданные внутри фотографии и удаляет их по кнопке. GPS-координаты съёмки, модель камеры, имя автора, версия Photoshop — всё это уезжает на сервер вместе с фотографией, если её не очистить. От универсальных сжимателей отличается тем, что не трогает сами пиксели: оригинальное качество сохраняется байт-в-байт, чистятся только заголовки. Бесплатно, без регистрации, лимит — 20 МБ на файл. Если EXIF нужно снимать с пачки фотографий регулярно, имеет смысл смотреть в сторону exiftool — CLI Фила Харви, поддерживается с 2003 года и считается стандартом для работы с метаданными.

Сборка и CLI

Если картинок десятки или сотни и они обновляются регулярно, ручные сервисы быстро превращаются в боль. Тут подключаются утилиты для терминала и плагины сборщиков.

sharp

Библиотека Lovell Fuller, развивается с 2013 года. Изначально была одной из многих обёрток над нативными графическими движками для Node.js, но выбила место под солнцем за счёт правильного выбора подкапотника — libvips вместо ImageMagick или GraphicsMagick. libvips работает с изображением как с потоком, а не грузит файл целиком в память, и поэтому даёт многократное ускорение и низкое потребление памяти на больших картинках. К 2026 году sharp по факту стала стандартом: на ней построены оптимизаторы Next.js, Nuxt, Astro и почти всех современных фреймворков. Умеет ресайз, конвертацию между всеми основными форматами, наложение водяных знаков и работу с метаданными.

const sharp = require('sharp');

await sharp('photo.jpg')
  .resize({ width: 1200 })
  .webp({ quality: 80 })
  .toFile('photo.webp');

Squoosh CLI и libSquoosh

Релиз 2020 года, ответ команды Chrome Labs на типичную проблему: понравился сервис, но что делать, когда картинок не три, а триста? Под капотом ровно те же WebAssembly-кодеки, что и в веб-версии — никаких расхождений в результате между ручным сжатием и автоматическим. Удобно для CI: в пайплайн добавляется команда, которая прогоняет всю папку /public/images через выбранный кодек и кладёт результаты рядом.

pngquant и MozJPEG

Низкоуровневые утилиты, на которых под капотом крутятся многие веб-сервисы из подборки выше. pngquant в современном виде поддерживается Корнелом Лесинским с 2009 года — перепиcка более раннего инструмента из 1990-х. Делает одно: превращает 24-битный PNG в 8-битный с индексной палитрой и продуманным дизерингом. Типичная экономия — 50–70% без визуальной потери качества.

MozJPEG — форк libjpeg, выпущенный Mozilla в 2014 году. Идея проекта была в том, чтобы выжать из старого JPEG ещё несколько процентов без потери обратной совместимости: файлы открываются любым старым декодером, но энкодятся умнее (более точная квантизация, перебор Huffman-таблиц, тримминг trailing-байтов). Итог — 5–10% экономии относительно стандартного энкодера, и именно поэтому MozJPEG лежит в основе JPEG-режима у Squoosh, ImageOptim и большинства приличных оптимизаторов.

Плагины сборщиков

Подключаются одной строчкой в конфиг и работают на этапе build. Под актуальные сборщики живут отдельные пакеты:

• Vite — vite-plugin-image-optimizer (использует sharp под капотом).
• webpack — image-minimizer-webpack-plugin.
• Rollup — rollup-plugin-imagemin.
• Gulp — gulp-imagemin, хоть и формально не поддерживается — в legacy-проектах продолжает работать.

Сам imagemin объявлен unmaintained в 2024 году, поэтому в новые проекты его лучше не тащить — берите sharp напрямую или плагин на его основе.

Десктопные приложения

Когда хочется одну кнопку «брось файл — забери оптимизированный» без вкладок и интернета.

• ImageOptim — классика для macOS, выпускается тем же Корнелом Лесинским, что и pngquant, с 2008 года. Отличие от соседей в том, что внутри одного приложения связка из нескольких лучших оптимизаторов сразу (MozJPEG, pngquant, SVGO, Zopfli, Guetzli, OptiPNG): файл прогоняется через всех и сохраняется тот результат, который дал минимальный вес без видимого ухудшения. Принимает папки, заменяет оригиналы, полностью бесплатно.
  
  
• Trimage — открытое кроссплатформенное приложение на Python/Qt, появилось около 2009 года как идейный аналог ImageOptim под Linux. По сути та же идея «цепочка лучших оптимизаторов в один клик», только для платформ, где ImageOptim не работает. Без настроек, для линуксовой workstation — самое то.
  
  
• Pngyu — нативный GUI-фронт к pngquant для Windows и macOS от японского разработчика nukesaq88, проект 2014 года. Никакого нового алгоритма, вся ценность — пользоваться pngquant без терминала и без npm-зависимостей.
  
  

Частые ошибки при оптимизации

Несколько граблей, на которые легко наступить, если оптимизация делается впервые:

• Не сохраняют оригиналы. Один прогон через lossy-сжиматель — и качество ушло безвозвратно. Любая дальнейшая работа с картинкой будет идти от уже ухудшенной версии. Папку с оригиналами держим отдельно.
• Пережимают до артефактов. Качество ниже 60 на JPEG почти всегда даёт видимые квадраты вокруг контрастных линий. Лучше уменьшить разрешение и оставить качество 75–85, чем ужать в кашу при исходном размере.
• Пытаются «оптимизировать» через CSS. Картинка 4000×3000, выведенная в width: 320px, всё равно весит 3 МБ. CSS меняет только размер отрисовки, а не вес скачанного файла. Нужен реальный ресайз через любой инструмент выше.
• Забывают loading=«lazy» на изображениях ниже первого экрана. Само сжатие тут не поможет — браузер всё равно тянет файл сразу. Один атрибут на тегах img в подвале страницы переносит их загрузку на момент реальной прокрутки.
• Конвертируют в AVIF без фолбека. AVIF в Safari появился только в 16.4 (март 2023), и пользователей более старых версий iOS до сих пор немало. Без обёртки в picture с источником WebP или JPEG такая картинка просто не покажется.

Если задача оптимизации стоит регулярно — имеет смысл смотреть не только на вес картинок, но и на смежные метрики: например, на сдвиги макета при загрузке, которые часто провоцируются именно картинками без заранее заданных размеров.