USE TINYPNG FOR IMAGE COMPRESSION

There are many methods for obtaining images for your site, in various formats, sizes, orientations, and colour schemes. Our preferred options for Royalty Free Images are Canva https://www.canva.com/ and Unsplash https://unsplash.com/. There are others like Pixabay https://pixabay.com/ and the Subscription based Shutterstock https://www.shutterstock.com/ though Canva and Unsplash keep coming up with what we need.

They get our tick!

And then there are images taken from a camera or a smartphone. I better throw a Bahamut-Sized Warning that taking images from SMS, WhatsApp, or “Right-Click and Downloaded” from Social Media Posts does not bode well in terms of quality so always seek out the original image.

Whether it be from Canva, Unsplash or your smartphone, the chances of the resolution being high… are high.

Many reading this will sit back and shrug their shoulders. “Why wouldn’t we want high-quality images on our website?” they may say aloud. I can hear them now.

Good images are key, but images packing 5MB or 12MB is size is beyond what you need for your page regardless of if you’re viewing on a desktop or a smartphone.

We web-page with 5 images that are each 5MB is size will be way over 25MB in size when you account for other Elements/Widgets. This will add to bloat and will slow the speed of the page opening – no matter how fast your connected Broadband or WIFI. Ignorance of image sizes will hurt your website, especially if you’re trying to retain viewers.

Before we upload images onto a site, we compress them. In a nutshell, compression is the reduction by using less bits, thus storing the data in an efficient form. [Mind explosion but just go with it]. This doesn’t affect the size of quality of the image if you use the right tool. WordPress has many plug-ins that will automatically compress an image after uploading such as Smush, SiteGround’s inbuilt Optimizer, and many more, however I have found that compression yourself before uploading to WordPress is a much better result.

And even that, compression itself may not be enough to optimise your images. Take an image that is 20cm x 20cm in size that is occupying a 300 pixels by 300 pixels space on your web-page. Compression may have made the image efficient, however it’s still big, and if you’re alerted by an optimisation tool such as GTMetrix https://gtmetrix.com/ that the best size for your image is 6cm x 6cm, then take the time to resize.

Step 1

1. Use Tinypng https://tinypng.com/ to compress images
2. You can compress up to 20 images
3. Each image should be less than 5MB in size
   1. If the images are > 5MB then use https://compressjpeg.com/
4. Sit back amazed at the 60-80% reduction in size!!!
5. Download the images post-compression]
6. Upload to the WordPress Media Library

Step 2

1. Check your Site’s Performance with GTMetrix https://gtmetrix.com/
2. Make a note of any images that are recommended at alternate sizes
3. Go to https://picresize.com/ and resize accordingly
4. Re-upload to WordPress
5. Remove the original image

To end on a final point. We once received 67 images from a customer totalling 236MB in size (!!!!) – that may have been the say when Google crashed. After putting them through Image Compression, the size dropped to 42MB. That is still big, but the impact post-compression was major.

A great test for those that are unconvinced is to take a High-Res image from the web or on your phone, and to then compress it. Open both images on your desktop, side by side, and compare. You will become converted. Amen.