1. Классифицируйте изображение до оптимизации
Проведите инвентаризацию изображений по шаблону. Зафиксируйте роль каждого изображения, наибольшую и наименьшую ширину при рендере, статус исходного вьюпорта и нужно ли для маленьких экранов другое кадрирование. Это превращает задачу уменьшения размера файлов в ряд решений, которые можно тестировать на важных страницах.
Фотографии часто терпят продуманное lossy-сжатие. Логотипы, интерфейсные символы, векторная графика и диаграммы могут подходить для SVG или растрового формата, который сохраняет резкие контуры. SVG хорошо подходит для линейной графики, схем и диаграмм, но не для детализированных фотографий.
Сохраняйте существенные детали и предоставляйте текст, который передаёт назначение изображения.
Используйте пустой альтернативный текст; не делайте изображение единственным источником важной информации.
Указывайте действие или назначение, а не просто пиксели изображения.
2. Подгоняйте размер под слот рендера, затем предлагайте адаптивные кандидаты
Совмещайте внутренние (intrinsic) размеры с CSS-слотом. Файл в десктопном масштабе в узкой карточке тратит лишний трафик; маленький растр, растянутый слишком сильно, становится размытым. Учитывайте device pixel ratio, но верифицируйте визуально, а не считайте, что каждый экран нуждается в самом большом кандидате.
Если у композиции есть несколько ширин, используйте дескрипторы ширины в srcset и параметр sizes, чтобы указать реальную ширину слота. Тогда браузер выберет подходящий кандидат. Используйте picture для art direction: кадрирование для небольшого экрана, сохраняющее субъект, отличается от простого уменьшения десктопного изображения. Внутри picture оставляйте img с запасным src и alt.
Та же композиция, разные пиксельные размеры.
Разное кадрирование или композиция, когда масштабирование скрывает смысл.
Сохраняйте src на img для клиентов, которые не используют адаптивные атрибуты.
3. Выбирайте формат и сжатие по характеристикам изображения
WebP и AVIF могут уменьшать объём растровых данных в подходящих случаях, но формат сам по себе не гарантирует качество. Тестируйте репрезентативные портреты, тонкую текстуру, фирменные градиенты, встроенный текст и прозрачность. JPEG остаётся распространённым запасным вариантом для фото; PNG может подойти для безпотерьного растрового качества или прозрачности. Проверьте поддержку AVIF и практическую совместимость с вашей аудиторией и стеком доставки.
Lossy-сжатие удаляет информацию ради экономии байтов и обычно более прощает детализированные фотографии, чем резкие контуры или текст. Lossless сохраняет кодированные пиксели, но может дать меньшую экономию. Выбирайте качество по сравнению «рядом друг с другом» на рендерной величине, а не по числовому параметру. Удаляйте метаданные только после подтверждения ориентации, цветового профиля и потребностей рабочего процесса.
Сравнивайте lossy AVIF, WebP и JPEG как запасной вариант на размере показа.
Предпочитайте подходящий SVG или защищайте резкие растровые контуры через тестирование.
Подтвердите внешний вид альфа-канала во всех доставляемых форматах и запасных вариантах.
4. Сделайте разметку, которая защищает скорость и стабильность макета
Указывайте для каждого контентного img атрибуты width и height, соответствующие его внутреннему соотношению сторон. Браузер сможет зарезервировать место до прихода ресурса, уменьшая движение макета. CSS при этом всё ещё может задавать видимые размеры.
Используйте loading=lazy только для изображений вне исходного вьюпорта. Не лениво загружайте изображение, которое, вероятно, видно при загрузке, особенно кандидата на Largest Contentful Paint (LCP). fetchpriority=high — лишь относительная подсказка; применяйте её экономно и измеряйте результат. Для контентного изображения используйте HTML-разметку, если нужен альтернативный текст или обнаружение изображения; Google документирует, что CSS-изображения не индексируются так же.
Устанавливайте width и height, включая лениво загружаемые изображения галерей.
Держите вероятные LCP-изображения eager и контролируйте приоритет запросов.
Лениво загружайте оффскрин-изображения и протестируйте прокрутку в условиях ограниченной сети.
5. Сохраняйте смысл, обнаружимость и визуальное качество
Альтернативный текст зависит от цели и контекста. Описывайте существенную информацию для информативного изображения, используйте alt="" для декорации и указывайте функцию связанного элемента или кнопки, а не только картинку. Для сложной диаграммы или графика предоставьте эквивалентное объяснение в соседнем тексте. Не используйте списки ключевых слов.
Для обнаруживаемых контентных изображений используйте стандартные HTML-элементы img, релевантный соседний текст, короткие описательные имена файлов где это практично и запасной источник с адаптивной разметкой. Не превращайте декоративные фоновые изображения в избыточный контент только ради обнаружения.
Просматривайте сжатые файлы на наибольшем и наименьшем предполагаемом размерах.
По возможности используйте обычный текст; иначе предоставьте эквивалентное текстовое содержимое.
Размещайте информативные изображения рядом с релевантным текстом страницы.
6. Проверяйте страницу, а не только ресурс
Тестируйте репрезентативные страницы при узких и широких вьюпортах. В инструментах разработчика браузера проверяйте выбранный srcset-кандидат, объём передачи, рендерные размеры и движение макета. Ограничьте сеть, чтобы выявить поздние героические изображения и медленные галереи. Сравнение экспортов не покажет неточного значения sizes, неожиданного кропа или проблемы производственной трансформации.
Используйте лабораторные и полевые сигналы, когда они доступны. Lighthouse и PageSpeed Insights могут выявлять неправильно подобранные изображения; полевое LCP отражает реальные визиты со временем. Сравнивайте одинаковый шаблон, класс устройства, версию релиза и окно измерения. Не приписывайте изменения метрик исключительно изображениям, если одновременно изменились серверное время, скрипты, шрифты или сторонние сервисы. Внедряйте изменения в общих шаблонах поэтапно и сохраняйте путь отката до подтверждения.
Подтвердите, что слот не выбирает неожиданно слишком большой кандидат.
Проверьте кроп, резкость, цвет, альтернативы и стабильность макета.
Назначьте владельца, ожидаемый сигнал и путь отката.