Some of the raster image formats in use today date as far back as 1987, when the GIF image was first presented by CompuServe, with JPEG and PNG arriving in the early and mid-90s respectively.
If you think back on how much innovation has occurred in the browser over the past 17 years, it's some triumph that these three have remained on top.
That's not to say that GIF, JPEG and PNG have remained unchanged – all have received incremental improvements.
But as technology advances, we discover more efficient approaches that aren't always compatible with the standards we defined back in the 1980s. Here are the 3 every designer needs to know about...
01. WebP (opens in new tab)
Based on technology first released in 2008, WebP was announced by Google as an open standard in 2010 for lossy optimisation of true-colour images.
It appears similar to JPEG for this reason but also promises alpha transparency, lossless optimisation and even animation.
02. JPEG 2000 (opens in new tab)
JPEG 2000 is similar to WebP in terms of lossy compression, alpha transparency and performing better than JPEG at low qualities.
However, it differs in its support of progressive loading and its use of just one algorithm for both lossy and lossless compression, and can optimise inpidual regions of interest differently in the same file.
It is supported on Safari and iOS and delivers a typical compression gain over JPEG of around 20 per cent.
03. JPEG Extended Range (JPEG XR) (opens in new tab)
Previously known as Windows Media Photo and HD Photo, JPEG XR is a former Microsoft proprietary format which has since been released as an open standard.
As the name suggests, JPEG XR is a new generation of JPEG which offers better compression at higher levels of quality, but also alpha transparency and more efficient decoding via tile regions.
Words: Jamie Mason (opens in new tab)
Jamie Mason is a front-end developer specialising in JavaScript. This article was originally published in net magazine (opens in new tab).
Like this? Read these...
- 20 top digital artists to follow on Behance (opens in new tab)
- How to network successfully: 21 pro tips (opens in new tab)
- New design network Stampsy aims to burst Pinterest's bubble (opens in new tab)