How does CSS resize images?

Question

Let's say I have a image that's 1240x720 and I resize it to 1240x250 with CSS using height and width. I access my site and have to download it but, do I download the original one (1240x720) that then is resized on my browser or the already resized version (1240x250)?

From googling I can only find posts where people explain how to use it so this might be a really dumb question as it's not even mentioned anywhere..

Images are always downloaded having their native width and heights. Then browsers modify their appearance on screen if some styles are applied on them. — Mohammad Usman, Dec 16 '16 at 13:16
it only displays them with modified sizes. The file size and dimensions are still the same. — , Dec 16 '16 at 13:17

score 5 · Accepted Answer · answered Dec 16 '16 at 13:17

5

The browser will download whatever the URL points to.

If the height and width of the <img> don't match the dimensions of the image, it will be scaled to fit.

answered Dec 16 '16 at 13:17

Quentin

914,110
126
1,211
1,335

So, if I'm using the same one with different dimension for three different pages on my site, I should be resizing every one of them before and having three different files, right? – sysfiend Dec 16 '16 at 13:25
2

Maybe. That does mean having to download three versions of the same image instead of being able to download it once and cache it. – Quentin Dec 16 '16 at 13:26

Boldewyn · Answer 2 · 2016-12-16T13:55:56.377

O good ol' days where @Quentin's answer was the single truth!

One thing first: @Quentin's answer is still valid for basically 99.999999% of all image requests. But:

Since Chrome 46 (and soonishly in Firefox and Edge) there is something called Client Hints. It works like this:

The browser encounters an image element with src pointing to /image.jpg.
It determines, at which width and resolution ("DPR") the image should be displayed.
It adds these values as additional HTTP headers:
```
GET /image.jpg HTTP/1.1
DPR: 1.0
Width: 100
```
The server is now free to react to these hints, e.g. send a pre-processed image over the wire, that is just the right size as requested by the browser.

This means, in the context of your answer, that you could have a 200x200 image on your server, and resize it with CSS to 100x80. A CDN/proxy like CloudFlare, that you put in front of your website, then enables client hints and resizes your images on the fly. You have 200x200 on the server, but the client gets 100x100, resized to 100x80 (note, that there's no Height header in the client hints).

           100px              100px
browser -----------> proxy -------------> server ¯\_(ツ)_/¯
                                            |
                                            | 200px
                                            |
          100px                   200px     v
browser <------- proxy resizes <--------- proxy

Saurav Rastogi · Answer 3 · 2016-12-16T13:32:16.710

Say if the actual image size is 200x200, and you resize it to 100x80 using CSS. If you save that image the browser will download actual image i.e. 200x200.

Just for your reference, look at the below example & try it yourself:

img {
  width: 100px;
  height: 80px;
}

The actual height of below image is <strong><code>200x200</code></strong>.
<br><br>
Currently it is resized to <strong><code>100x80</code></strong> using CSS.
<br><br>
Try downloading it using right click, it will download to the actual size i.e. <strong><code>200x200</code></strong>
<br><br>
<img src="http://placehold.it/200x200">

Hope this helps!

score -1 · Answer 4 · answered Dec 16 '16 at 13:27

There are no stupid questions. For me it is very normal. If you using one image in your website and you resizing every time, the browser will load original image and then only will resize. You not changing original dimensions, you just editing temporary that file.

How does CSS resize images?

4 Answers4