Предзагрузка отзывчивых изображений

Принципы отзывчивых изображений и методы их предзагрузки изначально противоречат друг другу. Отзывчивые изображения делегируют браузеру интеллектуальный выбор подходящего ресурса. Браузер анализирует характеристики устройства: ширину области просмотра, плотность пикселей и заданные в атрибутах условия. Предзагрузка же, реализуемая через атрибут href в элементе <link rel="preload">, по своей сути требует раннего и часто однозначного указания на конкретный файл. Если применить обычную предзагрузку к отзывчивому изображению, браузер окажется в противоречии: с одной стороны, инструкция загрузить конкретный файл, с другой — логика выбора оптимального варианта. В итоге это может привести к загрузке неоптимального изображения, напрасному расходованию трафика и снижению производительности. Решением становится отзывчивая предзагрузка, которая позволяет этим технологиям работать согласованно.

Типичная разметка отзывчивого изображения использует атрибуты srcset и sizes:

<img
  srcset="small.jpg 300w,
          medium.jpg 600w,
          large.jpg 900w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         900px"
  src="medium.jpg"
  alt="A responsive image" />

Браузер анализирует эти параметры и самостоятельно выбирает оптимальный вариант. Однако если мы попытаемся заранее загрузить такое изображение стандартным способом, классическая предзагрузка через <link rel="preload" href="medium.jpg" as="image" /> лишает его этой возможности, навязывая конкретный файл и нарушая логику отзывчивости.

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

Современные браузеры поддерживают корректную предзагрузку отзывчивых изображений с помощью атрибутов imagesrcset и imagesizes в элементе <link>. Этот подход даёт браузеру полные данные для выбора оптимального варианта уже на этапе предзагрузки.

<link
  rel="preload"
  as="image"
  href="medium.jpg"
  imagesrcset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  imagesizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              900px" />

Расширенные сценарии

При работе с современными форматами изображений, такими как AVIF или WebP, необходимо учитывать поддержку браузерами. Атрибут type со значением image/avif указывает браузеру на формат ресурса. Браузеры, которые не поддерживают AVIF, проигнорируют эту ссылку предзагрузки, предотвращая бесполезную загрузку.

<link
  rel="preload"
  as="image"
  href="photo.avif"
  imagesrcset="photo-300.avif 300w,
               photo-600.avif 600w,
               photo-900.avif 900w"
  imagesizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              900px"
  type="image/avif" />

Эта логика полностью соответствует подходу, используемому в элементе <picture>. Это значит, что для эффективной предзагрузки изображения, описанного в <picture>, достаточно взять параметры из первого (самого приоритетного) тега <source> и использовать их в <link> с атрибутами imagesrcset и imagesizes.

<picture>
  <source
    type="image/avif"
    srcset="photo-300.avif 300w,
            photo-600.avif 600w,
            photo-900.avif 900w"
    sizes="(max-width: 768px) 100vw,
           (max-width: 1200px) 50vw,
           900px" />
  <img
    src="photo-600.jpg"
    alt="Photo" />
</picture>

Проверка и отладка

Для проверки эффективности и корректности стратегии предзагрузки (загружается ли тот вариант, который мы ожидаем для данного типа устройства?) используйте Performance Observer API в связке с инструментами разработчика браузера. Это позволяет отслеживать, какие именно ресурсы загружаются, их размер и время. Сравнив фактические данные загрузки с ожидаемыми на основе медиа-запросов, можно убедиться, что отзывчивая предзагрузка работает правильно, или выявить ошибки в настройке атрибутов imagesizes.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name.includes('photo')) {
      console.log(`Загружено: ${entry.name}, Размер: ${entry.encodedBodySize} байт, Время: ${entry.duration}мс`);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });

Если для мобильного устройства (ширина 375px) в логах видна загрузка photo-900.avif вместо ожидаемого photo-300.avif, это сигнал перепроверить условия в атрибуте imagesizes.

Стратегия применения: баланс и критерии

Оптимизация производительности — это поиск баланса. Отзывчивая предзагрузка является мощным инструментом для ускорения загрузки ключевого контента, такого как изображения в области первого экрана (above the fold) или элементы, являющиеся кандидатами в Largest Contentful Paint (LCP) — например, крупнейшее изображение или текстовый блок в области просмотра. Однако её следует применять избирательно, чтобы не перегружать сетевой канал запросами низкого приоритета. Принимая решение о предзагрузке, задайте себе три вопроса:

1. Критично ли это изображение для LCP или первого впечатления?
2. Достаточно ли стабилен его путь и набор источников?
3. Не конфликтует ли его загрузка с другими приоритетными ресурсами?

Краткая памятка:

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