Today’s web design is all about optimisation without sacrificing quality and user experience. Given the importance of images and their effect on the overall look of a site, it’s essential to choose the most appropriate image format.
From GIFs to JPEG’s, and some of the next generation formats such as WebP, we demystify the different kinds of images in this handy guide. Take a look and find the perfect image format for your needs.
We had to begin with the most tried and tested format – the beloved JPEG. In algorithm terms, this format separates an image into 8×8 chunks of pixels. Each one of these is converted into a frequency domain, affectively defining the block as waves of energy.
It sounds complex, and it is, which is especially good for images which a vast number of colours. Photographs often work well, but graphics with bold and vibrant textures should be avoided with JPEG. The small details in these will be blurred out. Instead opt for one of the below.
JPEG’s younger brother provides the opposite appeal. Due to the straightforward LZW algorithm which generates short codes for parts of the image that repeat, GIF’s are perfect for images which have large areas of similarities. While it looks awful for photographs and complex images, this format compliments images with few colours and those with defined transitions – think graphics and logo’s.
User experience is at the heart of all decisions made in today’s web design. With the advent of mobile technology, a responsive site is one which is fast to load and navigate. Given the superior compression of PNG’s, this format is now widely used by many. The smart technology actually uses several prediction strategies – generating assumptions that certain pixels will be the same as the one next to it – in order to store less data.
It sounds hit and miss, but this is surprisingly accurate and produces great looking, smaller images. Some argue that it’s not quite as sharp as JPEG’s, but the reduced file size more than makes up for this incremental difference.
The above formats are all universal and continue to dominate in the world of web development. That’s expected to change very soon as there are some new kids on the block. WebP is one such format, created by Google and only supported by Chrome at the moment.
As with PNG’s, this also uses an assumption method to save data, but opts for over fifteen predictive strategies. That’s more than thrice as much as the humble PNG. You can also choose for either a lossless or lossy compression.
This gives the best of both worlds where you can switch between lossless for photographs and lossy for simple graphics. Tailoring each image in this way not only reduce file sizes where possible, but also creates the most striking visual for every image on your site. As mentioned, it’s not currently supported by wider formats, but you can expect this freedom very soon.