На телефоне страница уже открылась, а большая фотография ещё загружается. В карточке товара изображение выглядит размытым, хотя исходник весит несколько мегабайт. Эти ситуации показывают, почему оптимизация не заканчивается кнопкой «Сжать». Мы в «Гуси-Лебеди» предлагаем смотреть на всю цепочку: назначение картинки, размеры, формат, загрузку и качество на странице. Расскажем, как подготовить изображения для сайта и проверить результат.
Что входит в оптимизацию изображений
Оптимизация изображений для сайта помогает передавать и показывать нужную картинку с подходящим качеством и без лишних затрат. В работу входят выбор содержания, кадрирование, подготовка размеров, сжатие, настройка загрузки и текстовое описание по назначению.
Разделяйте три характеристики. Размеры в пикселях описывают ширину и высоту изображения. Объём файла показывает, сколько данных нужно передать. Размер блока на странице показывает, какое место картинка занимает в интерфейсе. Большой исходник может отображаться в маленькой карточке, а лёгкий файл может иметь недостаточно деталей для крупного экрана.
Сначала составьте список типов изображений: обложка, фотографии товара, иллюстрации статьи, иконки и декоративный фон. Им нужны разные правила. Не применяйте одно качество и один размер ко всему каталогу только потому, что так удобнее пакетно обработать файлы.
Сохраняйте исходники отдельно от подготовленных версий. Если позже понадобится другое кадрирование или размер, лучше вернуться к исходному материалу, чем многократно пересохранять уже сжатую копию. Для содержания и композиции полезны наши правила оформления сайта.
Как выбрать размеры и кадрирование
Начните с места показа. Уточните ширину блока на компьютере и телефоне, пропорции кадра и необходимость увеличения. Для фотографии товара, которую открывают крупно, может потребоваться отдельная детальная версия. Для небольшой превью-карточки обычно нет смысла передавать полный исходник камеры.
Учитывайте плотность пикселей экрана. Одинаковый размер блока в интерфейсе не всегда означает одинаковые требования к файлу. Вместо одной чрезмерно большой версии можно подготовить несколько вариантов и дать браузеру выбрать подходящий.
Для этого используются атрибуты srcset и sizes: первый задаёт набор файлов, второй помогает описать место изображения в макете. Руководство MDN по отзывчивым изображениям объясняет этот подход. Просто уменьшить картинку средствами CSS недостаточно для уменьшения уже скачанного файла.
Кадрирование проверяйте отдельно. На узком экране важный предмет или подпись могут оказаться за пределами видимой области. Если сюжет требует другого кадра, предусмотрите отдельный вариант, а не только уменьшение. Согласуйте это вместе с поведением адаптивного дизайна.
Нет универсальной ширины и обязательного лимита килобайт для каждой картинки. Задайте ограничения для конкретного типа блока, сравните качество и измерьте загрузку. Условие «все фотографии до одного размера» может испортить детальный каталог и всё равно оставить тяжёлой страницу с большим количеством карточек.
Как выбрать формат и степень сжатия
Выбирайте формат по содержанию и условиям использования. Фотография, схема с тонкими линиями и прозрачная иконка сжимаются по-разному. Свойства и поддержку форматов можно сверять с справочником MDN.
| Формат | Когда рассмотреть | Что проверить |
|---|---|---|
| JPEG | Фотографии без прозрачности | Детали, градиенты и следы сжатия |
| PNG | Прозрачность и точное сохранение растрового содержания | Объём файла в сравнении с альтернативами |
| WebP или AVIF | Подготовленные версии фотографий и иллюстраций | Качество, поддержку и настройку выдачи |
| SVG | Векторные иконки, логотипы и схемы | Сложность файла и отображение в нужных размерах |
Новый формат не гарантирует лучший результат для любого файла. Сравните несколько вариантов на одном исходнике и в реальном размере показа. Для необходимых браузеров можно предусмотреть запасной формат через элемент picture.
Сжатие с потерями уменьшает данные за счёт изменений изображения. Оно может быть приемлемым для фотографии и заметным на мелком тексте или тонких линиях. Сжатие без потерь сохраняет информацию, но не обязано давать самый маленький файл. Не называйте любое визуально незаметное сжатие «без потерь»: это разные понятия.
После обработки проверьте цвет, края предметов, мелкие детали и прозрачность. Лучше выбирать достаточное качество под задачу, чем добиваться минимального объёма любой ценой. Онлайн-сервис, графический редактор или инструмент CMS являются способом подготовки, а качество определяется проверкой полученного файла.
Как настроить загрузку главной и остальных картинок
Главная картинка и изображения далеко ниже первого экрана имеют разный приоритет. Если крупное изображение участвует в формировании LCP, его отложенная загрузка может задержать показ основного содержания. LCP относится к отображению крупнейшего подходящего элемента в видимой области, а не к времени загрузки всех файлов сайта.
В руководстве web.dev по LCP рекомендуется обеспечить раннее обнаружение важного ресурса и не откладывать загрузку изображения LCP через lazy loading. Настройку стоит начинать с определения того, какой элемент действительно становится LCP на нужной странице.
Для картинок ниже видимой области может подойти loading="lazy". Но автоматическое включение этого атрибута для всех изображений требует проверки. Приоритет fetchpriority="high" может помочь важному изображению; назначение высокого приоритета всему набору лишает настройку смысла.
Указывайте корректные пропорции и размеры, чтобы браузер мог резервировать место под изображение. Иначе появление картинки может сдвигать уже видимое содержание. Проверьте, какой файл выбирается на разных экранах, и не скачивается ли исходник вместо подготовленной версии.
Кеширование и CDN могут дополнять подготовку файлов, но не заменяют правильные размеры и порядок загрузки. Поручая настройку загрузки изображений, согласуйте, какие страницы и условия будут измеряться. Не обещайте одинаковое ускорение всем посетителям без данных.
Как заполнить alt и проверить результат
Alt описывает значимую информацию или функцию изображения в контексте страницы. Для фотографии товара это может быть вид предмета, для схемы важна её суть. Не заполняйте атрибут набором поисковых фраз. Изображение-ссылка должно помогать понять назначение перехода.
Для чисто декоративной картинки подходящим решением может быть пустой alt. Для сложной схемы одного короткого описания может не хватить: пояснение размещают и в основном содержании. Эти различия разобраны в руководстве W3C по альтернативному тексту. Alt не заменяет подпись, когда она нужна всем читателям.
| Проверка | Что сравнить | Какой вопрос закрывает |
|---|---|---|
| Качество | Исходник и подготовленный файл в размере показа | Сохранились ли нужные детали? |
| Выдача файла | Картинку, которую браузер фактически загрузил | Используется ли подходящий вариант? |
| Оформление | Кадрирование и положение на разных экранах | Виден ли смысл изображения? |
| Загрузка | Измерения до и после в сопоставимых условиях | Что изменилось на этой странице? |
Не оценивайте результат только по проценту сжатия. На странице должны загрузиться все нужные изображения, сохраниться качество и работать просмотр увеличенной версии. Лабораторное измерение помогает диагностике, но его нельзя выдавать за опыт всех реальных пользователей.
Если нужно найти причину медленной страницы, начните с аудита загрузки и состояния сайта. Мы в Гуси-Лебеди предлагаем связывать оптимизацию с назначением картинки: читатель должен увидеть полезное изображение, а браузер получить подходящий файл в нужный момент.