How to tell the size of images on my website

Support Article ID: 87913

Image sizes can be figured out a number of ways on your web site. Different Web Browsers give different right click options. Some are good and some suck at giving image information.

This information is relevant to

The big Hero images on your web site
Smaller images on the information pages on your web site
Header images, logos, sidebar images etc.
Any image really but product images are handled a little differently so read at bottom for info on this,

How to Tell the Size of an Image - Method 1 - Right Click - Firefox Browser

Easiest method is to use Firefox as your browser.
Go to your web site
Right click on the image
Select the option "View Image Info"
A pop up appears and will have the dimensions of the image

TIP - If it has the text (Scaled to) then used the scaled to dimensions not the actual image size.

TIP 2: If when you right click on the image you do not see "View Image Info" as an option it may be an image set to be a background. In this case select "View Background Image" which will open up the image in a new tab. Now you Right click and you will see "View Image Info"

How to Tell the Size of an Image - Method 1 - Right Click - Internet Explorer

With Internet Explorer as your browser.
Go to your web site
Right click on the image
Select the option "Properties"
A pop up appears and will have the dimensions of the image

IE did not handle images set as background images very well. For background images you'll need to save the image to your computer and then use an image editor to open the image and find out the size that way.

How to Tell the Size of an Image - Method 1 - Right Click - Google Chrome

With Google Chrome as your browser.
Go to your web site
Right click on the image
Select the option "Inspect Element"
Code and information will appear on your screen and you need to tease apart the information to get the image size. As you roll over the code from the inspect element box, sections on the web page above will highlight.

Backup Plan - Select Save As and save the image to your hard drive and use method 2 below.

How to Tell the Size of an Image - Method 2 - Save Image

STEP 1.

Use Safari as your browser.
Go to your web site
Right click on the image
Select the option "Open Image in New Tab"
Go to that tab and you will see the image on its own
Right click on the image and select "Save Image As" and save it on your computer where you can find it.

Step 2. Open Image in an Image Editor

Open your image editing software on your mac or PC
Or use this online one which is really cool. http://pixlr.com/editor/

In Pixlr link above - Click Open Image From Computer
Select image open it
On the bottom of the image it will say the pixels e.g. 700x276px
And this is your answer. Make replacement images to the exact same size.

IN other image editors, open the image and somewhere it will indicate the size of the image.

Write down the image size from here.

Product Images

Product Images are different - Make sure you locate the largest, biggest popup of the product image and find out the size using the above method. You should prepare your product images to be this largest size or bigger.

You can also see what limits your site has set for product images in the CMS itself by

Logging in the CMS
Clicking on Config
Click on Image Sizes option
Look for Large Image Dimensions

Search for information on product images elsewhere on this site