Атрибут imagesizes

Атрибут imagesizes устанавливает размеры предварительно загружаемого изображения. Значение imagesizes соответствует значению атрибута sizes элемента <img>.

Работает только для элемента <link>, у которого значение атрибута rel установлено как preload, а значение атрибута as установлено как image.

<link rel="preload" as="image">

Синтаксис

[ <размер исходника># , ]? <значение размера исходника>
  <медиа-запрос> <значение размера исходника>
  <размер>

<значение размера исходника> не допускает проценты, используйте только единицы vw.

Значение по умолчанию

Нет.

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>imagesizes</title>
  <link rel="preload" as="image" 
   href="image/mushroom.jpg"
   imagesrcset="image/mushroom.jpg 600w, image/mushroom_retina.jpg 1200w" 
   imagesizes="100vw">
  <style>
   body {
    margin: 0; /* Убираем поля */
   }
   img {
    max-width: 100%; /* Максимальная ширина изображений */
   }
  </style>
 </head>
 <body>
  <img src="image/mushroom.jpg" alt="Сыроежка" 
   srcset="image/mushroom.jpg 600w, image/mushroom_retina.jpg 1200w"
   sizes="100vw">
 </body>
</html>

Браузеры

79 73 60 17.2 78
73 79 52 17.2