Почему для загрузки картинки используется fetch, а не создание элемента img

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

Умеете ли вы обосновать выбор инструмента, а не защищать его любой ценой. Сильный ответ начинается с того, что по умолчанию картинку грузят тегом img, а fetch появляется там, где нужно то, чего разметка не умеет.

Как отвечать

Назовите случаи, где fetch действительно нужен:

• заголовки: изображение лежит за приватным API и требует Authorization или собственного заголовка. Тег img заголовки отправлять не умеет;
• байты: нужен Blob или ArrayBuffer, чтобы положить картинку в IndexedDB, отдать в canvas, измерить размер, передать в воркер;
• управление запросом: отмена через AbortController, повтор после сбоя, прогресс загрузки по потоку ответа;
• явная обработка ошибок: fetch отдаёт код ответа, а img только событие ошибки без подробностей, отличить 404 от 403 по нему нельзя.

Обязательно скажите про цену. Загрузка через fetch уводит картинку из обычного конвейера ресурсов: теряются приоритеты загрузки, srcset и sizes, ленивая загрузка атрибутом, предварительное декодирование. Изображение появится позже, чем появилось бы у тега, а полученный адрес вида blob: нужно освобождать через URL.revokeObjectURL, иначе память не вернётся.

Вывод формулируйте так: img для контента страницы, fetch для служебных сценариев, где картинка это данные, а не элемент вёрстки. Связка тоже нормальна: получили Blob, подставили его адрес в img, дальше рисует браузер.

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

Говорят, что fetch асинхронный, а тег блокирует поток. Тег грузит картинку асинхронно и ничего не блокирует, а атрибут loading со значением lazy даёт ленивую загрузку без единой строки скрипта.

Второе: думают, что через fetch получится быстрее. Обычно медленнее: запрос стартует после выполнения скрипта, тогда как ссылку в разметке предзагрузчик находит ещё до построения дерева документа.

Третье: забывают про кэш. Картинка, полученная в Blob и подставленная как временный адрес, не переиспользуется между страницами, и каждый переход тянет её заново, пока вы не настроите заголовки кэширования и не начнёте хранить результат сами.