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

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

Так выглядит типичное отзывчивое изображение:

<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" />

Браузер рассматривает атрибуты srcset и sizes, чтобы определить, какое изображение загрузить. Он учитывает ширину области просмотра, плотность пикселей устройства, атрибут sizes и доступную ширину изображения. Именно этот интеллектуальный процесс выбора делает отзывчивые изображения такими мощными.

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

<link rel="preload" href="medium.jpg" as="image" />

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

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

Современные браузеры поддерживают отзывчивую предварительную загрузку с помощью атрибутов imagesrcset и imagesizes:

<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" />

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

При работе с современными форматами изображений, такими как WebP или 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" />

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

<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>

Проверить настройку отзывчивой предварительной загрузки можно с помощью DevTools браузера и Performance Observer API:

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    if (entry.name.includes('photo')) {
      console.log(`Downloaded: ${entry.name}`);
      console.log(`Size: ${entry.transferSize} bytes`);
      console.log(`Time: ${entry.duration}ms`);
    }
  });
});

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

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

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

Рассмотрите возможность предзагрузки только наиболее важных отзывчивых изображений, как правило, тех, которые размещаются выше сгиба или вносят вклад в Largest Contentful Paint (LCP).

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

Комментарии