Web – compress images!!

I see too many websites containing images which are not compressed. There are many websites/ tools available now that can perform compression on images in an instant, and most of them are free. There are both lossy and lossless compressions available, and of course, lossless will likely yield the best quality retention. You can work with your UX/ product team to decide what quality is acceptable, and remember to be pragmatic on both sides of the coin, the developer will probably want the lowest file size, and UX/ product will want the highest quality, but the answer is usually – something in between.

Why not take a look at how heavy a lift your images are for the browser? Open the dev tools, go to the network tab and choose Img, you will need to refresh the page if you opened the dev tools after navigating to this page.

In this case this number actually isn’t too bad, there are many images on this page and they have been compressed to some degree. But before compression the number in the bottom image summarising the total size of all images was 113mb. This is unacceptable, think of the performance difference when loading 113mb vs 14.6mb on say a mobile browser on a mid range phone connected by 3G.