WebP and JPEG XR Image Formats explained
In the challenging landscape that is responsive images there are two new image formats that are making their moves to provide part of the solution, WebP and JPEG XR.
For many years we’ve had the likes of JPG and GIF for all our image needs. In recent times PNG has come along to replace GIF in most situations (with the obvious exceptions of animated cat gifs) providing us with transparency in our vector images.
SVG has also been around forever to help with those vector layouts, however it was only widely supported recently and therefore is only just starting to make a resurgence in the world of internet imagery.
Before we continue any further it’s worth pointing out that these are not ready for the mainstream consumption and this article should be read as a guide to the possibilities rather than a tutorial of how to implement them in your sites today.
| WebP | JPEG XR | |
|---|---|---|
| Developed by | Microsoft | |
| Lossless Compression | Yes | Yes |
| Lossy Compression | Yes | Yes |
| Full Transparency | Yes | Yes |
| Progressive rendering | No | Yes |
| Replace PNG | Yes | Yes |
| Replace JPG | Yes | Yes |
| Added Bonus | Better lossy compression (same image with less bytes), we can now have transparency without the added file size of PNGs. | |
Here is a current support table as specified in a more detailed blog post.
| Browser | WebP | JPEG XR |
|---|---|---|
| Chrome | >= 23 | No |
| Firefox | No | No |
| Internet Explorer | No | >=10 |
| Safari | No | No |
| Opera | >=12 | No |
The next issue comes with creating the image formats.
Creating Image Formats
Photoshop is where most of the images of todays web are crafted but it doesn’t support these out of the box. They do however have plugins available, AdobeWebM for WebP and a Microsoft Plugin for JPEG XR.
For more information about creating these image formats and how they perform in the browser I encourage you to head over a read the original article Web Site Optimization With Browser-Specific Image Formats
