Resizing Images for Your Website

The size and quality of your website images matters. Too big and it can slow down your page loading. Too small and it can look unappealing and discourage customers. In our article which explained how to choose the best image file format, we discussed the common file formats and which ones you should be using on your website. In this article, we're focusing upon image file sizes, what size is best for website images and how to resize your images correctly, for which we have video demonstrations. 

Understanding Website Image Sizes

Website images are measured in three different ways:

  • file size - the number of bytes the file has

When it comes to file size, the units of measurement you are likely to come across in relation to your website are bytes (B), kilobytes (KB), megabytes (MB) and gigabytes (GB). Bytes are the smallest unit of data measurement. One kilobyte is equal to 1,000 bytes. One megabyte is equal to 1,000 kilobytes. One gigabyte is equal to 1,000 megabytes. There are data unit conversion calculators online which can help you make further calculations about just how big your image file sizes are. We encourage our customers to keep all of their images under 400KB, with under 200KB the optimum image file size. 

  • image size - the actual dimension of your image in pixels

Image size will impact upon the file size, with the more pixels, the bigger the file.

  • resolution - the quality or density of the image, measured in dots per inch or dpi

The higher the dpi, the better quality the image is. An image suitable for printing can require around 300dpi, but most website images are less than 92dpi.

While each of these website images are important, when we refer to website image size, we are mostly referring to the file size. Our recommended image size is 200KB or less, though up to 400KB is okay. To help our customers, we record the file size of product images within the database, and will alert customers if the file size of these images is too large in their weekly website summary email. We also display a message which can be seen when a customer edits their products as a prompt reminding them to reduce the file size. As well as this, we also have a report which can be accessed via the eCommerce/shopping reports area within the CMS called Oversized Product Images. This helps customers to identify and quickly navigate to the multiple product photo pages to take action. If there are no oversized product images, this report will be blank.

Search engines such as Google do not like large images on a website as they are slow to load, consuming more bandwidth. Consequently, one thing Google has done is rank websites lower in search results for having large file size images. Having the right sized images will help your website to increase traffic volume, improve SEO and help reduce the loading speed of your web pages. 

Take a look at the video below to see how to reduce your image sizes within the CMS.

How to Reduce Your Website Image File Size

Ideally the desired resolution of an image is 960x960 pixels, which is about two thirds of a typical screen size. This is flexible though, as a full width product image may display up to 1200 pixels wide. Our website builder has some handy built in features to help maintain the proportions of images, ensuring that a portrait or landscape image isn't square. However, there is the option to select a square image shape (among others) if wanted. 

To reduce the image file size though, the best option is to do so before you upload it to your website. This can be done through online resizing software such as Pixlr, Adobe, Canva or BeFunky. In this video, we will show you the prompt message that displays when a product image file size is above 400KB and where to find the Oversize Product Images report, plus how to crop and edit a product image size and shape.

We have a growing collection of helpful guides related to web design which we recommend you read, including these ones:

If you get stuck, remember that we can recommend many web designers who are experienced in using our CMS who can help you. 

Tags: web design  

Posted: Wednesday 27 April 2022