As the resolution of our digital cameras continues to increase, the file sizes continue to increase. 2MB, 4MB, 6MB and more.
If you want to add one of these images to your website you might just throw it into the Media Library and insert it into a post or page and not think anything of it.
But once you have a few of these images on a page they can really slow down the loading speed of that page which is not a good experience for those of us without a fibre internet connection, such as a busy wifi network, or on a mobile device in a low coverage area.
The 10 most common Content Management Systems (CMS) in the world are:
- WordPress (55%)
- Joomla (5%)
- Shopify (4%)
- Wix (5%)
- SquareSpace (5%)
- Drupal (2%)
- Magento (0.6%)
- Webflow (0.6%)
- Umbraco (0.2%)
- Hubspot (0.2%)
Each system has it’s own way of dealing with large images.
Some have built-in optimisation and caching systems which optimise images before they are displayed to the public.
Others, just display whatever their clients upload.
For WordPress sites, the plugin called “Smush” is popular and can be installed and set to optimise images automatically as you upload them into the Media Library.
However, depending on it’s settings, it can be fairly aggressive and noticeably reduce the quality of key images so it can be time consuming building up rules about which images should be optimised and which should not.
Whatever the platform your website is on, best practice is the same for all, and that is to optimise your images using desktop photo editing software.
Option #1: (Best practice) Optimise your images using photo editing software before uploading them to your website
Two of the most popular desktop photo editing software are:
- Affinity Photo (NZD$95 one-off fee)
- or Adobe Photoshop (AU$14.94/month)
In just a few minutes you can crop and export the images as web-optimised images.
As a rough guide you are aiming for a file size of 50Kb to 300Kb.
Option #2: (WordPress only) Use the built in tools inside WordPress to optimise images
If you don’t have desktop photo editing software, then then you can use the built-in WordPress media editor to crop and resize really big images (again your target is 100Kb – 300Kb file size).
There are some limitations with the media editor, and usability is not great, but it’s free and quite fast once you know how to use it.
One disadvantage of this option is that you will be storing the original versions of the hi-resolution images and this can start to consume your diskspace allocation with your website hosting provider.
Option #3: (WordPress only) Install the “Smush” plugin to optimise all existing images and optimise any new image you upload
As mentioned previously, some clients don’t like the way that this plugin can sometimes aggressively optimise key images on the site.
Otherwise, this plugin does do a good job of optimising images as they are uploaded and processing all existing images to optimise them also.
Option #4: Rely on your CMS or caching and continue to upload hi-resolution photos
Continuing to upload hi-res photos onto your website might work for you depending on how your CMS handles them.
Go ahead and load the page on your mobile phone with wi-fi turned off to give you an idea of the loading speed.
You can also use a scanning tool provided by Google called “PageSpeed Insights” to give you an idea of the loading speed and if hi-resolution images are slowing down the pages: https://pagespeed.web.dev/