Insights.

Images play an essential role on your website, and so do their dimensions. Appropriately sized images keep your website looking sharp and professional, sending all kinds of positive signals to potential clients. Nobody likes a blurry, squashed or stretched photo…

So, when it’s time to replace an image on your website, how on earth do you find the correct dimensions?

Thankfully our favourite browsers have made it easy(ish). Below you’ll find both video instructions as well as the step-by-step text method for identifying the size of an image on a website.

An important note, before we look at the steps in Chrome and Edge. There is more to image management than just dimensions. And it’s usually these additional moving parts that catch people out. But, image dimensions are a good place to start, so let’s get to it and I’ll circle back to image ratios and file sizes next.

Chrome

You can find both the video instructions as well as the text instructions for Chrome below.

1. In Chrome, browse to the website that holds the image you’re querying.

2. Press F12 or right click anywhere inside the web page and select Inspect.

3. In the new window that appears in your browser, click on the Inspector icon.

4. Hovering over the image will sometimes reveal it’s dimensions in a pop up. If they’re not clear, continue to the next step.

5. Click on the image and then locate the image URL in the bottom part of the screen *

Some websites do this differently. If you don’t see the URL in this window, scroll down the right hand side column to locate it. Furthermore, others will load the image elsewhere in the code in which case you may need a web developers help.

6. Hover over the URL to see the pop up with all of the image properties. This pop up includes the Rendered size – the dimensions that the website needs – as well as the Intrinsic size – the dimensions of the originally image uploaded. So in the case below, the image uploaded had dimensions that were larger than they needed to be.

Note: The image width is always displayed first, then the height. You’re always looking at width x height.

EDGE

1. Right click and select Inspect or press Ctrl + Shift + I to bring up the Developer Tools, this will open a new window.

2. Select the Inspector icon so that it is highlighted.

3. Hovering over the image will sometimes reveal it’s dimensions in a pop up. If they’re not clear, continue to the next step.

4. Click on the image and then locate the image URL in the bottom part of the screen *

Some websites do this differently. If you don’t see the URL in this window, scroll down the right hand side column to locate it. Furthermore, others will load the image elsewhere in the code in which case you may need a web developers help.

6. Hover over the URL to see the pop up with all of the image properties. This pop up includes the Rendered size – the dimensions that the website needs – as well as the Intrinsic size – the dimensions of the originally image uploaded. So in the case below, the image uploaded had dimensions that were larger than they needed to be.

Want to learn more about image management?

Subscribe to our blog to learn more about image ratios and file sizes. Or, if you’re in a hurry, educate yourself and your team with some image training. It’s easy when you know how, and an essential skill when it comes to managing websites and social media platforms – enquire today.


Tip: If you found this useful, you can get our latest ideas delivered direct to your inbox, for free, right here.