Posted on by efront

Optimising Images

Optimising your images when updating / adding content

All images should be optimised before they are uploaded to your CMS or used in your EDMs. This is the easiest thing you can do to reduce the page load of your website or EDM. When you optimise an image you should ensure it’s the correct format, the correct size, and that unnecessary data has been stripped out of the image.

Please read through the below to discuss the best approaches.

 

Formats

Your file format makes a big difference to the overall file size and speed of your website.

This type of image should be saved as JPEG. C/o https://thrivethemes.com/jpeg-vs-png/

A graphic like this should be saved as PNG. C/o https://thrivethemes.com/jpeg-vs-png/

Formats for photos (JPEG/JPG)

Photos should be saved as JPGs as that will compress photographic detail better and result in a smaller file size.

https://www.techsmith.com/blog/jpg-vs-png/
C/o https://www.techsmith.com/blog/jpg-vs-png/

Formats for logos / icons (PNG)

Logos and icons will compress better as a PNG.

 

Images Sizes & Dimensions

As a rule of thumb, it would be great to aim for full width / header / hero images having a file size of <450kb.  Smaller tile / inset images being < 200kb (72dpi)

Image max width should be less than 2000px in most instances where a full width image is used, smaller dimensions should be uploaded

 

Optimising Images before uploading

We recommend using an application such as https://imageoptim.com (MAC only). For Windows similar apps such as Pingo (https://css-ig.net/pingo) or ImageOptim online can be used (https://imageoptim.com/online)

  • They won’t reduce the quality. However, they strip out all of the metadata in the file that won’t be needed to simply display the image online. Sometimes this can save 70% of the file size with no quality change.
  • You can enable the applications to also reduce the quality of the image which can result in smaller file sizes with little to no visual change. Generally, a setting of 80% original quality is recommended.
  • Highly recommend running absolutely any image you add to the site / send out in an EDM through this.
  • If using ImageOptim application it’s quick – you can batch optimise images.