In many CMS based websites, images uploaded in their own dedicated fields often are setup to render at a fixed or scaled size on different viewports. Inspecting the image in the source code can provide the rendered size and original image size. This helps identify whether an image is being upscaled (resulting in distortions) or downscaled (suggesting performance optimizations can be applied).
To do so:
- Hover and right click over an image on the webpage.
- In the menu of options that appear, click "inspect".
- Then in the html source code that appears in the resulting panel or window, hover the <img> tag.
A preview of the image should appear with both rendered dimensions and actual dimensions as depicted in the screenshot below.
