ウェブサイト最適化の最初の項目が
グラフィックスであることは秘密ではありません。 そのため、多くの大企業は最適なフォーマットの開発に長年苦しんでおり、将来、
既存のフォーマットを置き換えて、開発者とユーザーの両方を幸せに
することができます。 しかし、カエルはまだお姫様にはなりません。また、ネットワーク上でのフォーマットの配布において、年々興味深いことは起こりません。
なぜJPEG 2000、JPEG-XR、およびWebPがまだ放牧されているのかを理解してみましょう。
JPEG 2000
優れた圧縮形式。品質の損失の有無にかかわらず圧縮をサポートし、透明度とプログレッシブ圧縮もサポートします。 主張されている圧縮は、
従来のJPEGよりも20％優れており、主な特徴は、強力な圧縮によるアーティファクトの欠如です。
欠点はサポートが不十分であるため、ネット上での配布が非常に少なくなることです。
JPEG-XR
JPEG 2000よりもさらに高速かつ高速に写真をシェイクします。
ロスレスオプションは可能ですが、さまざまな透明度とプログレッシブ圧縮をサポートしています。 適切な品質を維持しながら、JPEGよりも50〜75％優れていると思われます。 それはそう述べられています。 材料の終わりに、私たちは繁殖しているかどうかを実験して確認します。
サポートは、古き良きIE 9以前のみです。
これは完全にオープンな標準です。 非可逆と可逆の両方をサポートし、JPEGよりも30〜40％優れた画像を圧縮します。 前の2つと比較して唯一のマイナスは、プログレッシブ圧縮をサポートしていないことです。 しかし
、ブラウザでの
サポートが
はるかに優れており、明るい未来があります。
サポート
その明らかな利点にもかかわらず、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>
Chrome、Opera、Firefoxの最新バージョンのみが組み込みの<picture>サポートを備えていますが、
picturefillを使用すると、他のブラウザーに適応
できます。 スクリプトをロードした後、次を<head>に追加します。
<script async=true src=/path/to/js/picturefill.js></script>
WEBPおよびSVGで動作します。 他の形式の場合、<script>タグの直後に、次を追加します。
<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のどちらの写真の収穫に優れているかを確認する具体的な例を決定しました。 これを行うために、過去1か月間にHabraの最高の出版物からJPEG画像を収集し、それぞれ
このツールと
このツールを使用してWebPとJPEG-XRに順次圧縮しました。
JPEG-XRの平均圧縮率は48％で、WebPの平均圧縮率は60％です。 各画像を個別に検討すると、80％のケースでWebPはJPEG-XRよりも10〜25％優れた結果を出しました。
ここで、たとえば、
JPEG-XRと
WebPで圧縮された同じマヌルネコ。
ご覧のとおり、データは宣言されたものとは異なります。
アブストラクト
- JPEG 2000、JPEG-XR、およびWebPは、Webで適切に認識されていない革新的な形式です。
- これらの形式のうち少なくとも2つをサポートするブラウザはありません。
- picturefillを使用すると、共通点に到達できます。
- 記載されている値に反して、WebPはJPEG-XRよりも平均で10〜25％優れた画像を圧縮します。