Атрибут as

Атрибут as указывает тип содержимого, которое загружается через элемент <link>. Используется в сочетании с атрибутом rel со значением preload или modulepreload для определения отношений между внешним ресурсом, на который ссылается <link>, и текущим документом.

Синтаксис

<link rel="preload" as="<тип>">
<link rel="modulepreload" as="<тип>">

Значения

Значение атрибута as К чему применяется
audio К элементам <audio>
document К элементам <iframe>
embed К элементам <embed>
fetch К JavaScript API XMLHttpRequest
font К шрифтам, загружаемым через @font-face
image К элементам <img> с атрибутом srcset
object К элементам <object>
script К элементам <script>
style К элементам <link rel="stylesheet"> и к стилевому правилу @import
track К элементам <track>
video К элементам <video>
worker К интерфейсам Worker и SharedWorker

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>as</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 66 53 17 115
66 115 53 17