Назад
2 минуты чтения

Прелоад изображений: не всё так очевидно 🖼

Восемь способов управлять загрузкой изображений: fetchpriority, preload, responsive-картинки и распространённые костыли.

Прелоад изображений: не всё так очевидно 🖼

Наткнулся на хороший разбор про способы сказать браузеру «эта картинка важная».

Коротко по вариантам:

1. Обычный <img />
Браузер сам решает приоритет. Часто — достаточно хорошо.

2. Атрибут loading="lazy"
Откладывает загрузку.
Хорошо для всего, что ниже изначального viewport.
Плохо, если случайно повесить на hero → замедлите LCP.

3. Атрибут fetchpriority="high" (самый практичный вариант)
Даёт явный сигнал приоритета:

<img src="/hero.jpg" fetchpriority="high" alt="" />

👉 В большинстве случаев — лучшее решение для LCP-картинок
Без лишней магии и дублей.

4. Тэг <link rel="preload" as="image"> в <head />
Жёстко форсит раннюю загрузку:

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

Но:

  • легко сделать двойную загрузку
  • можно забить сеть и сломать приоритеты
  • требует аккуратности (типы, imagesrcset, sizes)

👉 Использовать точечно

Для responsive-картинок следует использовать атрибуты rel="preload", imagesrcset и imagesizes.

<link
  rel="preload"
  as="image"
  imagesrcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  imagesizes="100vw"
/>

👉 Иначе браузер может скачать не тот размер

5. Скрытый <img /> или display: none

<div style="display:none">
  <img src="/hero.jpg" alt="" />
</div>

👉 Браузер всё равно начнёт загрузку.
Но это скорее костыль — приоритет будет неочевидный, и читаемость страдает.

6. background-image в CSS

.hero {
  background-image: url("/hero.jpg");
}

👉 Вот тут нюанс:
браузер узнаёт о такой картинке только после парсинга CSS,
поэтому она часто грузится позже, чем <img />.

7. Хаки с background + preload / скрытые элементы
Типа прелоадить background через <link /> или подсовывать невидимый <img />.

👉 Всё это работает, но выглядит как обход ограничений, а не нормальный путь.

8. JS через new Image()

const img = new Image();
img.src = "/hero.jpg";

👉 Старый способ, который хуже дружит с приоритетами браузера.

———

Главный вывод из статьи:

  • способов «заставить» браузер грузить картинку раньше — много
  • но большинство из них — костыли или edge-case решения

👉 Практика:

  • для hero → fetchpriority="high"
  • для background → иногда оправдан preload
  • всё остальное — только если понимаешь последствия

TL;DR:
Не нужно изобретать схемы с hidden div и хаками — в 90% случаев есть более простой и нативный способ.

Читать статью

Скопировано