Optimizing web images – pocket guide
Yes, our blog is the best example of optimization! – NOT. And I’m saying it is not the best example not because this is one of our firsts blog posts, but because I have a bad habit in uploading large sized pictures, slightly cropped, far for being optimized for web. For years already the mobile phone became one of the main channels of information where we read our favorite articles and we spend a lot of our online time so I thought to share my ideas with you and create a small guide that could help you optimize the size of the images you upload on your website. Our main quest in this guide is to make it easy for that person sitting with his tablet or phone in his hands ‘waiting for Godot, while the website is loading…
In the next lines I will put my attention on blogs and presentation websites as for ecommerce websites it’s a different story especially when we have to deal with products feed so the images should be uploaded in a different manner (although many of the following guidelines could be successfully used for ecommerce banners).
- Recommended file format: *.PNG
- Maximum size shouldn’t exceed 500 or 600 Kb (I remember of a Black Friday campaign where the lack of experience lead to a disaster campaign. The size of the banner was more than 1 MB which of course killed the website)
- If you really need large images to properly present a product I would suggest you to have a look how many of this images you have on a page. Maybe you can find a more optimized way of presenting that product – edited images with product details, contextual images, perhaps some text explanations.
- Test the way your images look on different screen sizes (pc, mobile devices, different display resolutions) and after that choose the ones that match with the most used displays of your users. If you have different website versions (website version and mobile version) you have to have as well two versions of images.
- Turn to online resources for images optimization. For instance WordPress has many plugins for image optimization, choose the plugin you find easy to use. The one that comes in handy is included in the old Photoshop – choose to export/save the image for web. As well online tools like tinypng.
Plus, you can verify your website optimization (including the images) here and here (freeeeee tools from Google to verify your website optimization).
Good luck in optimizing your website!