JPEG 2000, JPEG-XR и WebP в стране упущенных возможностей

Ни для кого не секрет, что первым пунктом в оптимизации сайтов стоит графика. Потому многие крупные корпорации годами пыхтят над разработкой оптимальных форматов, в перспективе способных заменить существующие и разом осчастливить и разработчиков, и пользователей. Но лягушка все никак не превратится в царевну, и в распределении форматов по сети из года в год ничего интересного не происходит:

Попробуем разобраться, почему JPEG 2000, JPEG-XR и WebP все еще пасут задних, и действительно ли они такие классные, как заявлено.

JPEG 2000

Отличный формат сжатия, поддерживает компрессию как с потерями качества, так и без, а также прозрачность и прогрессивное сжатие. Заявлено сжатие на 20% лучше, чем в обычном JPEG, и при этом главной фишкой является отсутствие артефактов при сильной компрессии.
Недостаток – слабая поддержка, и от этого очень скудное распространение в сети.

JPEG-XR

Жмет фотки еще лучше и еще быстрее, чем JPEG 2000, возможен вариант lossless, при этом поддерживает разные степени прозрачности и прогрессивное сжатие. Сжимает якобы на 50…75% лучше, чем JPEG, при этом сохраняя приличное качество. Так заявлено. В конце материала поэкспериментируем и проверим, не разводят ли нас.
Поддержка — только старым добрым IE 9 и старше.

WebP

Является полностью открытым стандартом. Поддерживает как lossy, так и lossless, и компрессит картинки на 30…40% лучше JPEG’а. Единственный минус по сравнению с двумя предыдущими – не поддерживает прогрессивное сжатие. Зато гораздо лучше поддерживается браузерами и имеет более светлое будущее.

Поддержка

Не смотря на очевидные преимущества, ни JPEG 2000, ни JPEG-XR, ни WebP пока не светит занять место среди самых популярных форматов сети. Почему? Потому что договориться не могут. Посмотрим на поддержку:

Использование

Неправильно:

<img src="myimage.webp"/>

Так картинка правильно отобразится только в дружественном браузере.

Правильно:

<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>

Встроенную поддержку &ltpicture> имеют только Chrome, Opera и последняя версия Firefox, но с помощью picturefill подстраиваемся и под другие браузеры. После загрузки скрипта добавьте к &lthead> следующее:

<script async=true src=/path/to/js/picturefill.js></script>

Сработает для WEBP and SVG. Для остальных форматов сразу после тега &ltscript> добавляем:

<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>

Ура. Картинка корректно отобразится в разных браузерах.

Сравниваем JPEG-XR и Webp

Мы решили на конкретном примере проверить, кто же лучше жмет картинки — JPEG-XR или WebP. Для этого мы собрали JPEG-картинки из лучших публикаций Хабры за последний месяц, и каждую поочередно сжали в WebP и в JPEG-XR с помощью этого и этого инструментов.
Средний показатель сжатия для JPEG-XR составил 48%, а для WebP — 60%. Если рассматривать каждую картинку отдельно, то в 80% случаев WebP справился с задачей лучше, чем JPEG-XR на 10...25%.

Вот, например, один и тот же манул, сжатый в JPEG-XR и в WebP.

Как видим, данные отличаются от заявленных.

Конспект

• JPEG 2000, JPEG-XR и WebP — инновационные форматы, не получившие должного признания в вебе.
• Ни один из браузеров не поддерживает хотя бы два из этих форматов.
• К общему знаменателю можно прийти с помощью picturefill.
• Вопреки заявленным значениям, WebP сжимает фотки в среднем на 10...25% лучше, чем JPEG-XR.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.