Google PageSpeedの画像最適化

完全性に制限はありません。GooglePageSpeedはその証拠です。 これを使用すると、Webページのパフォーマンスに関する詳細なレポートを1分以内に取得できます。 ほとんどの場合、PageSpeedはグラフィックを最適化する必要があることを通知します。 これは最も一般的で最も重要な問題です。







たとえば、Google Developersのスタートページでも、グラフィックを71％圧縮できます。 写真の重量が少ないほど、サイトの読み込みが速くなります。 小さい画像-少ないトラフィック-すべてが高速に動作します。 訪問者は時間を節約します-誰もが幸せです



この資料では、グラフィックスを最適化するための主要なツールが選択されています。

サーバーツール

最も一般的なのはJPG画像です。 基本的なツール：

• Jpegtranは画像を損失なく圧縮し、メタデータを削除します。
  
  
  
  

  jpegtran -copy none -optimize -outfile output.jpg input.jpg
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
  
  
• Imagemagickは、ほぼすべての形式で動作します。 変換ユーティリティを使用すると、圧縮の品質パラメーターを指定できます。これにより、画像サイズを縮小できます。
  
  
  
  

   convert input.jpg -quality 75 output.jpg
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  

PNG形式は、アイコン、ロゴ、低色の画像に使用されます。 最適化ツール：

• pngquantは、 損失のある品質でPNGを最適化するための損失のある圧縮ツールです。 作業の主なアルゴリズムは、使用する色の数を減らすことです。 これにより、品質をほとんど損なうことなくサイズを縮小できます。
  
  
  
  

   pngquant --quality 75 —speed 1 input.png
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
  
  
  
  
• pngcrushは、PNGの別の最適化ツールです。 ロスレス圧縮アルゴリズムを使用します：
  
  
  
  

   pngcrush -reduce -brute in.png out.png
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
  
  

クラウドツール

• JPEGmini 画像を20〜30％完全に圧縮します。 作成者は、品質を損なうことなく一部の画像を5回圧縮できると主張しています。 自動化のためのAPIがあります。
• TinyPNG PNG用の本当にクールな最適化ツール。 品質の顕著な低下なしの非常に良好な圧縮。 APIと大規模な無料パッケージもあります。
• i.onthe.io/google_speed シンプルなコンプレッサー。あらゆるフォーマットで動作します。 1回限りの処理に便利です。

PageSpeedモジュール

Googleは懸命に働き、サイトのパフォーマンスを改善するためにNgnixとApacheのモジュールをリリースしました。 これにより、ダウンロード速度が向上し、写真などのパラメーターのdofigが最適化されます 。 自動的に動作します。 インストールするだけで有効にできます。

 pagespeed on; pagespeed FileCachePath /var/cache/nginx;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モジュールはそれ自体ですべてを実行し、HTMLを解析し、リソースを最適化します。 たとえば、写真をつまんだり、静電気を小さくしたりします。 ページソースでは、最適化されたすべてのリソースのパスが異なります。

直接的なリソース最適化

最適化後、PageSpeedはファイルを新しいパスに保存します。 しかし、JavaScript経由で表示される写真はどうでしょうか？ または、サードパーティのリソースにある写真へのリンクを使用していますか？ ここでIPROが助けになります-キャッシュデスクを離れることなく、またはURLを変更せずにリソースを最適化します。



これを行うには、設定に次の指示を含めるだけです（Nginxの場合）：

 pagespeed InPlaceResourceOptimization on;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アブストラクト

• PageSpeedを使用して、サイト上のグラフィックの問題を見つけます。
• グラフィックが多数ある場合は、サーバー側の最適化ツールを使用します：jpegtran、jpegoptim、ImageMagick、pngquant、pngcrush。
• ワンタイムタスクとAPI接続用のクラウドツール：JPEGmini、tinyPNG、i.onthe.io / google_speed。
• Nginx / ApacheのPageSpeedモジュールはすべての最適化自体を行いますが、ビルドする必要があります。