How do I optimise the images on my website?



Quality images are a great way to promote the products on your site. When it comes to downloading a page from your site, images can be that largest part of a web page. This article describes how to reduce the time it takes to download pages on your site by reducing the file size on the images.

There is a balancing act between crisp quality images and the time it takes to download a page on your site.

Covered in this article are:

Advantages of optimising images on your website

  • Reduce the time it takes for Customers to wait before a page is loaded. Studies show that people will only wait a few seconds for a page to load. One study suggested keeping the page load time under 8 seconds. After 10 seconds, some people go to another web site.
  • Search engines like Google give preference to web pages that load faster. So reducing the page load time could improve the position of your site in search results.
  • Your Neto hosting plan has a limit for the amount of data going to and from the site in a month. Reducing the file size of the images on your site could save you paying excess data fees. 

Image Formats - advantages & disadvantages

  JPEG PNG GIF
Image Compression good poor poor
Transparent Background no yes yes
Translucent Background no yes no
Animation no no yes

You can upload three image formats on your site - JPEG, PNG and GIF. Each format has its use but JPEG is the best for reducing the file size of images. For example:

Comparing the file sizes for the different image formats

This image was saved in the three image formats. PNG is almost seven times the file size of the JPEG image. When you multiply the savings by the number of images you have on a web page, you can make a huge cut to the file size of all the elements that make of your web page and reduce the time it takes to downlaod.

PNG format to good for company logos or when you want the background of the image to be transparent. 

How to find the width of an image on your site

To work out the best image size we first need to find out what is the width of the image on your web site. If you are using a custom designed theme or one of our free themes, each one can have different optimal image sizes.

What we need to do is to measure the image when it is displayed in you website. We are not looking for the actual width of the image file but the width on the computer screen.

The method described here uses the Google Chrome web browser. If you can't use Chrome, there are other ways to find the image width.

In Chrome, go to Extensions and click on Get more extensions at the bottom of the page. In the Google Web Store. Search for page ruler by wrakky and install it. 

Then go to the page on your site and click on the page ruler icon. The cursor will turn into a cross. Click at the top left corner of the image and drag until you draw a box that matches the width and height of the image you want to measure.

Draw a box around the image

Then look at the bar at the top of the page for the width of the image.

Find the width

In the above example the width is 846 pixels. Just round it up to next multiple of 10. In this example, 850 pixels. This is the width you will need.

Website Logo

The website logo or company logo normally appears at the top of every page in your site. 

Website Logo

To find the best with for this image, check out the section on how to find the width of an image. Now you have the image width you need, go to Logos & Branding under the cog icon (top right) in the control panel. Then scroll down to the Website Logo. Click on Choose File and select your logo. The image options will then appear:

Upload website logo

If you have a colour or an image on the background of your site, uploading a logo with a transparent background will enhance the look of your site. For this you will need to use the PNG image format. Other formats will be converted to PNG when uploaded.

  • Width - If you enter a number the image will be resized to fit that width.
  • Height - If you enter a number the image will be resized to fit that height. If you set a width but no height, the height will be calculated.

 

Product Images

When you add a product image, either on the product page or using an import, the image is resized. Three sizes are created for your site - full, thumb large and thumb. These settings can be adjusted to give you the best results by reducing the file size and preserving the image quality.

You can upload images in three formats - JPEG, PNG and GIF. Each format has it’s own benefits but for smaller file sizes, JPEG is the best. 

To find out the best size for the images on your site, first measure the width if a product image on a category page. See How to find the width of an image on your site for instructions.

Once you have that figure, go to Image Settings under the cog icon at the top right of the control panel.

Product image settings

Set the Small thumb size image width and Small thumb size image height to the figure.

Set the Large thumb size image width and Large thumb size image height to 500. eBay requires images to be at least 500 pixels on the longest side.

Then change the Full size image width and Full size image height to 1600. If you use eBay’s zoom on hover feature, the image needs to be 1,600 pixels in the longest side.

You can also adjust the Thumb image quality. By default it is 95%. Reducing the quality to 75% will still give you sharp images but reduce the file size of the images.

Then save the changes.

Note: Changing image size settings will only affect new images that will be uploaded. You will need to do one of the following:

  1. Edit each product and re-upload the images.
  2. Using Bulk Import Images.
  3. Using the image URLs when importing.
  4. Reprocessing the images.

Product Categories

Each product category supports two images. The main image for the top level categories are displayed on the products page.

Product Category images

We recommend using the JPEG format for these images. To work out what the width of the category images are, first go to the products page on your site. The web address will be something like www.myshop.com.au/products where www.myshop.com.au is the domain name for your site. Not all sites have a products page. Then check out the section on how to measure images.

Upload a product category image

Click on the Choose File button and select the banner image to upload. The image options will appear.

  • Convert to - It is recommend you select JPEG (*.jpg) as this will reduce the file size of the image.
  • Quality - The lower the percentage to small the file size. If the image does not contain text or logos, you can set it to 50-60%. With text in the image, you may need to increase it to 70%.
  • Width - If you enter a number the image will be resized to fit that width.
  • Height - If you enter a number the image will be resized to fit that height. If you set a width but no height, the height will be calculated.
  • Add whitespace to force size - The image will not be stretched when it is resized. If you enter a width and height, the image will be resized to fit within the dimensions and the rest of the image will be white. If you uncheck this option, the image will be created still within the dimensions but the image will be the calculated size that fits within the width and height.

Banner Advertising

Advertising banners can be the largest images that appear on your site - both in screen size and file size. So optimising these images can make a huge impact to your speed of your site.

We recommend using the JPEG image format rather than PNG or GIF. Also making sure the image is the right width and height can reduce the file size and download times.

The modern digital cameras can produce images of thousands of pixels in width and file sizes north of 3 MB. If your banner displays across the entire width of a large screen, then a width of 2,000 pixels is all you will need. Most of the themes use banners that are smaller.

To find out what the width of the banner you have on your site, check out our section on measuring the image width. Once you have the width, you can either resize the image using graphics software (recommended) prior to upload in the image or resize the image when uploading it.

If your are using the carousel feature (where images slide from one to another), it is also a good idea to make sure the height of each image is the same. If they are now, you will notice the content under the banners jump up and down as each banner is displayed.

If you want to change the image while uploading, you can enter the settings in the Ad Builder section:

Ad Banner image settings

Click on the Choose File button and select the banner image to upload. The image options will appear.

If you have prepared you banner in graphics software, just leave these settings blank.

  • Convert to - It is recommend you select JPEG (*.jpg) as this will reduce the file size of the image.
  • Quality - The lower the percentage to small the file size. If the image does not contain text or logos, you can set it to 50-60%. With text, you may need to increase it to 70%.
  • Width - If you enter a number the image will be resized to fit that width.
  • Height - If you enter a number the image will be resized to fit that height. If you set a width but no height, the height will be calculated.
  • Add whitespace to force size - The image will not be stretched when it is resized. If you enter a width and height, the image will be resized to fit within the dimensions and the rest of the image will be white. If you uncheck this option, the image will be created still within the dimensions but the image will be the calculated size that fits within the width and height.

For more information on banners, check out How do I add or edit banner adverts and featured products?

Content Images

This section covers the images added into the WYSIWYG Editor in the product descriptions or content sections on the blog, articles, product categories or other content pages. 

Images uploaded in the WYSIWYG Editor are not automatically resized or converted. You will need to optimise the images before uploading for the best results. The width of the image would depend on your website theme. If the image will display the full width of the web page content, set the width to 1,140 pixels. If there is a left or right column, you can measure the width of an existing image or the width of the column. Once you have the width, use graphic editing software to resize the image.

It is also recommend that you save the image in the JPEG format with 50% - 70% quality. This will give you the best image quaility while reducing the file size.

For details on how to to add images and make them responsive, check out the article How do I add images or files to web pages?

 


  • Last Modified: 29/10/2015