…And make your website load faster too.
With the rise of stock shots and image file sizes in general, simply uploading images without any optimisation is a sure-fire way to add painful seconds of loading time to your website (bad for SEO, bad for user experience).
For example, a typical unoptimised photo could be anywhere between 3-5 Mb in size. So, when you should be aiming for a total web page size of less than 1Mb, that’s a problem.
What size should my images be?
As low as possible without losing noticeable quality – no one likes a grainy image.
But realistically, between 50 and 200Kbs (for a full-size image) is a good target.
How can I reduce my image size?
When optimising for the highest quality vs the lowest possible file size (think professional photographers websites), Google can lead you down a very long and confusing rabbit hole.
But for most people who just need images to look good, there’s a simple 5 step procedure to trim the excess fat from your photos.
But enough chatting. Let’s get stuck into it.
1. Do I need this image?
Before you doing anything, ask your self if you really need that image.
If it’s not adding value to your page, don’t even bother with it.
2. Pick the right image format
Do you need JPG or PNG image is the question.
PNGs are typically used for logos because of their superior quality and they support transparent backgrounds.
JPGs do sacrifice some quality, but their file size is much lower. This makes them the format of choice for webpage and blog images.
3. Decide how the image will be used
What image size you need will depend on how you intend to use it (will it be full-page, half-page or something else).
Once you know this, you can get the correct dimensions your image needs to be.
If you’re using Divi, here’s a fantastic guide from Elegant Themes. I use this to make sure my images are sized to load correctly.
4. Resize and crop
The next step is to resize and crop the image to the size you need.
How do you do this? I use a fantastic (and free) online graphic design-tool called Canva.
To show you just how quick and easy it is to alter an image, check out this short video I made walking you through the steps.
Top tip – don’t enlarge a smaller image. The loss of resolution can make the image look bad, making your website look cheap and amateur.
5. Compress the image
Images contain a lot of data we don’t need. Depending on the file, stripping away this excess data can reduce images by around 20% to 70%. Sometimes more.
Tinypng is a fantastic web-based tool to compress both your PNG and JPG images.
What’s more, it supports batched operations. Saving you time when you have multiple images to smush. Simply drag and drop your images and let it work its magic.
That’s the method. Let’s see the results.
To show you just how much extra memory your unoptimised images are taking up, I picked this example stock JPG image and optimised it for a typical full-sized webpage image (1920x1080px).
Here are the results.
|Size (KB)||Dimensions (px)||% Reduction|
|Original||3632||6000 x 4000||–|
|Resized & Cropped||186||1920 x 1080||95|
|Compressed||139||1920 x 1080||25|
Analysing the results
As we can see, simply resizing the stock image to the (significantly smaller) dimensions resulted in a file size reduction of 3632 kb to only 186 kb – that’s a reduction of 95%.
Further removing excess file data brought the total file size down to very respectable 139kbs, further reducing the resized image by around 25% – approximately 96% of the original file size.
So there you have it
In 5 simple steps, you can significantly reduce your image file size.
So if your website load times are painfully slow and you have unoptimised images, this could be the reason why.
Over to you
Do have any file size reduction tips you want to share? Comment below.
If you liked this article please share.
Just in case you were wondering how fast your website should be…
Ideally, as fast as possible. But let’s talk specific numbers.
While John Muller from Google reckons under 2 seconds should be the benchmark, a study by Pingdom in 2018 found a more realistic (and very achievable) average load time of 3.21 seconds.
For a typical small business, this is a good benchmark.
Ps. Over 5 seconds and around 46% of people bounce away from your site.
Written by Josh Rose.
SEO copywriter. Word lover. Addicted to travel.