How to find the dimensions of an image on a website

When you add an image to a page on your website, you can contribute towards your page load speed if the image dimensions are only as large as they need to be. There’s no value adding a 2000 x 1000 sized image into an area that will appear as 200 x 125 on most large screens.

So  how do you tell the dimensions of an image used on a web page? You can use the easy step-by-step instructions below, for Chrome, Safari, Firefox and Internet Explorer.

IMPORTANT NOTE BEFORE YOU START

Managing your images correctly is just one of hundreds of ways to improve your websites performance. Unless you are an active digital professional, managing your own website, can be toxic.

CHROME

1. Using the Chrome browser, press F12 or right click anywhere inside the web page and select Inspect Element.

right click your web page and inspect element in chrome - How to find the dimensions of an image on a website

2. In the new window that appears in your browser, click on the magnifying glass to which turns on the inspection function.

click on the Chrome Select an element in the page to inspect it icon - How to find the dimensions of an image on a website

3. Now click on the image to reveal it’s dimensions. The Chrome inspection tool displays the image width and height – the first number is always the width.
The first number is the image width - How to find the dimensions of an image on a website

SAFARI

1. First off, you’ll enable the Safari Developer Toolbar. Open your Safari Preferences.

1.1 If you’re on a Mac, click Safari and navigate to Preferences

How to change the Safari preferences on a mac - How to find the dimensions of an image on a website

1.2 If you’re on a PC, click Ctrl + , to open Safari Preferences, or press Alt to display the top menu and click on Edit > Preferences.

How to Edit your Preferences in Safari - How to find the dimensions of an image on a website

2. Click the Advanced tab (the cog on the far right) then tick the Show Develop menu in menu bar box at the bottom of this window and then close the Preferences window.

Tick show develop menu in the Safari menu bar - How to find the dimensions of an image on a website
3. Right click anywhere inside your page and select Inspect Element.

How to inspect an element in Safari - How to find the dimensions of an image on a website

4. In the new window that appears, click on the magnifying glass.How to inspect an element in Safari using Developer tools - How to find the dimensions of an image on a website

5. Now click on the image to determine it’s dimensions. The Safari inspection tool will display the image width and height – the first number is always the width.
How to find the image dimensions in Safari the first number is the image width - How to find the dimensions of an image on a website

FIREFOX

Right click anywhere inside your web page, and select Inspect Element.

Mozilla Firefox right click Inspect Element - How to find the dimensions of an image on a website

2. In the new window that appears, click far left arrow/square button (if you hover over it, the description is Pick an element from the page.
click on the Mozilla Firefox Select an element in the page to inspect it icon - How to find the dimensions of an image on a website
3. Now simply hover your mouse over the image you want to learn more about. The Firefox tool displays the image width and height – the first number is always the width.

How to find the image dimensions in Mozille Firefox the first number is the image width e1442874073183 - How to find the dimensions of an image on a website

INTERNET EXPLORER (EDGE)

1. Press F12 to bring up the Developer Tools, this will open a new window.

2. Click on Dom Explorer and then click on the far left arrow/square button (if you hover over it, the description is Select element.

Inspect an element in Internet Explorer - How to find the dimensions of an image on a website

3. Click on the image that you’d like to find out more about. In the window below you’ll notice an area highlighted in blue – here you’ll find the images width and height.

How to find the image dimensions in Internet Explorer Edge the first number is the image width - How to find the dimensions of an image on a website

Did you find this article helpful? We’re full of tips and ideas – let us know what’s bugging you, or subscribe to our blog posts to stay on top of your website, and ahead of the competition.

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

Web Design Imagery Phancybox NZ website company min - You don't know what you don't know, about website imagery
You don’t know what you don’t know, about website imagery
Web design clutter Phancybox Web Design company New Zealand Brisbane Web design chameleon min - Web design clutter: When familiarity leads to a loss of perspective
Web design clutter: When familiarity leads to a loss of perspective
SEO services online advertising costs Phancybox NZ Auckland SEO - Considering online advertising? This needs your attention first
Considering online advertising? This needs your attention first
We need to talk about your old school website Phancybox NZ web design old tv compressor - We need to talk about your "old-school" website
We need to talk about your “old-school” website