Determine Image Dimensions for Website Design

April 06, 2017/Tags

Here are some tutorials for how to determine an image dimension.

To determine an image’s dimension on a website using Apple Safari Browser.

Steps:

Go to a website.
Right-click on the image you want to determine its dimension, and open it in New Tab
Click on the image to maximize it
Right-click and click Inspect Element
Safari Web Inspector (Web Developer Tool) shows you the image properties. At the end of file name, Width and Height shows you the exact image dimension.

Video Guides for Apple Safari Browser

To determine an image’s dimension on a website using Mozilla Firefox Browser.

Steps:

Go to a website.
Right-click and click Inspect Element
Click on the image to maximize it
Firefox’s Firebug Developer Tool appears at the bottom of the browser showing the highlighted image properties
Roll your mouse pointer over the highlighted image properties, and an image thumbnail will appear above your cursor together with the image dimensions.

Video Guides for Firefox Browser

To determine an image’s dimension on a website using Google Chrome Browser.

Steps:

Go to a website.
Right-click and click Inspect
Chrome’s DevTool (Developer Tool) appears at the right of the browser showing the highlighted image properties
Roll your mouse pointer over the highlighted image name, e-commerce-banner.jpg, and an image thumbnail will appear above your cursor together with the image dimensions.

Video Guides for Google Chrome Browser

Determine Image Dimensions on MacOS for Saved Image for Website Design

Steps:

Right-click on the image and click Get Info
Under the General Tab, second item Size, it shows the image size, 360kb
Under More Info Tab, second item Dimensions, it shows the image dimensions, 1900 x 511 pixel

Video Guides for MacOS