How do browsers render images?

Question

Although it sounds a simple question I have been thinking about this.

How exactly do browsers render images? For an example of what I mean, lets say I have a 1MB image that is 3000px x 1500px. I then decide to put this image into a container that is the set to width:100%; meaning that it will scale down reponsively. Will the browser load the entire 1MB and then proceed to scale the image down to fit the container or will it scale it down and then proceed to load it?

I'm asking because this is pretty much my situation and if it does the former (load the 1mb first) then I guess I would have to serve a seperate image on mobile devices?

Thanks

Edit: Since people are saying that it'll load the 1mb image first, how would you suggest I serve a large image to the user? Scale it down for mobile and have a mobile/desktop version?

Answer 1

The CSS is applied after the image is fully loaded. So in short it would to load the 1MB image first and then apply the dimensions. Also images are stored at Server side. I found a very useful image which describes this:-

On a side note:

Browsers often render the same page multiple times in a very short period of time, specially after reading image metadata.

Answer 2

The browser (obviously) cannot scale (or do anything) with an image before loading it.

Answer 3

The image is retrieved first via a HTTP request e.g.

GET /images/myimage.png

and then scalings/transformations are applied. So if you want different images for different platforms then you should request as such.