Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее.
MIME-тип (Media Type)
MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например:
-
image/png → PNG -
image/jpeg → JPEG -
image/svg+xml → SVG -
image/gif → GIF -
image/webp → WebP Content-Type: image/png
Расширение файла
Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (
.jpg, .png, .gif). <img src="picture.jpg" alt="Картинка">
HTML-теги и атрибуты
Когда браузер встречает в коде такие теги, как
<img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.<img src="image.png" alt="Пример картинки">
Формат и сигнатура файла
Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например:
- PNG-файл всегда начинается с байтов
89 50 4E 47 (что означает "PNG" в ASCII). - JPEG —
FF D8 FF. - GIF —
47 49 46 38 (GIF89a).👉 @frontendInterview