ウェブサイトの画像は多くの議論を集めており、正当な理由があります:HTTPアーカイブによると、デスクトップコンピュータ 上のウェブサイトのページの重みの61% は画像であり、その割合はモバイルデバイスで65%に上昇します。 さらに、画像のサイズが大きくなるにつれて、画像のバイト数は平均ウェブページで前年比で30%以上増加しています。
15年以上前に標準のJPEG、GIF、PNGフォーマットが市場に投入されて以来、画像フォーマットのサポートはあまり進んでいない。 理由は単純です:異なるブラウザタイプ間で新しい画像フォーマットをサポートするのは難しいです。 しかし、ここ数年で2つの新しい画像フォーマットが現場に来ており、最近では画像を最適化する方法として牽引力を得始めました:WebP(Googleが掲げる)とJPEG XR(マイクロソフトの支援を受けた)。。
ウェブP対JPEG XR
どちらも過去15年間の重要な技術の進歩を引き出し、それぞれがそのユニークな強みを持っています。 各フォーマットは、可逆圧縮と完全な透明度をサポートし、JPEG XR はイメージのプログレッシブ レンダリングをサポートします。 これらの新しいフォーマットを利用するウェブサイトでは、同じ品質のJPEGと比較して、多くの場合 、バイトの25%から50%を節約し 、重要な結果が見られます。
両方の最大の欠点は少し遅く、ブラウザのサポートは少し遅いです:WebPは、例えば、Chrome、Opera、および一部の新しいAndroidデバイスでのみサポートされています。 JPEG XR は IE 10+ で完全にサポートされており、IE 9 ではサポートが制限されています。 どちらもFirefoxとサファリのサポートを持っていません。 これらのブラウザを利用していない多くのユーザーにとって、ウェブサイトの画像が壊れているように見えます。
フェイスブックサポートウェブP
これらの新しいフォーマットの1つの大きな公開テストは、昨年の春にFacebookがWebPを実装したことでした。 FacebookはWebP対応のブラウザを使用して画像をユーザーに配信することができましたが、ユーザーが写真を保存、編集、または再共有してアクションを実行しようとしたときに問題が発生しました。 あるイライラしたユーザーは、「このモンスターを無効にするにはどうすればよいですか?」
イメージフォーマットの実装に関するヒント
Web サイトは、これらの新しい画像最適化テクノロジから大きな恩恵を受けることができますが、この方向に進む際には、いくつかのことを心の奥に置く必要があります。
- 人々がウェブサイトの画像をどのように使用するのかを理解する. Facebookの場合、写真のダウンロード、保存、編集、共有はFacebookの視聴者のかなりの割合で行われているため、ユーザーは明らかに考慮されませんでした。
- 品質正規化は重要です。 複数の損失形式を使用する場合は、品質設定の違いを考慮する必要があります。 類似の品質劣化を生じる品質設定の選択は、SSIM(構造的類似性)のようなアルゴリズムを使用して行うことができます。
- WebP および JPEG XR は、ブラウザサポートがある場合にのみ使用します。 ブラウザのサポートにクロスオーバーがないため、この方向に移動しようとしているウェブサイトが両方を最大限のカバレッジにサポートすることは理にかなっているかもしれません。
これらの新しい画像最適化フォーマットを使用することには多くの利点があり、上記の点を考慮すると、Webサイトのパフォーマンスとバイトの節約が大幅に改善されます。 さらにブラウザのサポート – 特にFirefoxとSafariから – さらにポットを甘くします。
