17th July 2017

Optimising Images

The images you use can dramatically affect the performance of your website. You can optimise images to improve the experience for your visitors.

Our Page Speed Tune Up service improves the Google PageSpeed Insights score of a website. Optimising images is an important part of this service.  However, sometimes after we’ve fine-tuned the performance of a page, our client changes images and the score gets worse!

Here’s a quick checklist you can use to help you upload appropriate images for your store:

Optimising the size of an image

  1. Resize your image to the correct size. It only should only be the maximum size it can be displayed at on a visitor’s screen.  A 1000 x 1000 image displayed in a 500 x 500 container is 4 times bigger than it needs to be!
  2. Check you’re using the appropriate image format. Use GIFs and PNGs for small images with a limited palette, transparency (and animation if needed) like logos, icons and design elements. If you’re optimizing a photo, screenshot, or a similar image asset use JPEG (jpg). Try several JPEG quality levels to find the best quality vs. filesize tradeoff for your asset.
  3. If your image editor has an option to ‘save for web’, use it.
  4. Remove any unnecessary metadata (e.g. geo information, camera information etc.)

These are just a few of the techniques we use to optimise images. To maintian a good PageSpeed Insights score, check these tips before uploading any images.

For more information see this article that explains reasons why it’s important to optimise images, and how to do it: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

Leave a Reply