В чем разница между получением браузером JSON от API и картинки?

При получении от API JSON и картинки различаются формат данных и обработка: JSON — текст, парсится в объект (`res.json()`), картинка — бинарные данные (blob), используется как ресурс (URL/img).

Получение JSON

Сервер отдаёт текст с Content-Type: application/json; парсим в объект:

const res = await fetch('/api/user');
const data = await res.json(); // текст → JS-объект
console.log(data.name);

• Данные текстовые (сериализованный объект).
• Обрабатываются как структура данных.

Получение картинки

Сервер отдаёт бинарные данные с Content-Type: image/png и т.п.; читаем как blob/arrayBuffer:

const res = await fetch('/image.png');
const blob = await res.blob();          // бинарные данные
const url = URL.createObjectURL(blob);  // ссылка на объект
img.src = url;                          // используем как ресурс

• Данные бинарные.
• Используются как медиа-ресурс (в <img>, canvas).

Различия

• Формат: JSON — текст; картинка — бинарные данные.
• Метод чтения: res.json() (текст→объект) vs res.blob()/arrayBuffer() (бинарные).
• Использование: JSON — как данные; картинка — как ресурс (URL, <img>).
• Content-Type: application/json vs image/*.

Обычно картинки не грузят через fetch

Чаще картинку просто указывают в <img src> — браузер сам загрузит. Fetch для картинки нужен при особой обработке (кеш, blob, авторизация).

Коротко для собеседования

JSON от API — текст, парсится в объект (res.json()), используется как данные. Картинка — бинарные данные, читается как res.blob(), превращается в URL (createObjectURL) для <img>. Различие: формат (текст vs бинарный), метод чтения и использование (данные vs ресурс). Обычно картинки грузят через <img src>, а не fetch.