If your website is slow.. you’re probably losing sales.
Big call right? But it’s backed by research. The friendly folks over at Kissmetrics have pulled together some stats to show how every second counts when it comes to website speed. Here at CV we’ve been focusing our people on making our software as fast as possible. The catch to it though, is that the websites running on our platform can only be fast if the content on them is correctly optimised. That means, acceptable image sizes, product lists that aren’t too large and minimising complexities as much as possible (without sacrificing features/functions).
Today I’m going to run through some best practices to help keep image size down which will help optimise your website speed.
Good question. About this big :-)
Before we answer this question seriously, let's first understand the key things that dictate an image size:
- Dimension - The amount of pixels that make up an image, indicated by the Width times the Height (W x H)
- Quality - The amount of compression applied to the image. The more compression, the worse the image will look but the smaller the file size
- File format - The standardised method used for saving the image - usually JPEG, PNG or similar. You can confirm an image File Format by its file extension (i.e. Picture.jpg)
Essentially, the bigger the dimensions and/or higher the quality, the bigger your file size will be.
Disclaimer: This article has simplified some of the technical concepts around image standards.
What dimensions are suitable?
Image dimensions are generally set in stone on a website because an image is trying to fit in a predetermined space, like a Product Grid or your Banner system… so you can follow the below rules as a ballpark for those things:
Product Images
Our software will automatically resize your website images to the correct Dimension, so all you need to provide is the large size for zoom purposes, which is recommended to be 1000x1000.
Category Images
Category List pages in Best Practice Design websites are generally setup to accommodate an image of 250x250.
Category Banners can vary in size depending on your design, but a good guide would be 300x150.
Banners
This varies depending on your design but a good size full width banner would be around 1680x500. The initial banners used when your site went Live were optimised by CV designers and are a good example of what image dimensions to use when replacing them with new images.
What quality/compression should I use?
Designers typically use a product like Photoshop to save your website images and have some options when saving to determine the level of compression to use. This is a sliding scale and can turn a tiny image into a huge one. Likewise, it can result in images that aren’t good enough quality for your website. You hired a photographer to spend the day taking these photos so you want to make sure they present well for your customers!!
They say beauty is in the eye of the beholder... and the same can be applied to website image quality. My experience is that technical people think a lower quality image is fine yet the marketing and design teams want to increase the quality. I recommend a happy medium approach where the image looks great but doesn't cause significant slowdowns on your website.
What File Format is best for websites?
A tricky question that has a lot of variables to answer perfectly.. but we can generalise! JPEG is quite good at minimising file size while maintaining quality for “natural” images... which would be things taken with a camera i.e. pictures of your products. PNG is particularly good when displaying Computer Generated Graphics. This would be things like your Logo or Banners with no photography in them.