Как браузер поймет что видит картинку

Браузер определяет тип контента по заголовку Content-Type в HTTP-ответе. Например, Content-Type: image/jpeg говорит, что это JPEG-изображение. Также анализируются первые байты файла (сигнатура). Например:

• FF D8 FF – начало JPEG
• 89 50 4E 47 – PNG
• 47 49 46 38 – GIF

Пример проверки в JS:

const isImage = (buffer) => {
  const signatures = {
    jpg: [0xFF, 0xD8, 0xFF],
    png: [0x89, 0x50, 0x4E, 0x47],
  };
  // Проверяем сигнатуры
  return Object.entries(signatures).some(([type, sig]) => 
    sig.every((byte, i) => buffer[i] === byte)
  );
};