Новый Image() с srcset: Уважает ли браузеры адаптивные изображения?

Содержание

Вопрос или проблема
Ответ или решение
Вопрос: Уважает ли браузеры адаптивные изображения с использованием new Image() и srcset?
Как это работает
Поддержка браузерами
Предварительная загрузка изображений
Рекомендации

Вопрос или проблема

Я ищу информацию о том, как различные браузеры обрабатывают srcset, когда он реализован через JavaScript, в частности, с использованием new Image().srcset. Мой основной интерес заключается в понимании того, загружают ли браузеры эффективно только необходимые файлы изображений на основе заданных критериев.

Вот пример кода для примера:

let img = new Image();
img.srcset = "image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w";
img.sizes = "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px";
img.src = "image-800w.jpg"; // Резервный источник

Контекст: Моя цель – предзагрузить изображения, не привязывая их к текущему DOM, при этом гарантируя, что функциональность srcset и адаптивная загрузка на основе размера области просмотра должным образом учитываются.
Я был бы очень признателен за любые сведения или ресурсы по поддержке браузеров и поведению в этом контексте.

Ответ или решение

Вопрос: Уважает ли браузеры адаптивные изображения с использованием `new Image()` и `srcset`?

Да, большинство современных браузеров поддерживают механизм адаптивной загрузки изображений через атрибут srcset, даже когда изображения создаются с помощью JavaScript, как в вашем примере с использованием new Image().

Как это работает

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

Ваш пример кода выглядит следующим образом:

let img = new Image();
img.srcset = "image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w";
img.sizes = "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px";
img.src = "image-800w.jpg"; // Запасной источник

Таким образом, браузер должен будет:

Изучить размеры на основе sizes и определять, какое изображение загружать в зависимости от ширины окна.
Загружать лишь одно изображение из набора, которое будет соответствовать правилам, заданным через srcset и sizes, тем самым оптимизируя использование полосы пропускания.

Поддержка браузерами

На данный момент, такие основные браузеры, как Google Chrome, Mozilla Firefox, Safari и Microsoft Edge, полностью поддерживают загрузку изображений через srcset, установленные через JavaScript. Однако стоит учитывать следующие моменты:

Поддержка может варьироваться в зависимости от версии браузера, поэтому рекомендуется проверять наиболее актуальные данные о совместимости на таких ресурсах, как Can I use.
Некоторые старые браузеры могут игнорировать srcset, и именно поэтому вы добавили запасной источник с поведением img.src, что является хорошей практикой.

Предварительная загрузка изображений

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