Как заранее загрузить и закэшировать изображение

Что проверяют

Различаете ли вы предзагрузку и кэширование: первое решает, когда начать скачивание, второе, сколько хранить результат. Интервьюер хочет услышать про HTTP-кэш, а не только про Service Worker. Следом обычно спрашивают, как ускорить главное изображение первого экрана и чем preload отличается от prefetch.

Как отвечать

Разложите по задачам:

• картинка для текущей страницы: <link rel="preload" as="image" href="..."> в <head> запускает загрузку до того, как браузер дойдёт до тега. Для адаптивных картинок есть imagesrcset и imagesizes, иначе скачается не тот размер. Главной картинке первого экрана добавьте fetchpriority="high" и не ставьте ей loading="lazy";
• картинка, которая понадобится позже: слайдер, ховер, следующий шаг формы. Подойдёт new Image() с присвоением src, файл ляжет в HTTP-кэш. Метод img.decode() возвращает промис и позволяет показать уже декодированное изображение без мигания;
• ресурс следующей страницы: <link rel="prefetch"> качает с низким приоритетом, когда браузер свободен;
• хранение: для файлов с хэшем в имени Cache-Control: public, max-age=31536000, immutable, при смене картинки меняется имя. Для файлов без хэша короткий max-age и ETag, тогда повторная проверка вернёт 304 без тела;
• офлайн и полный контроль: Service Worker с Cache API и стратегией cache-first, на практике обычно через Workbox.

Подчеркните, что предзагрузка работает только поверх кэширования: если сервер отдаёт Cache-Control: no-store, заранее скачанная картинка будет загружена повторно.

Где спотыкаются

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

Предзагружают не тот ресурс. Если preload указывает на JPEG, а <img> через srcset выбирает WebP другого размера, файл скачивается дважды, и браузер пишет в консоль предупреждение о неиспользованной предзагрузке.

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