Your website’s speed can have a huge impact on your success; in fact, every single second counts and can make a very big difference in returning visitors, as well as your overall conversion rate and sales. So, how can you improve your website loading time, both on web and mobile? Start with your images: they’re the ones that usually take up the most space. In this blog post, I’m going to share 5 top tips to help you optimize your images for web and mobile.
But before we get to the tips, here are a few interesting facts and stats to convince you of the importance of optimising your images…:
- 64% of smartphone users expect your pages to load in less than 4 seconds
- On the web, customers expect your website to load in less than 2 seconds
- Website speed has a direct correlation to revenue; just one second more or less can hugely impact your sales
- Website speed is an important element of SEO and search engines take it into account when determining their ranking. Even as an SEO beginner, there is plenty that you can do to optimise your images and improve your website speed.
What is image optimisation?
Image optimization means, quite simply, adjusting your images to a smaller size, while not compromising on image quality.
In most cases, image account for the most downloaded bytes on your page. Basically, what this means is that by properly optimising your images, you can make the biggest difference to your websites’ overall performance.
Look at it this way; imagine your website had a physical weight – and the heavier it is, the slower it moves. In most cases, the overwhelming majority of that weight comes from your website’s images.
But you can’t remove them, can you? They’re an important part of your website and of the user experience. Especially if you also have a blog – any time you publish a new post, you need to use at least one, but preferably more, images and GIFs.
That’s why, by optimising your images, you’re cutting down your website’s weight – making it lighter and therefore, faster.
Although this is pretty much a science, it is an art to find the perfect balance between reducing your image file size while not compromising too much on image quality.
So, now that we’ve grasped the importance of optimizing your web and mobile images, here are some of my top tips on how to get started right now:
1. Do you really need all of those images?
Before optimising any images, take a close look at your website: do you really need all of those images? Are they all necessary to building a better user experience?
And it’s not just about using more images than necessary, but also bigger images than necessary.
In some cases, you can completely remove some of the images from a page and it won’t affect the user experience; some people simply use too many. And sure, they look good, but they’re also impacting your website loading time, which can mean less traffic and fewer sales made for your business – is it worth it?
In other cases, you can replace some of your images with other visuals, such as vectors, which have much smaller file sizes – you’ll still bring some colour and life to your website, without compromising as much on speed.
Do a complete audit of your website and be prepared to make some decisions – if an image doesn’t actually help you achieve anything, remove it. If you can find a better solution for replacement – such as a vector image – use it.
That’s not to say that you shouldn’t have any images on your website; they’re extremely important and they can make a big difference to the user experience.
2. Know your image types
2 of the most popular and most used image formats are JPEG and PNG (also known as raster images, along with GIFs). In fact, PNG and JPEG, together with GIF, account for 96% of the Internet’s image traffic.
You’ve probably noticed these formats often – but how much do you really know about them or when to use each one?
PNG is an uncompressed image (lossless format) – that means that it can have a very big file size, although it also means much higher image quality, with more colour and detail.
JPEG, on the other hand, is a compressed image (lossy format) – that means it’s not as detailed or high-quality, but it does mean a smaller file size.
So, when should you use each format?
Basically, you need to play on each image formats’ strengths:
- Use PNG when you’re posting simpler images, images that don’t have a lot of colours or detail, as well as transparent images. They’ll look better, but without being too “heavy”
- Use JPEG when you’re posting an image that has a lot of colour – otherwise, the image would be too big and will greatly affect the user experience and website loading time, especially the more you use images of this kind
3. Your content management system is reducing your image file sizes…or is it?
Many people use their content management system (i.e. WordPress, for example) to resize the images they upload to their website.
Whenever you upload an image, you can choose what size to use – it takes seconds to set up. But does it help?
No, not really – sorry to say. Unfortunately, just because you’re posting a smaller image than the one you’ve uploaded initially, it doesn’t mean that it will actually be any smaller when it really counts: when your browser loads.
Whatever the image size was when you uploaded it to your content management system, that’s what the server will have to load; meaning that, if you want to actually make a difference to your websites’ loading time, you’ll need to:
4. Resize & compress your images before uploading them to your system
This is extremely important – every time you want to upload an image to your website, check its file size.
But most importantly, reduce that file size before uploading – more often than not, there’s some room for improvement in file size.
So, how do you reduce your image’s weight?
- Use your photo editor (such as Adobe Photoshop) to resize your images – most editors allow you to do this, so consider what size your image truly needs to be to fit your screen and use the photo editor to resize the images to the proper width and height.
- Use an image resizer to crop and resize your images before uploading – just google “image resizer” and you’ll find a plethora of tools that can do this quickly and easily
- After resizing your image, it’s time to compress it – one of the easiest and quickest ways is to use a tool; like before, simply google “compress image” and you’ll get more results of tools that you’ll know what to do with.
Conclusion
If you have a website, image optimisation should be at the forefront whenever uploading any media. As I mentioned earlier, your images have a huge impact on website loading time, and website loading time has a huge impact on search engine ranking, traffic, user experience, and conversions, in turn. Don’t just upload images blindly, just because they look good – only use images where necessary, especially when it comes to mobile devices, and always optimise your images before uploading them.
Read more: Optimizing Your WebSite For Better Results