GoogleのPage Speedロスレス画像圧縮はどのように機能しますか？

WebサイトでFirebug / Firefox用のGoogleのPageSpeedプラグインを実行すると、画像を可逆圧縮できるケースが提案され、この小さい画像をダウンロードするためのリンクが提供されます。

例えば：

• http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpgを可逆圧縮すると、33.5KiBを節約できます（85％削減）。
• ロスレスでhttp://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpgを圧縮すると、18.5KiB（77％削減）を節約できます。
• http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.pngを可逆圧縮すると、262B節約できます（11％削減）。
• http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.pngを可逆圧縮すると、91Bを節約できます（51％削減）。
• http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mmを可逆圧縮すると、61Bを節約できます（5％削減）。

これは、JPGとPNGの両方のファイルタイプに適用されます（私はGIFや他のファイルをテストしていません）。

Flickrのサムネイルにも注意してください（これらの画像はすべて75x75ピクセルです）。かなり大きな節約になります。これが本当に素晴らしいとしたら、Yahooがこのサーバー側をライブラリ全体に適用して、ストレージと帯域幅の負荷を削減しないのはなぜですか。

Stackoverflow.comでさえ、ごくわずかな節約になります。

• http://sstatic.net/stackoverflow/img/sprites.png?v=3を可逆圧縮すると、1.7KiBを節約できます（10％削減）。
• http://sstatic.net/stackoverflow/img/tag-chrome.pngを可逆圧縮すると、11B節約できます（1％削減）。

PageSpeedは、Photoshopの「Web用に保存」機能を使用して作成したPNGファイルをかなり適切に節約することを提案しています。

だから私の質問は、画像を大幅に削減するために画像にどのような変更を加えているのですか？ファイルタイプによって回答が異なると思います。これは本当にJPGのロスレスですか？そして、彼らはどうやってPhotoshopを倒すことができますか？私はこれに少し疑わしいでしょうか？

技術的な詳細に本当に興味がある場合は、ソースコードを確認してください。

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

PNGファイルの場合、試行錯誤的なアプローチでOptiPNGを使用します

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

4つの組み合わせすべてを適用すると、最小の結果が保持されます。そのような単純な。

（注：optipngコマンドラインツールでも、から提供-o 2した場合はそれが行われます-o 7）

JPEGファイルの場合、次のオプションを指定してjpeglibを使用します。

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

同様に、WEBPを使用して圧縮されlibwebpをこれらのオプションを使用して：

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

ロスレスで最小フォーマットに変換するために使用されるimage_converter.ccもあります。

私はjpegoptimJPGファイルを最適化するために使用し、optipng最適化とPNGファイルのます。

を使用している場合bash、ディレクトリ内のすべてのJPGを可逆的に（再帰的に）最適化するコマンドは次のとおりです。

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

あなたは追加することができます-m[%]しjpegoptim、たとえば、非可逆圧縮JPG画像に：

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

ディレクトリ内のすべてのPNGを最適化するには：

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2はデフォルトの最適化レベルです。これをからo2に変更できますo7。最適化レベルが高いほど、処理時間が長くなることに注意してください。

いくつかのテクニック/ツールについて説明しているhttp://code.google.com/speed/page-speed/docs/payload.html#CompressImagesをご覧ください。

これは、エンコーダーのCPU時間を圧縮効率と交換することの問題です。圧縮は、より短い表現を検索することであり、検索を難しくすると、より短い表現が見つかります。

また、PNG24 + aの代わりにPNG8 + a、JPEGの最適化されたハフマンテーブルなど、画像フォーマット機能を最大限に活用するという問題もあります。

Photoshopは、Web用に画像を保存する際にそうするために一生懸命努力することはありません。

見る

• ImageOptim（ロスレス）および
• ImageAlpha小さいPNGファイル（のための（非可逆）、それがどのように動作するかハイレベルの記述）および
• JPEGmini / MozJPEG（非可逆）により優れたJPEGコンプレッサー。

WindowsでPageSpeedのJPG圧縮結果を複製するには：

私は、ページスピードはあなたがで得ることができるjpegtran Windowsバージョンの使用とまったく同じ圧縮結果を得ることができたwww.jpegclub.org/jpegtranを。DOSプロンプトを使用して実行可能ファイルを実行しました（[スタート]> [CMD]を使用）。PageSpeed圧縮とまったく同じファイルサイズ（バイト単位）を取得するために、ハフマン最適化を次のように指定しました。

jpegtran -optimize source_filename.jpg output_filename.jpg

圧縮オプションの詳細については、コマンドプロンプトで次のように入力してください：jpegtran

または、Firebugの[PageSpeed]タブから自動生成された画像を使用するには：

Pumbaa80のアドバイスに従って、PageSpeedの最適化されたファイルにアクセスできました。うまくいけば、ここのスクリーンショットは、FireFox環境をさらに明確にするものです。（しかし、Chromeでこれらの最適化されたファイルのローカルバージョンにアクセスできませんでした。）

そして、Adobe Bridgeと正規表現を使用して乱雑なPageSpeedファイル名をクリーンアップするには：

FireFoxのPageSpeedは、最適化された画像ファイルを生成することができましたが、次のような単純な名前に変わって名前も変更されました。

nice_picture.jpg

に

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

これはよくある不満のようです。手ですべての写真の名前を変更したくなかったので、正規表現とともにAdobe Bridgeの名前変更ツールを使用しました。正規表現を受け入れる他の名前変更コマンド/ツールを使用することもできますが、PageSpeedの問題に取り組んでいるほとんどの人がAdobe Bridgeをすぐに利用できると思います。

1. Adobe Bridgeを起動する
2. すべてのファイルを選択（コントロールAを使用）
3. [ツール]> [名前の一括変更（またはControl Shift R）]を選択します
4. 「プリセット」フィールドで「文字列置換」を選択します。[新しいファイル名]フィールドに「文字列の置換」と表示され、その後に「元のファイル名」が表示されます。
5. 「正規表現を使用する」というチェックボックスを有効にします

6. 「検索」フィールドに、正規表現を入力します（これにより、右端のアンダースコア区切りから始まるすべての文字が選択されます）。

   _（？！。* _）（。*）\。jpg $

7. 「置換」フィールドに次のように入力します。

   .jpg

8. 必要に応じて、[プレビュー]ボタンをクリックして、提案されたバッチの名前変更結果を確認し、次に閉じます。

9. [名前を変更]ボタンをクリックします

処理後、Bridgeは影響を受けなかったファイルの選択を解除することに注意してください。すべての.pngファイルをクリーンアップする場合は、すべての画像を再選択し、上記の構成を変更する必要があります（「jpg」ではなく「png」の場合）。上記の設定を「Clean PageSpeed jpg Images」などのプリセットとして保存して、後でファイル名をすばやくクリーンアップすることもできます。

構成のスクリーンショット/トラブルシューティング

問題が発生した場合、一部のブラウザーでは上記のRegEx式が適切に表示されない可能性があります（エスケープ文字のせいです）。構成のスクリーンショット（これらの手順とともに）については、以下を参照してください。

Adobe Bridgeのバッチ名前変更ツールを使用して、乱雑なファイル名を持つ最適化されたPageSpeed画像をクリーンアップする方法

私の意見では、外出先でほとんどの画像フォーマットを効果的に処理するための最良のオプションはトリミングです。optipng、pngcrush、advpng、jpegoptimを効果的に利用します画像形式に基づいてをほぼ完全な可逆圧縮を実現します。

コマンドラインを使用すれば、実装はかなり簡単です。

sudo apt-get install trimage    
trimage -d images/*

そして出来上がり！:-)
さらに、手動で実行するための非常にシンプルなインターフェースもあります。

（このブログから）OptiPNGを使用してフォルダーの下の画像を再帰的に最適化する非常に便利なバッチスクリプトがあります。

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

ワンライン！

バッチ処理を探している場合は、Xserverを使用できないとトリミングの不平を言うことに注意してください。その場合は、bashまたはphpスクリプトを記述して、次のようにします。

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

ニーズに合わせてオプションを変更します。

ウィンドウの場合、簡単にアクセスできるようにいくつかのドラッグアンドドロップインターフェイスがあります。

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

PNGファイルの場合、これは私の楽しみのために見つけたもので、明らかにこのGIUにラップされた3つの異なるツールです。ドラッグアンドドロップするだけです。

https://pnggauntlet.com/

時間はかかりますが、1MBのpngファイルを圧縮してみてください。この圧縮の比較にCPUがどれだけ費やされているかに驚いています。画像は100通りに圧縮されているようで、最高のものが勝つ：D

JPG圧縮については、カラープロファイルとすべての追加情報を削除するのは危険だと感じました。ただし、誰もがそうしている場合は、ビジネス標準なので、自分でやっただけです：D

今日、WPインストールで5500ファイルに113MBを保存したので、間違いなく価値があります！