How does CSS resize images?

Question

Let's say I have a 1240x720 image and I resize it to 1240x250 with CSS using heightand width. I access my site and download it, but do I download the original (1240x720), which then changes in my browser or an already modified version (1240x250)?

From googling I can find posts in which people explain how to use them, so this can be a very stupid question, as it is not even mentioned anywhere.

Answer 1

The browser will download everything that the URL points to.

<img> , , .

Answer 2

, @Quentin !

: @Quentin - 99,999999% . :

Chrome 46 (, , Firefox Edge), -, Client Hints. :

• src, /image.jpg.
• , ( "DPR" ) .

• HTTP-:

  GET /image.jpg HTTP/1.1
  DPR: 1.0
  Width: 100
  

• , . , .

, 200x200 CSS 100x80. CDN/proxy, CloudFlare, , . 200x200 , 100x100, 100x80 ( , Height).

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

Answer 3

, 200x200, 100x80 CSS. , , .. 200x200.

, :

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">

, !

Answer 4

No silly questions. This is very normal for me. If you use one image on your website and change the size each time, the browser will download the original image and then resize it. You do not change the initial sizes, you just edit the temporary file.