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.
1. Using the Chrome browser, press F12 or right click anywhere inside the web page and select Inspect Element.
2. In the new window that appears in your browser, click on the magnifying glass to which turns on the inspection function.
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.
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
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.
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.
3. Right click anywhere inside your page and select Inspect Element.
4. In the new window that appears, click on the magnifying glass.
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.
Right click anywhere inside your web page, and select Inspect Element.
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.
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.
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.
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.