How does the browser determine that a file is an image?

The browser determines the file type, including images, primarily based on the information provided by the server in the HTTP response headers, specifically the Content-Type header.

When requesting a file (for example, an image), the server sends it to the browser along with HTTP headers. The Content-Type header contains the MIME type of the file, for example:

• image/jpeg for JPEG images
• image/png for PNG images
• image/gif for GIF images
• image/svg+xml for SVG images

The browser reads this header before processing the response body. Based on the Content-Type value, the browser understands how to interpret the received data. If Content-Type indicates an image type (for example, starting with image/), the browser understands that it should process the data as an image and display it accordingly.

In case of missing or incorrect Content-Type header, the browser may try to determine the file type by its extension (.jpg, .png, .gif) or by magic numbers (the first bytes of the file that are characteristic of a specific format). However, Content-Type is the most reliable and prioritized way to determine the data type.

Example of an HTTP response header for an image:

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

...response body (binary image data)...

In this example, the browser sees Content-Type: image/jpeg and understands that the subsequent bytes constitute a JPEG image.