How to find resized image dimensions on a web page

FireFox used to have a useful image option that has now disappeared :frowning:

When viewing a web page, right clicking on an image used to bring up a drop-down menu showing both the original and resized image dimensions.This was useful in being able to optimally resize images and not waste bandwidth by loading images larger than the displayed image dimensions.

Does anyone know how I can find the resized image dimensions?

Right click and inspect it? Then hover over the element in the Inspector element tree. This would give you the current size on page. Then hover over its image link would give you the images true size. See below…

Then hover over the link src…

This is one way to do it. I am not too sure what the other way was before.

Many thanks, looking forward to trying it when back on the desktop.

I tried it and it is not as good as the previous version because right-clicking and selecting the inspector element used to give a list of all the images on the web page and both the original and resized image dimensions.

It was far easier to find all the image dimensions and now it is tedious.

A negative user experience :frowning:

Some website designers increase image resolution above “optimum”, even double the resolution, because these days it’s so easy for users of mobile devices to zoom in using pinch gestures. This seems to especially make sense for images of products in an online shop.

Are you using the srcset attribute?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.