138

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

例えば：

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

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

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

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

だから私の質問は、画像を大幅に減らすために、画像にどのような変更を加えているのかということです。ファイルの種類によって答えは違うと思います。これはJPGにとって本当にロスレスですか？そして、どのように彼らはPhotoshopを打ち負かすことができますか？私はこれを少し疑うべきですか？

4

9 に答える 9

83

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

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もあります。

于 2012-12-05T06:19:30.887 に答える
46

jpegoptimJPG ファイルのoptipng最適化と PNG ファイルの最適化に使用します。

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

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

非可逆圧縮の JPG 画像に追加できます。次に例を示し-m[%]ます。jpegoptim

 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。最適化レベルが高いほど、処理時間が長くなることに注意してください。

于 2013-11-16T15:37:38.250 に答える
29

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

于 2011-03-27T19:07:20.647 に答える
15

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

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

Web 用に画像を保存する場合、Photoshop はそれほど努力しないので、Photoshop に勝るツールがないことは驚くべきことではありません。

見る

于 2011-12-15T01:16:18.873 に答える
13

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

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

jpegtran -optimize source_filename.jpg output_filename.jpg

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

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

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

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

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

nice_picture.jpg

の中へ

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

私はこれが一般的な苦情のように思われることを発見しました。すべての写真の名前を手動で変更したくなかったので、正規表現とともにAdobeBridgeの名前変更ツールを使用しました。正規表現を受け入れる他の名前変更コマンド/ツールを使用することもできますが、PageSpeedの問題を扱うほとんどの人がAdobeBridgeをすぐに利用できると思います。

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

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

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

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

    .jpg

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

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

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

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

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

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

于 2012-12-23T10:15:43.533 に答える
10

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

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

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

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

于 2014-02-27T00:36:49.597 に答える
2

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

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

ワンライン！

于 2015-07-08T19:08:23.503 に答える
0

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

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

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

https://pnggauntlet.com/

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

JPG 圧縮に関しては、カラー プロファイルとすべての追加情報を削除するのはリスクが高いと感じています。

今日、WP インストールで 5500 個のファイルを 113MB 節約できたので、間違いなくその価値があります。

于 2016-10-12T15:10:35.623 に答える
0

バッチ処理を探している場合は、Xserver avail がないとトリマージュが文句を言うことに注意してください。その場合は、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 {} \;");
?>

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

于 2014-10-27T02:26:28.197 に答える