It’s accepted wisdom these days that page loading times are pretty crucial to our experience when we visit a website: so crucial in fact, that according to KissMetrics, if a page takes more than 2 seconds to load, we get seriously twitchy and at 3 seconds, 40 per cent of us are likely to abandon the page – and the site – altogether!
One of the areas that can have a dramatic impact on that experience, is the size of the site’s images. So we thought we’d take a look at that – and answer a simple but often overlooked question about images:
When you manage your own content, how do you know when an image file is the right size?
Deciding to have a website professionally built usually takes care of this initially. But most of the websites we build here at SBM are CMS (content management systems) sites, so after we’ve created the site’s design and structure, most of our clients control their own content and manage their sites on a day-to-day basis.
For larger companies with dedicated web teams, knowing about image size and quality may not be such an issue. But what about smaller or medium sized businesses, who don’t have a dedicated resource to look after their site?
You might think that loading an image of the best possible quality would be ideal. (In the print world, we’re constantly looking for larger image sizes, not smaller ones!) But for a website, its not quite that straightforward.
So when I was talking with Rikki, one of our programmers at Trippnology, recently – it occurred to me that sharing our conversation might be very helpful for explaining how to max image quality without maxing-out page load time.
We were sending images through for a company ‘Meet the team’ page – and each image file was between 250-350kb in size…
ScreamBlueMurder: I can see you compressing the team images down to around 50kb. That’s quite a saving!
Trippnology: Yep, most of that comes from stripping out the metadata attached to the image
ScreamBlueMurder: Do you need special software for this – and can you do similar images in batches?
Trippnology: I use Irfanview (Note: for windows only, use ImageOptim for Macs) and to do it in batches, I set JPG quality to 80, strip out the unnecessary EXIF data and save the file as a progressive JPG
ScreamBlueMurder: What is EXIF data?
Trippnology: EXIF = camera used, shutter speed, GPS info, etc. As you can see, a 700 x 900 photo need only add 50k to the page. If they weren’t cleaned up, just 4 x 250k images would have added an extra 1MB!
ScreamBlueMurder: So … when clients are doing their own WordPress sites, they won’t necessarily know about this… will the new WordPress images manager resolve any of this?
Trippnology: ‘Fraid not. Upload a 1MB image and the full size image will show ‘as is’ on the page.
—
So for beautiful, crisp images that don’t slow your site down to the point of driving away your traffic, try the following steps:
- Download an image optimising app: we’ve used Irfanview for PCs or ImageOptim for Macs.
- Remember to check settings in the preferences – and don’t be afraid to alter them if you’re not entirely happy with the result. BUT don’t forget…
- ALWAYS keep your original as is and work on a copy of your image, not the original!
- Aim for a saving of around 70% in image size, unless the image is already really small (in which case, do you really need to optimise it further?)
- Images over 500Kb should almost certainly be optimised – although check in position to make sure this hasn’t affected the actual size that you want your image to appear.
We’ve mentioned 2 image optimising apps above, but there are many blogs on image optimising apps and it’s well worth looking around to find something you’re comfortable working with.
It’s also worth noting that whichever app you choose, you really do need to check the presets in preferences and change them if necessary. Setting JPG quality to 80 is NOT always a standard setting – it may not even be turned on. If your image doesn’t reduce and you think it should, have a look at the levels in settings and play around with them until you get the results you’re looking for.
Paying attention to your image sizes really does make a huge difference to your site’s loading time – and your visitors will thank you, especially if they’re browsing on mobile!
If you would like to know more about how to get a grip with your image sizes, call us today on 01379 676720 to chat about it and let’s see if we can help you