Gain competitive advantage with faster websites using better image compression

With Wimbledon fast~approaching,~it’s time to~start thinking~about how we could improve our own game. And there’s no better place to start than by looking at image formatting and compression techniques which can have a dramatic effect on website performance.~ It can also help boost sales.

Reducing file sizes without reducing image quality has multiple benefits, not least for the end user who wants and expects these days rapid access to any page on the world wide web. But it can also prevent the additional cost or penalties attached to crossing an IP packet boundary, and~reduce the dreaded abandoned cart scenario associated with network latency. In addition, websites that deliver web content quickly can achieve a higher search engine ranking.

Of course image compression is just one performance booster. Other factors such as reducing the number of third party scripts, removing unnecessary resources and using a CDN can all help. But compressing images is undoubtedly one of the simplest, smartest ways to boost speed times, especially if you use one of the many readily-available compression tools. There are also sites that make it easy to~find out how~well~your website performs.

[caption id="attachment_1754" align="alignnone" width="314"] Compression Without Compromise[/caption]

Winning at compression~

Reducing image sizes involves~lossy~or lossless compression which take a different approach to shrinking computer files down to size. With lossless compression, every single bit of data that was originally in the file remains after the file is uncompressed.~Lossy~compression,~on the other hand,~reduces~a file’s size by permanently eliminating certain information. This affects the way an image can be recovered once compressed. JPEG files are an example of~lossy~compression, and the trick for the image creator or web developer is to reduce the file size and save data bytes without losing image quality.

Serving up the right image~

Just as no one tennis shoe fits all, some image types are better suited to the web than others.~For this reason,~it’s important to understand image types as well as learn scaling techniques, which can help you gain~faster~speed~times.~Here are the~general~rules:

1/~PNGs~(Portable Network Graphics) are almost always superior to~colour-limited~GIFs~and generally compress better~than~their rival. They employ lossless compression and are supported by most browsers. For a list of browser versions that support~GIFs, see~Google’s developer tips on minimizing payload size.

2/~GIFs~are good for very small or simple graphics with simple~colours~(3 max) and images that contain animation (less than 10x10 pixels). If you think an image might compress better as a GIF than a PNG, try both and pick the smaller.~GIFs~also support static and animated imagery.

3/~JPGs~are best for complex images and photographs as they support up to 16.7 million~colours. They don’t have to be bulky and~can appear to load quicker than their baseline counterparts when saved as Progressive JPEGs. These JPEGs load straight away, but with only some of the pixel data. There has been a resurgence of interest in progressive JPEGs lately due to mobile device bandwidth limitations.

4/ Avoid~BMPs~or~TIFFs.~TIFFs~are suitable~for print but not for web~partly because of~their data-munching size.~Likewise,~bit-mapped files (BMPs) are large files that require a lot of storage space.~Both formats~can be compressed but they cannot be natively rendered by modern web browsers.

Gaining advantage through scaling~

Scaling the image appropriately~is also~as~important~as the file size in reducing page load times. Save~the image in the largest size it needs to appear at otherwise you’ll~send~unnecessary bytes over the~net. If you want to show the same image~in a variety of smaller sizes~use an image editor to scale it and specify those dimensions in the page. You should also crop~images to remove whitespace and use CSS to provide byte-saving padding.

For more advice on~boosting performance and gaining the advantage over the competition, check out our~blogs.