Image Formats: Compression is Good, Compression is Bad

09.19.2014 | in Tips | by Brian Troke

Quality photography can be a key aspect of a website’s design and professional appearance. The importance of these visual queues doesn’t diminish once your website is designed and built. In the modern web, content is generally the most valuable proposition your website offers, and an integral part of that content is its images. In this quest for optimal imagery it’s important to remember the technical elements that will play a part in not only how good things look, but also how well they perform.

So you’ve shot your carefully crafted photos, tweaked their property levels and feel you’ve achieved wonderful results. It’s now time to save your gallery and upload it into your site’s CMS. What format should you choose? What size should your photos be? It’s tempting to save a photo you’ve poured energy into as a high quality format that’s as large as possible, but shy of running a web-optimized photo gallery you’re load times are going to take a hit, and your mobile users will be writing you the bill for their data plan expenditures. Tread carefully; striking a balance between quality and speed is vital to your success.

If you’ve opted to use a photograph, odds are likely that it will already be in jpeg format, which is without question the most ubiquitous format on the internet and the default in many cases. Great! Jpeg is generally the best format for photographs, as it scales in compression over a wide range, and gives you a fair amount of control over quality and file size.

Let's imagine we just shot the following:

Source: Australia.com

The cropped version above is a full-quality jpeg, weighing in at 172kb. This is probably overkill. 172kb is fairly heavy for a jpeg at this size, and dropping the compression from 100% to 80% will reduce the file size to a mere 80kb without any drastic drops in quality. Bear in mind that this sweet spot can be different between images, and while jpeg artifacts tend to manifest in the same way, the point where quality distortions become noticeable can depend on the original image, the use of colour, and more.

Here’s that same image taken to an extreme, with maximum compression:

Though this version is far lighter in size (down to 10kb from 173kb) the muddiness and pixelated appearance that’s now painfully apparent is the cost of compression to that degree. The photo has been ruined. Jpeg is considered a ‘lossy’ format, meaning that saving the image with compression gives lower file sizes by forfeiting detailed information. This exchange grants lower file sizes but also creates the muddy details above.

As always, there’s a catch: every time you save a jpeg, your system will run compression on that image whether you’ve chosen to save it at maximum or minimum quality. It can be dangerous, in this case, to continually open and save an image because every new save will eat away at the image quality, bit by bit.

If you’re not using a photograph, then png may be your best bet. ‘Lossless’ by nature, meaning you’re not losing quality by saving your file, png only compresses when necessary and never removes information or detail. This means that while the image quality of a png is typically fantastic, the file size depends on how many colours the image houses and how visually complex it is. It’s an ideal format for images that are designed with block colours and text.

Image formatting and compression is one of those aspects of web design and development that is generally invisible to many until something goes wrong. To ensure that your visitors enjoy a visually stimulating experience, do what you can to heed the balancing act mentioned above.

• Web Content