It is often difficult to get the right trade-off between image quality and loading speed.
The ideal solution would be for each image to be adapted on a user-by-user basis: be that clipping it perfectly to the user's device screen, stripping metadata of any unnecessary information or, of course, ensuring that it is displayed with optimum image quality. But achieving this soon becomes something of a black art.
Given this challenge, our technical team has pored over the plethora of best practices and advanced libraries out there to ensure that Fasterize implements the very best in image compression algorithms.
In this article, we present an overview of the various methods used.
First and foremost, a key thing to note is that there are two types of compression:
- lossless compression: this reduces the data size or "weight" of the image, without any deterioration of quality. This essentially involves removing redundant information.
- lossy compression: this uses algorithms based on an analysis of human perception to re-encode the image in a form that requires less data. Deterioration of image quality is possible.
Images make up the vast majority of your page weight. They therefore have a direct impact on how fast your web site loads.
So if you wish to maintain optimum performance, image optimisation is a must.
However, image optimisation is also an extremely complex affair given the huge variety of image formats used on web sites nowadays.
In this article, we give an overview of the various techniques employed by Fasterize to provide the smartest possible image optimisation.
- on-the-fly selection of different algorithms: MozJPEG, PNGquant, PNGCRUSH and Giflossy
- mean pixel error based analysis to automatically determine the right compression settings to use to provide optimum quality/weight ratios
- image display techniques tailored to the page in question: lazy loading, inlining and progressive rendering
1. The best compression algorithms
Image compression is an inevitable part of web performance optimisation. It is often the first. Here, then, are the tools that we have chosen to incorporate into our engine:
JPEG compression: MozJPEG and MPE analysis
JPEG is a format that is frequently used on web sites. It is particularly suited to photographs.
- MozJPEG, a recognised library
- MPE analysis for optimum quality/size ratios
MozJPEG has become the de facto library for JPEG compression. Released in 2014, it has brought a significant improvement to image quality over existing libraries. The way it processes text also leads to a perceptible decrease in the grey "halo" effect that often plagues images containing text.
JPEG compression can prove tricky when it comes to setting the quality parameter, which can be set to any value between 40 and 100. The parameter defaults to 80, offering reasonable quality/size ratios. However, we have found that choosing the right setting is particularly tricky for our customers, with the optimum setting varying from image to image. We have developed a solution that will automatically determine the settings to use to obtain an optimal trade-off between image quality and data size. To do so, our system uses an image comparison algorithm based on characteristics of the human visual system (MPE or Mean Pixel Error). The algorithm allows different quality settings to be tested from lowest to highest, checking that the compressed image does not exhibit any visible artefacts. Simple but effective: image weight is generally reduced by 30-70%.
PNG compression: PNGquant and PNGCRUSH
PNG is a format that is ideal for drawings, illustrations and pictures with a transparent background. The type of compression used for PNG files is usually lossless compression, which works by removing redundant information. We use a library called PNGCrush. It is also possible to convert PNG files using 24 or 32 bit colours into PNG files using 8 bit colours.
This conversion reduces file size considerably (up to 70%) and retains alpha transparency. The images generated are, as you might expect, compatible with all modern browsers.
When using this technique, there are various algorithms that can also be used to compress the image while retaining optimum visual image quality.
GIF compression: Giflossy
GIF format is mainly used for animation. Such images can therefore grow quickly in size. To counteract this, we use Giflossy.
Giflossy is an image encoder based on LZW compression. This involves indexing and then storing by reference long sequences of pixels that occur multiple times. In this way, instead of storing the pixel values multiple times, the actual sequence only needs to be stored once.
This offers a 30-50% reduction in the size of animated image files, in exchange for a slight loss in quality.
SVG compression: SVGO
SVG files (especially those exported by a number of editors) often contain a large amount of redundant and unnecessary information (such as editor metadata, comments, cached items, etc.).
In order to reduce file size, the SVGO library removes and/or compresses all of this data, without affecting the quality of the image. This optimisation is particularly worthwhile when optimising CSS sprites.
2. Image display techniques tailored to the page in question
In addition the work we do to compress the image file, we also perform additional tasks around image loading.
- inlining: we embed small images directly into the web page HTML. With fewer requests, this improves loading times when the page is initially viewed, particularly on mobile and tablet devices.
- progressive rendering: Without progressive rendering, JPEG images load from top to bottom. With a progressive JPEG, a low-quality version of the image is displayed straight away. Details then appear as the image is loaded. A smart algorithm is used to apply progressive compression to large images only.
Note that modern browsers may display JPEG images more quickly if they are generated using progressive compression.
Today's web is hugely bloated and largely to blame are its plethora of images in all shapes and sizes. These are images that are either not optimised or, where they are, are not optimised effectively.
So if you're looking to give your web site a boost, image compression is a key step not to overlook, despite the complexity that this can entail.
But it is easy to get lost in all of that complexity...
Why not see how much of a difference our image compression could make to your web site?