web-dev-qa-db-ja.com

画像のファイルサイズを小さくするにはどうすればよいですか?

いくつかのwordpressテーマの操作一部の画像ファイルを変更しており、編集したバージョンが元のファイルよりも3〜4倍大きいことがあります(同じ形式で保存)。品質を低下させたくありません。ファイルサイズを小さくしてロードを高速化する方法をいくつか教えてください。

たとえば、現在、Photoshopを使用して、画質スライダーを「8」(10個中)に設定しています。

15
Ryan Elkins

Smashing Magazineは PNG最適化JPG最適化 に関する2つの素晴らしい記事を作成しました。

これらは非常に詳細であり、フォーマットとその実装について知らないかもしれないことを詳細に説明しています。たとえば、JPEGの記事:「PhotoshopでQualityを50未満に設定すると、隣接する8ピクセルブロックの色を平均化するカラーダウンサンプリングと呼ばれる追加の最適化アルゴリズムが実行されることに注意してください」。

どちらの記事も、Photoshopで使用して圧縮率を高めるためにファイルを準備できる特定のテクニックについて説明しています。これは、ファイルの保存後に使用される手法よりもはるかに効果的です。

これらのファイルを保存した後、またはPhotoshopでTweakのソースファイルをレイヤー化するのに十分な運が足りないファイルに、これらのファイルを圧縮するための圧縮がまだあります。

ImageOptim というMacアプリを使用します。彼らのサイトから:

ImageOptimは、最適な圧縮パラメーターを見つけ、不要なコメントとカラープロファイルを削除することで、画像を最適化し、ディスク容量を削減し、読み込みを高速化します。 PNG、JPEG、GIFアニメーションを処理します。

ImageOptimは、さまざまな最適化ツールのGUIを提供します。AdvanceCOMPの AdvPNGOptiPNGPngCrushJpegOptim 、libjpegからのjpegtran、 Gifsicle およびオプションで PNGOUT

ウェブ上で画像を公開するのに最適で(Photoshopで「ウェブに保存」画像を簡単に縮小できます)、MacおよびiPhoneアプリケーションを小さくするのにも役立ちます。

ケーキ。画像(または画像フォルダー)をウィンドウにドラッグすると、圧縮スキームを調整し、不要なメタデータとカラープロファイル情報を削除します(いずれにしても広くサポートされていません。保存する前にカラープロファイルを修正する必要があります。保存および埋め込みは行いません)。

その引用にリンクされているすべてのツールには、PNGOUTを除くWindows/Linux/Macバージョンがありますが、ありがたいことに誰かがOS Xとlinuxに PNGOUT を移植しましたとても思慮深い。 ImageOptimを使用する場合、.appにPNGOUTを除くすべてが含まれるため、PNGOUTポートを取得して/ usr/local/bin(またはどこでも)にドロップし、ImageOptimにその場所を伝えます。

特にPNG画像では、Photoshopの「Webおよびデバイス用に保存」で保存した後でもファイルサイズが30%以上低下するのを見るのは珍しいことではありません。

ヒント:最適化を実行した後、左側のアイコン列でソートし、(X)アイコンが付いたすべての行を選択します(これ以上縮小されていないファイル)。リストからそれらを削除し、チェックマークアイコンがあるすべての画像で再実行します。ファイルサイズがまだ失われている画像があることをほぼ約束できます。すべての(X)アイコンを取得して1日呼び出すまで、並べ替え、選択、削除、再実行を繰り返します。

14
Bryson

Photoshopで写真を保存するときは、File > Save for Web and Devicesを使用することをお勧めします。圧縮レベルで遊んで、視覚的な結果をリアルタイムで見ることができます。写真では、通常、レベル8よりも低く保存しても、素晴らしい結果が得られます。 alt text

10
jessegavin

Yahooの Smush.it をチェックしてみてください。私はそれが非常にうまくいくことがわかった。

4

PNG画像の場合、カラーマップの色数を減らして、インデックス付きPNGとして保存できます。たとえば、128x128ピクセル(非圧縮)のロゴを考えます。実際に使用する色は16色しかないことを想像してください。

  • PNG-32、ピクセルあたり4バイト-65 KB
  • PNG-8、1ピクセルあたり1バイト-16 kB
  • PNG-4、ピクセルあたり4ビット-8 KB

画像の品質を低下させることなく(これは特定の種類の画像にのみ適用されます)、サイズを大幅に縮小できることがわかります。

ボタンとサイトアイコンの場合、それらを1つの画像に集約し、CSSまたはJavaScriptを使用して表示(スプライト)を制御することも検討できます。これにより、各イメージに対して行われるHTTP要求の数が節約されます。

4
dmsnell

他の形式を試してください。

  • アルファやシャドウを含む写真のPNG
  • 小さなカラーパレット(黒/白または黄色のアイコンなど)を含む画像のGIF
3
Aaron

基本的に、画像をさまざまな形式で保存してから、ファイルサイズを確認してください。

JPEGを使用している場合、Paint.netなどのグラフィックエディタで画像の品質を上下に調整できるはずです。通常、画像の50%品質はWebに十分であり、画像をより小さくします。

PNGではこれを行うことはできませんが、JPEGよりもPNGがはるかに大きく、時にははるかに小さいことに注意する価値があります。 PNGは、たとえば白黒の線画などの白黒画像の場合、はるかに小さくなります。

最近のアドバイスは、CSSスプライトを使用してリクエストを減らすことでロード時間を短縮することですが、ここでも実際に取得する画像サイズを調べる必要があります。たとえば、複数の白黒PNGをカラー1つと組み合わせた場合、CSSスプライト画像がコンポーネント画像よりもはるかに大きくなる可能性があります。

2
delete

また、すべてのEXIFデータを確実に削除する必要があります。これはほとんどすべてがWeb上のユーザーとは無関係であり、写真を撮るためにCanon 5Dを使用したこと、そして2.8のFストップ、0.5秒間露光、ISO 160、露光バイアスなし、9mm焦点距離?

このメタデータはすべて画像に重みを追加するものであり、一般的には削除する必要があります。

jessegavin が指摘するように、ほとんどの画像アプリは圧縮の効果のプレビューを表示します。「8」のブランケット設定では、可能な限り最良のトレードオフが得られることはめったにありません。

最後に、 Google Page Speed Firefox/ Firebug プラグインを使用すると、画像サイズをどれだけ縮小できるかを知ることができます(小さなバージョンの表示と保存を含む) 。

2
1
adamcodes

目的の品質レベルを維持しながら画像をできるだけ小さくするために他のすべての提案を行ったら、最小限のHTTPヘッダーで画像を提供するようにWebサイトを構成し、提供しているヘッダーにより、プロキシサーバーとWebブラウザをキャッシュすることで画像を適切に保存できます。

リクエストのサイズを小さくするには、X-Powered-Byのような無駄なヘッダーを送信しないようにWebサーバーが構成されていることを確認してください。また、Cookieを設定しないホスト(例:static.example.com)から画像、CSS、その他の静的コンポーネントなどを提供していることを確認してください。

静的な画像の場合、Expiresヘッダーを遠い未来の日付に設定します。これにより、Webブラウザーと中央のキャッシュプロキシが可能な限り画像を保持します。これの唯一の欠点は、別の画像を表示したい場合は、別のファイル名を使用し、代わりにリンクする必要があることです。ファイル名のバージョン番号(例:myimage_1.pngまたは/images/3/logo.png)は、これを行う効果的な方法です。静的でないページの場合、現実的なExpiresヘッダー(アクセスとX時間)を設定し、Last-ModifiedヘッダーまたはeTagヘッダー(両方ではない)のいずれかを設定して、以前にファイルをダウンロードしたブラウザーがすばやくテストできるようにします画像全体をプルダウンするのではなく、ヘッダーを比較して、現在のバージョンを持っているかどうか。

これらのテクニックについて議論する多くのリソースがありますが、Yahooは コンテンツ配信のパフォーマンスを改善する についての多くのヒントを1か所にまとめて素晴らしい仕事をしています。

1
JasonBirch