How does the browser determine the resolution of an image before displaying it?

The browser determines the image resolution by analyzing the file's metadata and its actual pixel dimensions. When an image is loaded, the browser reads the file headers (for example, in JPEG, PNG formats) and extracts the width and height in pixels. This data is used to reserve space for the image on the page before it is fully loaded, helping to prevent content shifts.

Additionally, CSS styles and HTML attributes (such as width and height) can influence the displayed size, but the original resolution is determined from the file data. If the image is scaled, the browser adjusts it to the specified dimensions, maintaining or changing the aspect ratio.