Как сжать изображения для сайта

На обычной странице изображения весят больше, чем HTML, CSS и скрипты вместе взятые. Одна фотография, скопированная прямо с телефона, может занимать от 3 до 6 МБ, тогда как остальная страница — несколько сотен килобайт. Оптимизация картинок — самый дешёвый способ ускорить сайт, и она напрямую влияет на Largest Contentful Paint — метрику Core Web Vitals, которая измеряет, как быстро появляется основной контент.

В этом гайде — весь процесс целиком: определить, в каком размере показывается каждое изображение, выбрать правильный формат, сжать, проверить результат и правильно отдать его браузеру. Подход работает для сайта, свёрстанного вручную, для интернет-магазина и для блога на любой CMS.

Определите бюджет до начала работы

Полезно держать в голове конкретные цифры. Это практические ориентиры, а не жёсткие правила:

• Главный баннер или изображение на всю ширину: примерно 150–300 КБ.
• Иллюстрация внутри статьи: 50–150 КБ.
• Карточка товара или миниатюра в сетке: 20–60 КБ.
• Логотип или иконка: несколько килобайт, в идеале SVG.

Страница с одним баннером и десятью иллюстрациями, уложенными в эти цифры, весит около 1–2 МБ за счёт картинок. Та же страница из необработанных фото с телефона легко переваливает за 30 МБ.

Шаг 1. Уменьшите до размера, в котором картинка реально показывается

Количество пикселей влияет на вес файла сильнее любой настройки качества. В фото 4000×3000 — 12 миллионов пикселей, а в 1600×1200 — меньше 2 миллионов. Это минус 85% ещё до начала сжатия.

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

• Баннер на всю ширину: 1600–2000 px по ширине хватает для большинства ноутбуков и retina-экранов.
• Колонка статьи шириной 700–800 px: экспортируйте в 1200–1600 px, чтобы картинка оставалась чёткой на 2×-дисплеях.
• Карточка в сетке из трёх колонок: 600–800 px.

В инструменте Изменить размер изображения онлайн укажите ширину и очистите поле высоты, чтобы сохранить пропорции, или введите одно и то же число в оба поля при включённой опции «Сохранять пропорции» — так длинная сторона будет ограничена в смешанной пачке вертикальных и горизонтальных снимков. Учтите: изображения, которые уже меньше заданной рамки, будут увеличены до неё, поэтому не прогоняйте мелкие иконки через пакет с большой рамкой.

При изменении размера формат сохраняется. JPG и WebP перекодируются с высоким качеством (0,92), PNG остаётся без потерь. Метаданные о местоположении и камере при этом удаляются — для публикуемых фото это и так нужно.

Шаг 2. Выберите правильный формат

Выбирайте по содержимому, а не по привычке:

• Фотографии и всё с градиентами → WebP. При том же визуальном качестве он обычно на 25–35% легче JPG и поддерживается всеми современными браузерами.
• Фотографии, где WebP использовать нельзя → JPG с качеством 75–85. Некоторые шаблоны писем, старые CMS и фиды маркетплейсов до сих пор ждут JPG.
• Скриншоты, логотипы, схемы, плоская графика → PNG с уменьшенной палитрой. В таких изображениях мало цветов и чёткие края, на которых JPG даёт заметную грязь.
• Графика с прозрачностью — крупная или фотографическая → WebP. Он сохраняет альфа-канал и намного легче PNG для вырезанных фото товаров.
• Иконки и простые иллюстрации → SVG, если у вас есть векторный исходник. По весу и чёткости с ним не сравнится никакой растр.

Самая частая ошибка — фотография, сохранённая в PNG. Такой файл нередко в 5–10 раз тяжелее хорошего JPG без какой-либо видимой пользы.

Шаг 3. Сожмите

Фотографии — в WebP

Конвертировать JPG в WebP онлайн по умолчанию использует качество 85 — это подходит для большинства иллюстраций в контенте. Для миниатюр и фоновых изображений под текстом опускайтесь до 70–75, а для баннеров с мелкими деталями или текстом на картинке поднимайте до 90. Инструмент принимает и PNG, сохраняя прозрачность.

Для скриншотов и графики с прозрачностью Конвертировать PNG в WebP онлайн по умолчанию использует качество 90 — тонкие линии и мелкий текст остаются чёткими.

WebP кодируется встроенным кодировщиком вашего браузера. Safari не умеет кодировать WebP, поэтому для этого шага используйте Chrome, Edge или Firefox — вместо файла с неверным форматом страница покажет ошибку.

Плоская графика в PNG

Сжать PNG онлайн сокращает палитру изображения до 256, 128 или 64 цветов и сохраняет прозрачность. Скриншоты и логотипы при 256 цветах обычно теряют 50–70% веса без видимых изменений. Начните с 256, для скриншотов интерфейса попробуйте 128, а 64 оставьте для графиков и простых иконок. Дизеринг не применяется, поэтому на плавных градиентах может появиться полосатость — в таком случае вернитесь на ступень выше или переведите это изображение в WebP.

Если остаётесь на JPG

Сжать JPG онлайн по умолчанию использует качество 80. Для контента сайта оптимум обычно 75–80. Если файл уже хорошо оптимизирован и перекодирование сделало бы его больше, инструмент вернёт оригинал без изменений.

Шаг 4. Проверьте перед публикацией

Настройки сжатия — это всегда компромисс, поэтому смотрите на результат там, где JPEG и WebP сдают первыми: плавные градиенты неба или стен, резкие контрастные края и насыщенные красные участки. Сравнить два изображения показывает оригинал и сжатую версию под одним слайдером, так что разницу легко заметить.

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

Шаг 5. Правильно отдайте изображения

Сжатие — только половина работы. Как браузер загрузит результат, решает разметка:

• Всегда указывайте width и height у <img>. Браузер зарезервирует место до загрузки файла, и макет не будет прыгать — а сдвиг макета тоже входит в Core Web Vitals.
• Загружайте лениво всё, что ниже первого экрана, с помощью loading="lazy". Никогда не делайте ленивой загрузку главного баннера: обычно именно он — элемент Largest Contentful Paint, и задержка ухудшит оценку. Вместо этого задайте ему fetchpriority="high".
• Используйте srcset и sizes, когда одно изображение выводится в очень разной ширине на телефоне и на десктопе. Экспортируйте две-три ширины, например 800, 1200 и 1600 px, и пусть браузер выбирает сам.
• Используйте <picture> с запасным JPG, только если нужно поддерживать совсем старые браузеры. Большинству сайтов хватит обычного WebP.
• Кэшируйте надолго. Задайте файлам изображений долгий срок кэширования и меняйте имя файла, когда меняется картинка.

Многие CMS при загрузке сами создают уменьшенные копии. Это помогает, но уменьшают они то, что вы загрузили, так что исходник на 6 МБ всё равно означает медленную загрузку и раздутое хранилище. Загружайте изображения, уже близкие к максимальному нужному размеру.

Встроенные средства на компьютере и телефоне

Если картинок всего несколько, может хватить и того, что уже есть:

• «Просмотр» в macOS: «Инструменты» → «Настроить размер», чтобы изменить размеры, затем «Файл» → «Экспортировать» со слайдером качества для JPG. Быстро для одного-двух файлов.
• «Фотографии» в Windows: функция изменения размера предлагает готовые размеры и настройку качества. Paint тоже умеет менять размер, но сохраняет JPG без выбора качества.
• iPhone и Android: встроенные редакторы умеют кадрировать, но не дают задать размер в пикселях или степень сжатия, так что фото с телефона для сайта лучше обрабатывать по пути на сайт.

Браузерные инструменты выше оправдывают себя, когда файлов много: перетащите целую папку, скачайте результат одним ZIP — и ничего не загружается на сервер.

Решение проблем

• WebP получился больше, чем JPG. Исходный JPG уже был сильно сжат, или качество выставлено на 95–100. Снизьте качество до 80 или оставьте JPG.
• PNG почти не уменьшился. Он уже был индексированным или оптимизированным. Инструмент сообщит, что оставлен оригинал.
• Прозрачные области стали белыми. Изображение прошло через «Сжать JPG онлайн», а в JPG нет прозрачности. Для вырезанных объектов используйте «Конвертировать PNG в WebP онлайн» или «Сжать PNG онлайн».
• Текст на скриншотах выглядит размытым. Используйте PNG или WebP с качеством от 90, но никогда не JPG.
• Картинки размыты на retina-экранах. Вы уменьшили их до ширины в CSS; экспортируйте примерно в два раза больше.

Чек-лист

1. Измерьте максимальную ширину вывода каждого изображения.
2. Уменьшите максимум примерно до двойной этой ширины.
3. Фото — в WebP с качеством 80–85, плоскую графику — в PNG с палитрой.
4. Сравните результат на градиентах и краях.
5. Сверьте каждый файл с бюджетом по весу.
6. Добавьте width, height, ленивую загрузку ниже первого экрана и высокий приоритет для главного баннера.