web-dev-qa-db-ja.com

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

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

例えば：

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

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

Stackoverflow.comでさえ、わずかな節約を意味します。

PageSpeedが、Photoshopの「Web用に保存」機能を使用して作成したPNGファイルのかなりの節約を示唆しているのを見てきました。

私の質問は、画像を大幅に減らすために画像にどのような変更を加えているのですか？ファイルタイプごとに異なる答えがあると思います。これはJPGにとって本当にロスレスですか？そして、彼らはどのようにPhotoshopを打ち負かすことができますか？これについて少し疑わなければなりませんか？

compressionimagingpagespeedgoogle-pagespeed
136
Drew Noakes

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

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つの組み合わせすべてが適用されると、最小の結果が保持されます。そのような単純な。

（N.B .: -o 2から-o 7を指定すると、optipngコマンドラインツールもそれを行います）

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 もあります。これは、最小の形式に可逆的に変換するために使用されます。

82
user123444555621

jpegoptim を使用してJPGファイルを最適化し、 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に変更できます。最適化レベルが高いほど、処理時間が長くなることに注意してください。

46
Hoang Huynh

http://code.google.com/speed/page-speed/docs/payload.html#CompressImages をご覧ください。テクニック/ツールの一部が説明されています。

29
Amber

エンコーダーのCPU時間と圧縮効率のトレードの問題です。圧縮とは、短い表現を検索することです。より厳密に検索すると、短い表現が検索されます。

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

Photoshopは、Web用に画像を保存するときに実際にそれをしようと努力しているわけではありません。

見る

15
Kornel

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

www.jpegclub.org/jpegtran で取得できるjpegtranのWindowsバージョンを使用して、PageSpeedとまったく同じ圧縮結果を得ることができました。 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. [ツール]> [バッチ名の変更]（またはShift Rを制御）を選択します。
  4. [プリセット]フィールドで[文字列の置換]を選択します。 [新しいファイル名]フィールドに「文字列の置換」と「元のファイル名」が表示されます。
  5. 「正規表現を使用」というチェックボックスを有効にします

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

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

  7. [置換]フィールドに次を入力します。

    。jpg

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

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

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

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

トラブルが発生した場合、一部のブラウザでは上記のRegEx式が適切に表示されない可能性があります（エスケープ文字が非表示になっています）。

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

13
Thor

私の意見では、ほとんどの画像形式を効果的に処理する最適なオプションは、 trimage です。画像形式に基づいてoptipng、pngcrush、advpng、jpegoptimを効果的に利用し、ほぼ完全なロスレスを実現します圧縮。

コマンドラインを使用すれば、実装は非常に簡単です。

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

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

10
Rohan

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

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

ワンライン！

2
Digs

バッチ処理を探している場合、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 {} \;");
?>

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

0
Nate

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

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

PNGファイルについては、このGIUでラップされた3つの異なるツールを楽しみながら見つけました。ドラッグアンドドロップするだけで、自動的に実行されます。

https://pnggauntlet.com/

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

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

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

0
Kim Steinhaug