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.

Youll also like button Phancybox Auckland web design seo web hosting in New Zealand min - How to find the dimensions of an image on a websiteHow to resize and crop images in WordPress

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

The easy answer to a brilliant SEO question Phancybox NZ Web Company  - The easy answer to a brilliant SEO question
The easy answer to a brilliant SEO question
Is your website an expense or an investment Phancybox NZ Web company - Is your website an expense or an investment?
Is your website an expense or an investment?
Web design Its time to redesign your website Phancybox web company NZ - It's time to redesign your website if...
It’s time to redesign your website if…
How to avoid Gmail Armageddon in your office Phancybox web company Gmail and email migrations explosion - How to avoid Gmail Armageddon in your office
How to avoid Gmail Armageddon in your office