Website Performance and Image Compression Go Hand-in-Hand

Images account for more than half of a typical web page's content and are often the biggest hindrance to ensuring optimal web performance and a pleasant user experience. Learn which method of reducing image size is best for the web, and what the difference is between Lossless vs Lossy image compression techniques.

Reduce Image Size for Web Performance

When it comes to web performance, image compression is key. Image compression techniques offer a simple, cost-effective solution to quickly boost web performance without cutting lead-generating graphics.

According to GigaOM, page bloat is on the rise and images account for more than half of a typical web page’s content. Therefore, to achieve optimal website performance, web developers are often tasked with determining how to reduce page size and handle image loads with greater efficiency. If you’re wondering how to reduce picture size, there are several easily implemented techniques available.

Lossless vs Lossy Image Compression

Image Compression Quality Comparison
An image compression comparison – Quality vs File Size. As demonstrated, file size grows exponentially as quality improves.  (click to enlarge)

While there are many competing image compression techniques, the two primary types include “Lossless” and “Lossy” compression. Lossless compression allows you to recreate the original file exactly as it was, albeit in a smaller form for quicker delivery and less server storage requirements. This method optimizes for transmission – think dismantling a bed to move it into your new home – then rebuilding it as it originally was. While it delivers quickly – hitting the first mark of web performance – the time it takes to “re-assemble” can impact user experience as they wait for full-render.

Lossy compression, on the other hand, discards all unnecessary information to make the file smaller. While this method eliminates redundant information, it does impact image quality. As a rule of thumb, an image saved at 60% quality (or higher) is generally not differentiated by the human eye when viewing in a web browser as compared to one saved at full resolution. An image editor zoomed in on the image will reveal a difference in quality – but that is to be expected. Generally speaking, lossy compression is the best image compression technique for web images as it uses less memory.

WebP Image Compression – A New Technique

An alternative to traditional image compression techniques is WebP, a promising new image format that was created by a team at Google. Its goal is to create smaller images that replace both PNGs and JPEGs so that developers can use one standardized image format for their web content. WebP combines elements of both Lossless and Lossy compression and is capable of reducing images anywhere from 25 to 34 percent. While this is relatively new and early in it’s adoption – it is a method worth considering as part of your website performance strategy.

Other Methods to Reduce Picture Size

Of course, there are several other techniques available to optimize and compress images. Some of those methods include Progressive image buildup, Arithmetic encoding and Lossless JPEG Compression. Ultimately, web page designers will have to choose a technique that offers both speed and image clarity, without sacrificing much of the user experience.

Establishing a Performance Baseline to Track Image Optimization Success

Prior to optimizing your website it is important to establish a performance baseline so that improvement can be accurately quantified. External web performance monitoring tools are recommended as they can measure the impact of changing graphic formats and analyze the end user experience from multiple points around the world.

To establish a baseline of your website performance, run our free website speed test before and after image compression.

[divider top=”no”]

What is your recommended image compression technique? Feel free to share in the comments below.

{ image source – Wikipedia }

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on print