Optimising images may not be a very exciting subject to cover , but it’s really important to ensure that your website images are optimised before you upload them to your website, or your going to pay the price through losing users and getting penalised by Google.
Website images are usually the biggest offender when it comes to slowing down the loading speed of your website, so you need to ensure that your doing the most to make sure that they are the right size and format for your content, product or blog post.
“Google’s latest research shows that the chance of a bounce increases 32% when the page load time goes from 1s to 3s. 1s to 5s increases the chance to 90% and if your site takes up to 10s to load, the chance of a bounce increases to 123%.”
What size should my images be?
The width of device screens are generally measured in pixels. The average pixel width of your browser window on a 15 inch macbook will be about 1400px.
Most websites require flexible images that will retain definition across devices whilst not being too large in file size. I recommend the following if you want decent results, without having to individually tweak each image.
- Full screen images – width of 1200px
- Half screen images – width of 600px
- Third screen images – width of 350px
(These are only guidelines, feel free to experiment if you need a higher definition image)
What can I do to bulk optimise my Images?
When it comes to optimising images you can go really deep and spend excuse time trimming the image to perfection, but we haven’t got that much time to waste, so we’ll use 20% of the effort to get 80% of the results. This process is easy, it’s quick and most importantly it’s free! ( Just as a quick disclaimer, this is an Mac tutorial only ) .
So without further ado, here goes!
Step 1 – Crop your images to size
- Make a copy of the image that you want to optimise (it’s always good to keep an original in case you want to resize again or something goes wrong).
- I recommend creating a folder on your desktop to keep your optimised images organised.
- Highlight all the images that you want to edit by holding “shift” and clicking each image, so they get highlighted blue.
- Right click on the highlighted images and select “Open with” > Preview (Default)
- Select all the images you want to edit to the same width by holding alt and clicking each one to select.
- Click “tools” from the top application bar and then choose “adjust size”.
- This will open a window, which allows you to modify some settings for the group of images.
- Choose the “pixels” option, Set the width to your desired dimension for the image. You won’t need to change the height, as cropping by the width will auto adjust the height to maintain the proportions of the image.
Step 2 – Compressing your images
The next step is to compress the resized images using an application which strips excess bloat from your images.
Download this free application https://imageoptim.com/mac
All you need to do is drag and drop your individual images or folder of images on top of the application icon, and imageOptim will optimise the images in their existing folder or location (you’ll see a summary screen pop up showing the file size you’ve saved on each image).
That’s it you’re done!
Your images are now ready to upload to your WordPress website. In some cases you can save up to 98% on the bloat of some images, and massively speed up your website, and it only takes 2 mins at the most! What’s not to love!