Чек-лист веб-дизайнера: оптимизация изображений для сайта без потери качества

Шаг 1. Подберите правильный формат

Для фотографий и сложных изображений с градиентами лучший выбор — современные форматы AVIF или WebP: они весят на 30–50% меньше JPG при сравнимом качестве. Для простой графики с плоскими цветами (иконки, логотипы) больше подходит PNG. Перевести уже готовые файлы в нужный формат можно через «AVIF конвертер» или конвертацию из JPG в WebP.

Разница особенно заметна на изображениях с большим количеством плавных цветовых переходов — закатах, тенях, размытом фоне: именно там AVIF и WebP экономят больше всего веса по сравнению с JPG.

Шаг 2. Задайте точный размер под макет

Не отдавайте браузеру изображение 4000×3000px, если на странице оно отображается в блоке 800×600 — лишние пиксели просто увеличивают вес файла без пользы. «Изменить размер» позволяет задать точную ширину и высоту под конкретный блок вёрстки, сохраняя пропорции.

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

Шаг 3. Сожмите с разумным качеством

После подбора формата и размера остаётся сжатие: «Сжать изображение» с настройками качества 70–85% обычно даёт незаметную человеческому глазу потерю детализации при существенном снижении веса файла. Проверяйте результат визуально перед публикацией — для фото с большим количеством мелких деталей иногда стоит поднять качество на 5–10%.

Полезное правило: если разница между 70% и 85% качества незаметна на глаз при обычном просмотре страницы, выбирайте более низкое значение — экономия в весе файла ощутимо снижает время загрузки для пользователей на медленном мобильном интернете.

Шаг 4. Уберите лишнее с помощью обрезки

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

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

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

AVIF и WebP поддерживаются всеми современными браузерами, но если аудитория сайта может использовать устаревшие версии, стоит подготовить запасной JPG через тег <picture> с несколькими источниками — браузер сам выберет поддерживаемый им формат.

Тег <picture> также пригодится, если часть аудитории сайта заходит через встроенные браузеры мессенджеров или очень старые версии системных веб-компонентов, которые не всегда поддерживают новейшие форматы, несмотря на актуальную версию основного браузера на устройстве.

Шаг 6. Не забудьте про фото товаров и скриншоты интерфейса

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

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

Шаг 7. Проверьте, как изображения ведут себя при загрузке

Даже оптимизированные изображения какое-то время грузятся — особенно на мобильном интернете. Задайте атрибуты width и height у тега <img>, чтобы браузер сразу зарезервировал место под картинку и не сдвигал соседний текст после её загрузки — это напрямую влияет на метрику смещения макета (CLS) в отчётах об эффективности страницы. Отложенная загрузка изображений ниже первого экрана дополнительно ускоряет восприятие загрузки страницы.

Шаг 8. Проверьте эффект инструментами анализа скорости

После публикации стоит прогнать страницу через Google PageSpeed Insights или аналогичный инструмент — отчёт точно покажет, какие именно изображения сильнее всего влияют на скорость загрузки, и стоит ли возвращаться к чек-листу для конкретного файла. Это также помогает заметить изображения, которые случайно забыли оптимизировать при очередном обновлении контента страницы, — такое встречается чаще, чем кажется, особенно на сайтах с частыми обновлениями каталога.