Большая фотография может весить несколько мегабайт, хотя на странице сайта она показывается размером всего 900–1200 пикселей. В результате изображение дольше загружается, расходует мобильный трафик и замедляет публикацию.

Хорошая новость в том, что вес файла часто можно уменьшить в несколько раз без заметного ухудшения картинки.

От чего зависит размер файла

На итоговый вес влияют четыре вещи:

  • разрешение изображения;
  • выбранный формат;
  • уровень качества;
  • количество деталей и шума в кадре.

Фотография 6000 × 4000 пикселей почти никогда не нужна для обычной статьи. Даже если браузер визуально уменьшает её, пользователю всё равно приходится загружать полный исходник.

Какой формат выбрать

JPEG

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

PNG

Хорош для интерфейсов, логотипов, схем и картинок с прозрачным фоном. Для обычной фотографии PNG часто получается неоправданно тяжёлым.

WebP

Универсальный вариант для сайта. Поддерживает прозрачность и обычно весит меньше JPEG или PNG при сопоставимом качестве.

AVIF

Может давать ещё более компактный результат, но для повседневной работы WebP часто удобнее благодаря скорости и широкой поддержке.

Сначала уменьшайте разрешение

Главная ошибка — пытаться сжать огромную фотографию, не меняя её размеры.

Для большинства задач можно начинать с таких ориентиров:

  • 1600–1920 px по ширине — крупная иллюстрация в статье;
  • 1200 px — карточка, превью или обычная публикация;
  • 800 px — небольшая картинка внутри текста;
  • исходное разрешение — только когда читателю действительно нужна детализация.

Это не жёсткие правила, а удобная отправная точка.

Какое качество установить

Для JPEG и WebP разумно начать с качества 80–85%. На фотографиях разница с оригиналом часто почти незаметна, а вес уменьшается значительно.

Если файл всё ещё слишком большой, можно постепенно опускать качество и смотреть на:

  • мелкий текст;
  • волосы и траву;
  • градиенты;
  • тёмные участки;
  • контрастные края.

Именно там артефакты появляются раньше всего.

Быстрая оптимизация в браузере

Оптимизатор изображений AllBlog позволяет обработать сразу несколько файлов.

Достаточно:

  1. добавить изображения;
  2. выбрать JPEG, PNG, WebP или сохранение исходного формата;
  3. указать качество;
  4. задать максимальную ширину и высоту;
  5. скачать облегчённые копии.

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

Типичные ошибки

Сохранять фотографию в PNG

PNG не теряет качество, но для фотографии может весить в несколько раз больше JPEG или WebP.

Сжимать один и тот же JPEG много раз

Каждое повторное сохранение с потерями может ухудшать изображение. Лучше возвращаться к исходнику и создавать новую копию с нужными настройками.

Уменьшать качество, но оставлять огромное разрешение

Иногда уменьшение ширины даёт лучший результат, чем сильное снижение качества.

Загружать оригиналы прямо с телефона

Современные камеры создают очень крупные файлы. Перед публикацией их почти всегда стоит подготовить.

Практичный набор настроек для блога

Для обычной заглавной иллюстрации можно попробовать:

Формат: WebP
Максимальный размер: 1600 × 1600
Качество: 82%

После обработки сравните картинку с оригиналом в полном размере. Если разницы не видно, а файл стал заметно легче — задача выполнена.

Итог

Оптимизация изображения — это не максимальное сжатие любой ценой. Хороший результат сохраняет нормальную детализацию и одновременно убирает лишние мегабайты.

Обычно достаточно правильно выбрать формат, уменьшить разрешение до реального размера публикации и не опускать качество слишком резко.