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

  1. The big Hero images on your web site
  2. Smaller images on the information pages on your web site
  3. Header images, logos, sidebar images etc.
  4. 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.

 

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 - 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