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

«В чем разница между получением браузером JSON от API и картинки» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

JSON и картинки обрабатываются браузером по-разному:

  1. JSON:
    • Получается как текст, парсится в JS-объект через JSON.parse()
    • Можно сразу использовать в коде
    • Пример обработки:
fetch('/api/data')
  .then(res => res.json()) // автоматический парсинг
  .then(data => console.log(data))
  1. Картинки:
    • Бинарные данные, обрабатываются графическим движком
    • Отображаются через <img> или canvas
    • Пример загрузки:
const img = new Image()
img.src = '/image.png'
document.body.appendChild(img)

Ключевые отличия:

  • JSON требует парсинга, картинки - декодирования
  • JSON используется для данных, картинки - для отображения
  • Разные MIME-типы (application/json vs image/*)