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

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

HTTP запрос — одинаковый процесс

В обоих случаях браузер отправляет HTTP GET запрос к серверу, получает ответ с кодом статуса (200, 404 и т.д.) и данными. Различие в том, как браузер обрабатывает полученные данные.

Content-Type заголовок

Всё начинается с заголовка Content-Type, который сервер отправляет в ответе:

// Для JSON
GET /api/users HTTP/1.1

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 256

{"id": 1, "name": "John", "email": "john@example.com"}

// Для картинки
GET /images/avatar.jpg HTTP/1.1

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 45000

[бинарные данные картинки]

Как браузер обрабатывает JSON

JavaScript парсит текст в объект:

fetch('/api/users')
  .then(response => response.json()) // Парсит текстовый JSON в объект
  .then(data => {
    console.log(data.name); // "John"
  });

Браузер:

1. Получает текстовые данные (просто строка)
2. response.json() вызывает JSON.parse() — преобразует строку в JavaScript объект
3. Код может работать с объектом

Как браузер обрабатывает картинку

Изображение обрабатывается как бинарные данные:

fetch('/images/avatar.jpg')
  .then(response => response.blob()) // Получить как бинарные данные
  .then(blob => {
    // Blob — контейнер для бинарных данных
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  });

Браузер:

1. Получает бинарные данные
2. Определяет формат по Content-Type: image/jpeg
3. Декодирует бинарные данные в пиксели
4. Отображает пиксели на экране

Главное отличие

Детальный процесс

Для JSON:

1. HTTP GET запрос
2. Получение тело ответа как строка
3. JSON.parse(string) — парсинг
4. Результат — JavaScript объект
5. Код работает с объектом

Для картинки через src:

1. HTML: <img src="/image.jpg" />
2. Браузер автоматически отправляет HTTP GET
3. Получение тела ответа как бинарные данные
4. Декодирование (JPEG/PNG декодер)
5. Рендеринг пиксели на Canvas

Для картинки через fetch:

1. fetch('/image.jpg')
2. HTTP GET запрос
3. response.blob() — получить как Blob
4. Создать URL: URL.createObjectURL(blob)
5. Использовать как src для img

Типы данных в браузере

// JSON — это текст, парсится в объект
const json = '{"name": "John"}'; // строка
const obj = JSON.parse(json); // объект
obj.name; // "John"

// Картинка — это Blob (бинарные данные)
const blob = new Blob([binaryData], { type: 'image/jpeg' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.src = url; // браузер декодирует JPEG

Ошибки парсинга

// Ошибка: попытка парсить картинку как JSON
fetch('/image.jpg')
  .then(r => r.json()) // ОШИБКА: недействительный JSON
  .catch(err => console.error(err));

// Правильно:
fetch('/image.jpg')
  .then(r => r.blob()) // Получить как бинарные данные

Кэширование

JSON:

• Обычно не кэшируется (Cache-Control: no-cache)
• Часто требует проверки свежести

Картинки:

• Обычно кэшируются (Cache-Control: max-age=31536000)
• Браузер хранит в памяти и диске
• Помогает снизить трафик

Размер и производительность

// JSON обычно меньше, но требует парсинга
const json = '{"users": [{"id": 1, "name": "John"}]}'; // < 1KB

// Картинка больше, но уже оптимизирована
// avatar.jpg: 50KB (уже сжато)
// Браузер просто декодирует и показывает

Вывод: браузер получает оба типа данных одинаково (HTTP), но обрабатывает по-разному: JSON парсится в объект, картинка декодируется в пиксели.