WebPでグラフィックを最適化する

_{インターフェース開発者ブログ 今週は何週ですか？ 今の週は何ですか？ 偶数か奇数か}

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ライブラリを作成しました。



使用例：

• キャップに追加
  
  

   <script async src="simple-webp.min.js">
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• 標準画像の代わりに、テンプレートで作成
  
  

   <noscript data-webp><img src="example.png" alt=""></noscript>
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

ライブラリは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はを使用することを提案しました.