Essential Image Optimization

Images are still the number one cause of bloat on the web. Images take up massive amounts of internet bandwidth because they often have large file sizes. According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs. As of July 2017, images accounted for 1.7MB of the content loaded for the 3.0MB average site.

Per Tammy Everts, adding images to a page or making existing images larger have been proven to increase conversion rates. It’s unlikely that images will go away and so investing in an efficient compression strategy to minimize bloat becomes important.

Image optimization should be automated. It’s easy to forget, best practices change, and content that doesn’t go through a build pipeline can easily slip. Most CDNs (e.g. Akamai) and third-party solutions like Cloudinary, imgix, Fastly’s Image Optimizer, Instart Logic’s SmartVision or ImageOptim API offer comprehensive automated image optimization solutions. Image optimization consists of different measures that can reduce the file size of your images. It ultimately depends on what visual fidelity your images require.

The smaller in file-size you can make your images, the better a network experience you can offer your users – especially on mobile. In this online ebook, we’ll look at ways to reduce image size through modern compression techniques with minimal impact to quality.