Quick Summary
You can find the dimensions of an image on a website using your browser’s developer tools (F12).
Jump straight to the video or steps for Chrome or Edge.
What size image do I need to use on my website?
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.
Wasting time working with images?
Sign up to get notified when our short All About Images course is live. Learn how to avoid blurry images, stop cutting people’s heads off in photos and what the deal is with ratios, dimensions and file sizes so that you can save time and improve results. Click the red slide out to get notified when our course is live.
FAQs
1. How can I find the size of an image on a website?
Use your browser’s Developer Tools (F12 or Inspect) to locate the image and hover over its URL to see both the rendered and intrinsic dimensions.
2. What’s the difference between rendered size and intrinsic size?
Rendered size is the image size as displayed on the site. Intrinsic size is the original dimensions of the image as uploaded.
3. Can I use this method on any website?
Yes, most websites allow you to inspect elements, but some may load images dynamically, which can make them harder to find.
4. Do I need any special tools or software?
No, just a modern browser like Chrome or Edge and access to Developer Tools (F12 or right-click > Inspect).
5. Why does image size matter on websites?
Correctly sized images look professional, improve load times, and avoid blurry or distorted visuals.
6. Is there a video I can follow instead of reading instructions?
Yes, the blog post includes video walkthroughs for both Chrome and Edge.
7. What if I can’t find the image URL?
Try scrolling through the code or ask your web developer for help – some images may be loaded in unconventional ways.