CODEWITHSUNDEEP
network-programminggoogle-chrome-devtools
Steve
Steve

Reputation: 4908

Is the "Natural" size the size loaded?

In the thumb image load depicted below, what size image is being loaded from the server, 289 x 162 or 750 x 422? On the actual page the thumb display is 289 x 162, but I suspect that the 750 x 422 image is being loaded and then resized to 289 x 162. Is that correct?

Thanks.

Load description

Upvotes: 2

Views: 535

Answers (1)

Kayce Basques
Kayce Basques

Reputation: 25967

The natural size lists the dimensions of the downloaded file. The other size lists the dimensions of the rendered image.

You can verify this by looking at the Box Model of the element. The Box Model shows you the rendered dimensions of the element, such as width, height, padding, margin, etc. You can confirm that Box Model dimensions show 289 x 162 in this case.

You can also verify by right-clicking the image in the DOM Tree and selecting Open In Sources Panel.

open in sources panel

The dimensions that you see below the preview of the image are the dimensions of the downloaded file (the "natural" dimensions).

natural dimensions in sources panel

FYI there's also an audit in the Audits panel that flags whenever the rendered image is significantly smaller than the downloaded image. The best practice is to send images that generally match the size that they'll be displayed. See Oversized Images.

Upvotes: 3

Related Questions