Web Perfomance Todayによると、2015年の平均ページウェイトは
1109 KBです。 予測によると、2018年までに約
2 MBになります。 画像のダウンロードに
は、合計ページ読み込み時間の平均
64％（711 KB）がかかります。 したがって、グラフィックを使用してページの読み込み速度の最適化を開始する必要があります。
グラフィックは次の2つの方向で最適化されます。
クエリを減らすために、
base64介したスプライトとグラフィックの挿入
base64ます。 グラフの重みを減らすために圧縮されます（品質の低下の有無にかかわらず）。
残念ながら、圧縮により品質が低下し、サイズがわずかに増加することがよくあります。 おそらくそれが、2010年にGoogleが独自の画像圧縮形式である
WebPを作成した理由です。
サポート
Can I Useを信じてい
ます 。これは、WebPが世界で
64.77 ％ 、ロシアで
56.22％でサポートされていることを示しており、使用する理由がわかります。 ブラウザのうち、Chrome、Opera、Opera Mini、Androidブラウザ、Chrome for Androidです。
圧縮のテスト
WebPを使用する前に、これがどれほど効果的かを確認しましょう。 12個の
pngおよび
jpg画像をダウンロードしました。 そして、最適化前後のサイズを比較しました：
- 元のファイル-6.7 MB
- 圧縮後-5.4 MB
- オリジナルWebP- 1.6 MB
- WebP形式での圧縮後-1.8 MB
サイズの増加は
3.8 MB 、つまり
70.3％でした。 画像は平均
64％であるため、ブラウザーがWebPをサポートしているユーザーの場合、ページの読み込み速度は
約44.8％増加します。
WebPを使用する
imgタグと
cssプロパティ
backgroundを介して新しい形式を使用できます。 もちろん、この形式をサポートしていないユーザーについては忘れません。
WebPサポートを決定するには、
Modernizrまたは
スニペットを使用できます。 フォールバックの書き込み後：
.no-webp .logo { background-image: url(logo.png); } .webp .logo { background-image: url(logo.webp); }
img介して
img 2つの画像を作成し、そのうちの1つを非表示にすることもできます。 しかし問題は、ブラウザーがPNGとWebPの両方を引き続き要求することであり、逆にページの読み込み時間が長くなることです。
もう1つの方法は、WebP形式の画像を要求し、それが読み込まれない場合にPNGを表示することです。
<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">
この方法にも同様の問題があります。ブラウザがWebPをサポートしていない場合、各画像に対して2つのリクエストを行うため、ダウンロード時間が長くなります。
別のオプション
ネイティブソリューションが見つからなかったため、2つの要求の問題を解決する小さな
シンプルなwebpライブラリを作成しました。
使用例：
ライブラリはWebP形式のサポートをチェックし、
webp/no-webpを
html追加/削除し
webp/no-webpブラウザがWebPをサポートしている場合、ライブラリは画像の拡張子を
.webpて読み込みます。 それ以外の場合、ブラウザは元の形式で画像をロードします。
たとえば、ブラウザがWebPをサポートしている場合、
example.png代わりに
example.webp example.pngロードされ
example.png 。サポートされていない場合は、
example.png example.pngロードされ
example.png 。
画像の読み込みを防ぐために
Noscript必要あり
Noscript無効になっている場合でも、ユーザーには画像が表示されます。
ライブラリは
Githubで公開されており、非圧縮形式で2 KBを使用します。
PS最適化の例では、OS X用のアプリケーション-ImageOptimを使用しました。 WebP-WebPonoizeへの変換用。
PSS リンクを使用して比較した画像を含むアーカイブをダウンロードします。
UPD＃1 コメントでは、 VEGは不正に実施されたテストを指摘し、Mozilla
2013および
2014のテストへのリンクを提供しました。 彼らは、WebPと他の形式の圧縮レベルがほぼ同じレベルであることを示しています。 WebPの利点は、強力な圧縮により、画像の見栄えが良くなることです。
UPD＃2 NOSCRIPTを使用する方法には、SEOに大きな欠点があります。 画像は索引付けされません。
コメントで pepelsbeyはを使用することを提案しました
.