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

Сначала подгоните изображение под ширину блока, затем сожмите. Для фото подойдут JPEG или WebP, для графики с прозрачностью — PNG или WebP. Для крупных фото можно выбрать AVIF и добавить запасной формат. Исходник с камеры часто намного шире макета, поэтому перед публикацией проверьте и размер файла, и вид картинки в блоке.

Как сжать картинку и не получить мыло

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

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

Посмотрите в макете ширину блока на самом широком экране. Для экранов с высокой плотностью пикселей подготовьте изображение большего размера и настройте подходящий вариант через srcset. После ресайза подберите степень сжатия.

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

Для фото допустима потеря данных, которую не видно на странице. Для схем, скриншотов и картинок с текстом выбирайте сжатие без потерь: артефакты в них заметнее.

Универсального веса для всех изображений нет. Проверяйте картинку на целевом экране и на мобильном устройстве.

Сначала ресайз под макет, потом сжатие. Формат сам по себе не исправит слишком широкое изображение.

Зачем уменьшать вес картинок на странице

Большие изображения могут задерживать загрузку страницы, особенно если крупным файлом служит главный визуальный элемент первого экрана. А ещё они расходуют мобильный трафик и место в хранилище. Чтобы понять, влияет ли картинка на скорость, проверьте отчёт Core Web Vitals и сетевую панель браузера.

Документация Google описывает LCP как метрику отрисовки крупнейшего видимого элемента. Если таким элементом служит изображение, его загрузка входит в измерение.

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

JPEG, PNG, WebP, AVIF и SVG

Выбирайте формат по содержимому картинки. Фото и градиенты обычно подходят для JPEG или WebP, графика с прозрачностью — для PNG или WebP, а иконки и логотипы — для SVG.

WebP поддерживает сжатие с потерями и без потерь, а также прозрачность и анимацию. Для AVIF проверьте поддержку в целевых браузерах и добавьте запасной формат, например WebP или JPEG.

Если на сайте только схемы и иконки, конвертировать их в AVIF не нужно. Для векторной графики используйте SVG, а для растровой — формат, который сохраняет нужные детали.

Для короткой простой анимации можно оставить GIF. Для длинного баннера рассмотрите видео или анимированный WebP: сравните вес и качество на странице. Перед публикацией проверьте поддержку формата в браузерах, которыми пользуется ваша аудитория.

Сжатие с потерями и без потерь

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

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

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

Формат PNG8 с ограниченной палитрой подойдёт плоской графике с небольшим количеством цветов. На фото и плавных переходах палитра может дать заметные ступени.

«Без потери качества» означает, что при сжатии без потерь сохраняются данные изображения. Сжатие с потерями может изменить изображение.

Для фото витрины обычно достаточно сжатия с потерями после проверки в макете. Если важны текст и тонкие линии, выбирайте сжатие без потерь.

Онлайн-сервисы: когда хватает браузера

Онлайн-компрессор подойдёт для нескольких файлов и разовой проверки. Для каталога и регулярных релизов удобнее зафиксировать настройки в сборке или CMS: так команда сможет повторять один и тот же процесс.

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

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

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

Пайплайн на сервере, CLI и CDN

Для разовой задачи хватит браузера, а для регулярной обработки задайте единый процесс в сборке, CMS или CDN. Для сборки можно использовать Squoosh CLI, cwebp, imagemin или Sharp. На готовом сайте без сборки ищите подходящий инструмент в CMS.

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

Плагин WordPress подойдёт сайту без сборки. Перед включением проверьте его совместимость с CDN и настройки автоматического сжатия: повторная обработка уже сжатого JPEG может ухудшить изображение.

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

Для каждого релиза проверяйте исходник, результат обработки и версию, которую получает браузер. Для этого используйте сетевую панель и проверьте, что CDN отдаёт файл из кэша.

Ресайз под макет, ретина и srcset

Подготовьте версии изображения для разных размеров блока и экранов. Атрибут srcset позволяет браузеру выбрать подходящий файл, а sizes описывает ширину изображения в макете.

В элементе picture можно указать AVIF или WebP, а следом добавить JPEG как запасной вариант. В sizes задавайте реальную ширину блока: значение 100vw подходит только тогда, когда изображение занимает всю ширину окна. На адаптивном сайте каждому экрану нужен подходящий размер изображения.

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

Для изображения первого экрана укажите ширину и высоту, чтобы зарезервировать место в макете до загрузки. Если на телефоне нужен другой кадр, задайте отдельную версию для мобильного экрана.

Когда на странице нет изображений для разных размеров, srcset не решит проблему скорости. Начните с ресайза и сжатия файла под фактическую ширину блока.

Чек-лист до выкладки: что жать и что не трогать

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

После ресайза под макет проверьте фото товаров, баннеры, фон первого экрана и обложки Open Graph. Для изображений с ненужными геоданными настройте обработку метаданных в компрессоре или сборке. Это особенно полезно для пользовательских и стоковых фотографий.

Не сжимайте повторно файлы, которые уже прошли пайплайн или обработку CDN. SVG, фавиконки и спрайты проверяйте отдельно: растровые настройки могут повредить их содержимое или отображение.

На приёмке проверьте вес файла, правильность вариантов srcset и то, какую версию изображения отдаёт CDN. На сайте-каталоге с карточками товаров подготовьте размеры файлов под макет, чтобы изображения не грузились шире необходимого.

Если собираете витрину с нуля, сначала решите, какой сайт нужен бизнесу в Новороссийске, а затем настройте изображения под макет.

Частые ошибки, из-за которых картинки всё равно тяжёлые

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

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

Для длинной анимации сравните GIF, WebP и видео по весу и внешнему виду. А перед релизом проверьте загрузку изображения первого экрана в сетевой панели браузера: так проще понять, какую версию получает посетитель.

Если нужно собрать пресет изображений под макет, оставьте заявку — разберём процесс обработки для вашего сайта.

Источники

• Largest Contentful Paint (LCP) — web.dev, Google: описывает, что измеряет LCP и как определить крупнейший элемент области просмотра.
• Элемент picture — MDN: описывает выбор браузером одного из источников изображения и резервного варианта.
• Формат изображений WebP — Google Developers: описывает поддержку WebP, сжатие с потерями и без потерь, прозрачность и анимацию.