Dimensions of Picture in Chrome Developer Tools

Question

I'm working through Mozilla's tutorial on responsive images . Part of the tutorial explains how you can use the responsive design feature of a browser's developer tools to see the pixel demensions of an embedded image on various display sizes.

It asks students to view their demo page in a browser, and open up the responsive design developer tool. I'm using Chrome and did just that. I then set the screen demensions to 320 X 480 , and inspected the first picture in the body of the page. However, Chrome says the dimensions of the picture are 800 X 464 . How can that be if the screen itself is only 320 X 480 ?

Furthermore I tried it out in Firefox, and Firefox gives 280 X 162.4 .

So:

1. What are the units for all those demensions? I presumed all the dimensions were in pixels, but a fractional pixel doesn't really make sense.
2. Assuming the units are all the same, why is the picture larger than the screen in Chrome, and why does Chrome disagree with Firefox?

Answer 1

In general, mobile browsers use the following strategy to display web sites that were not mobile-optimized: they render them as if the were displayed on a small desktop (ie on a "virtual viewport", usually 800 to 1000 pixels wide), and then scale the result down to fit in the mobile screen. There is a classic article "A tale of two viewports" (particularly, part two ) by Peter Paul Koch that explains it well.

It appears that the Responsice Design mode of the Chrome's devtools assumes that this behavior is happening and the "virtual viewport" is 980 pixels wide. Firefox doesn't do this, making the virtual viewport equal to the actual window size. Setting <meta name="viewport" contents="device-width"> makes all browsers (including real mobile ones) do the latter.

So:

1. The units are CSS pixels before the scaling. Non-integer pixels make sense for calculations, when browsers renders them they get rounded.

2. The picture is larger than the screen because the virtual viewport is scaled down. This can be prevented by setting <meta name="viewport" contents="device-width"> .

Answer 2

Mozilla Firefox developer tools is showing you the size of image which is actually shown where as Google Chrome developer tools is showing the actual image size.

so we can say neither Google Chrome nor Mozilla Firefox is wrong, they are just showing different image size because their designers have chosen to do so.

Answer 3

The downloaded image can be larger than what is displayed in your screen. If a downloaded image is too large for the view space, it shrinks the image to fit.

With Chrome 90, when hovering over an image URL in the Dev Tools Elements inspector, a tool tip will show Rendered size and Intrinsic size . Intrinsic size is the downloaded size.

In Firefox hovering over an image URL in it's Inspector will show the actual image size (downloaded size) under a popup thumbnail of the image, and it will show the rendered size over the image in the page view.

On real mobile devices the rendered size is actually likely to be larger than these browser mobile views indicate. As of writing mobile screen dimensions are commonly 1080 x 1920 pixels or even denser (The Google Pixel 5 has a FHD+ screen (1080 x 2340)). The browser mobile view is likely to indicate the view size is something like 320 x 480 (depending on which device is selected).