JPEG 2000, JPEG-XR and WebP in a country of missed opportunities
It's no secret that the first item in site optimization is graphics . Therefore, many large corporations for years puff over the development of optimal formats that in the long term can replace the existing ones and at once bring happiness to both developers and users. But the frog still does not turn into a princess, and nothing interesting happens in the distribution of formats across the network from year to year:
Let's try to understand why JPEG 2000, JPEG-XR and WebP are still herding back, and are they really as cool as stated.
Excellent compression format, supports compression with both loss of quality and without, as well as transparency and progressive compression. Compression is claimed to be 20% better than in regular JPEG , and the main thing is the lack of artifacts with strong compression.
The disadvantage is weak support, and this makes for very poor distribution on the network.
')
Shakes pictures even better and faster than JPEG 2000, lossless is possible, while supporting different degrees of transparency and progressive compression. Compressed supposedly 50 ... 75% better than JPEG, while maintaining decent quality. So stated. At the end of the material we will experiment and check to see if we are bred.
Support - only good old IE 9 and older.
It is a fully open standard. It supports both lossy and lossless, and compresses images by 30 ... 40% better than JPEG. The only negative compared with the previous two - does not support progressive compression. But it is much better supported by browsers and has a brighter future.
Despite the obvious advantages, neither JPEG 2000, nor JPEG-XR, nor WebP is yet to take place among the most popular web formats. Why? Because they can not agree. Look at the support:
Wrong:
So the picture will be displayed correctly only in a friendly browser.
Right:
Only Chrome, Opera, and the latest version of Firefox have built-in support for <picture>, but with the help of picturefill, we adjust to other browsers. After loading the script, add the following to <head>:
Works for WEBP and SVG. For other formats, immediately after the <script> tag, add:
Hooray. The picture is displayed correctly in different browsers.
We decided on a specific example to check who is better at pressing the pictures — JPEG-XR or WebP. To do this, we collected JPEG images from the best Habra publications over the last month, and squeezed each into WebP and JPEG-XR in turn using this and this tool.
The average compression rate for JPEG-XR was 48%, and for WebP - 60%. If we consider each picture separately, then in 80% of cases WebP coped with the task better than JPEG-XR by 10 ... 25%.
Here, for example, the same manul compressed in JPEG-XR and WebP .
As you can see, the data is different from the stated.
Let's try to understand why JPEG 2000, JPEG-XR and WebP are still herding back, and are they really as cool as stated.
JPEG 2000
Excellent compression format, supports compression with both loss of quality and without, as well as transparency and progressive compression. Compression is claimed to be 20% better than in regular JPEG , and the main thing is the lack of artifacts with strong compression.
The disadvantage is weak support, and this makes for very poor distribution on the network.
')
JPEG-XR
Shakes pictures even better and faster than JPEG 2000, lossless is possible, while supporting different degrees of transparency and progressive compression. Compressed supposedly 50 ... 75% better than JPEG, while maintaining decent quality. So stated. At the end of the material we will experiment and check to see if we are bred.
Support - only good old IE 9 and older.
Webp
It is a fully open standard. It supports both lossy and lossless, and compresses images by 30 ... 40% better than JPEG. The only negative compared with the previous two - does not support progressive compression. But it is much better supported by browsers and has a brighter future.
Support
Despite the obvious advantages, neither JPEG 2000, nor JPEG-XR, nor WebP is yet to take place among the most popular web formats. Why? Because they can not agree. Look at the support:
Using
Wrong:
<img src="myimage.webp"/> So the picture will be displayed correctly only in a friendly browser.
Right:
<picture> <source srcset='myimage.jxr' type='image/vnd.ms-photo'> <source srcset='myimage.jp2' type='image/jp2'> <source srcset='myimage.webp' type='image/webp'> <img srcset='myimage-quant.png' alt='myimage'> </picture> Only Chrome, Opera, and the latest version of Firefox have built-in support for <picture>, but with the help of picturefill, we adjust to other browsers. After loading the script, add the following to <head>:
<script async=true src=/path/to/js/picturefill.js></script> Works for WEBP and SVG. For other formats, immediately after the <script> tag, add:
<script async=true src=/path/to/picturefill.js></script> <script async=true src=/path/to/jxr.js></script> <script async=true src=/path/to/jp2.js></script> Hooray. The picture is displayed correctly in different browsers.
Compare JPEG-XR and Webp
We decided on a specific example to check who is better at pressing the pictures — JPEG-XR or WebP. To do this, we collected JPEG images from the best Habra publications over the last month, and squeezed each into WebP and JPEG-XR in turn using this and this tool.
The average compression rate for JPEG-XR was 48%, and for WebP - 60%. If we consider each picture separately, then in 80% of cases WebP coped with the task better than JPEG-XR by 10 ... 25%.
Here, for example, the same manul compressed in JPEG-XR and WebP .
As you can see, the data is different from the stated.
Abstract
- JPEG 2000, JPEG-XR and WebP are innovative formats that have not received proper recognition on the web.
- None of the browsers support at least two of these formats.
- You can come to a common denominator with the help of picturefill.
- Contrary to the stated values, WebP compresses photos on average 10 ... 25% better than JPEG-XR.
Source: https://habr.com/ru/post/258545/
All Articles