Web用のJPEG最適化 - 究極のガイド

画像圧縮はすべてのネイティブメディアフォーマットに見られます。ただし、GIF、PNG、およびJPEGの違いは どうやって 情報は圧縮されて画面に表示されます。 Web上で公開されている優れた画像メディアを構成するためのヒントは非常にたくさんありますが、それでも多くのデザイナーはまだいくつかの基本を理解していません。.

このガイドでは、適切なJPEG圧縮のためのいくつかのアイデアを共有したいと思います。あなたはあなたの画像を最適化してウェブページのロード時間を減らしながらもまともなレベルの品質を保ちたいと思います。ファイルサイズと画面描写のバランスを見つけることがすべてです。デザイナーが従うべき完璧な解決策はありません。それはいくらかの最初の練習を取ります、しかし、一旦あなたがJPEG圧縮を理解したらそれは将来のウェブサイトを開発することがはるかに容易になります.

常に100％の節約を避ける

JPEG画像を100％の品質で保存することはほとんどありません。この意志 ではない 可能な限り生産する “最適化” 画像。それは実際にあなたのファイルサイズを非常に大きくする最適化限界式を通して計算します。 90％または95％の品質と比較しても、ファイルサイズが大幅に減少します。.

ほとんどの場合、90％をはるかに下回る品質の画像を保存することをお勧めします。 Photoshopで[Web用に保存]ダイアログボックスを開くと、プリセット値が表示されます。以下に可能なJPEG値を追加しました - 固有の命名規則に注意してください.

低い - 10％
中 - 30％
高い - 60％
すごく高い - 80％
最大 - 100％

Adobe Photoshopでも60％の画質が「高」と見なされます。多くのWeb開発者は、50％ - 70％の範囲で保証するでしょう。.

低すぎる?

最適化のために選択した値は、手元のプロジェクトに完全に依存します。どの種類のグラフィックが最高のファイルサイズを出力するかを考慮する必要があります。これらは本当に圧縮が必要なものです。.

私は、30％以下では基本的な画質を本当に削り取っていると主張するでしょう。他のデザイナーは、 “限定” 最適値を減らすこと。しかし、ここでの最良のアドバイスは、異なる設定を試して、何が最も良く見えるかを見ることです。 Web用にJPEG画像を最適化するいくつかのテストスタディでうまくいかないことはありません。.

圧縮オプション

最初に、互いに逆の用語である2つの用語「圧縮」と「品質」を明確にします。つまり、JPEGを40％の圧縮率で保存した場合、60％の品質になります（圧縮なしの最大100％の品質と比較して）。.

これらは利用するための最も基本的なオプションです - そしてウェブのために保存するときそれらは十分であるべきです。一般ユーザーは、それほどカスタマイズを深めることはありません。サブサンプリングは、RGB画像をYCbCr（輝度、クロマブルー、クロマレッド）に変換する場合、より複雑な問題になります。.

（画像ソース：カラモンロー）

の輝度また、JPEG圧縮では、明るさの設定は常に最高の値に保たれます。別のチャンネルでこの明るさの値を使用すると、赤と青の個々の色の値を最適化するのが簡単になります。これはまたとして知られています クロマサブサンプリング. 手を汚すことに興味を持っているデザイナーは、この圧縮アルゴリズムについてもう少し読んでみたいと思うでしょう。 JPEG画像に特化したクロマサンプリングに関するこの素晴らしいブログ記事をチェックしてください。.

（画像ソース：Derek Hatfield）

興味深い補足として、Adobe Photoshopは圧縮のために常にサブサンプリングを利用するわけではありません。を介して保存された画像 “Web用に保存” ダイアログは50％の品質値以下の彩度サブサンプリングのみを使用します.

異なるWebメディア

Webにはさまざまな種類の画像メディアもあります。写真、アイコン、ボタン、バッジ、その他多数のグラフィックを持つことができます。しかし、ボタンと写真の品質を比較しても意味がないことは注目に値します。.

写真や詳細画像を使用する場合は、圧縮率の低い別のJPEGファイルへのリンクを検討してください。それからあなたはより高い圧縮率とはるかに小さいファイルサイズであなたのサイトにサムネイルを設定することができます。唯一の欠点は、メディアギャラリーに2セットの画像を提供する必要があるということです。あなたがウェブサイトを通して縫った多くの異なるグラフィックに注目して、それぞれのために個々に最適化技術を考慮してください.

グラフィックモデルの計画

あなたは十分に簡単に調べられるように整理されたファイルシステムを持ちたいです。 FlickrやPicasaなど、一部のウェブマスターは自分の写真をウェブ上の別の場所にホストすることを選択します。まだあなたはまだ画像サイズを縮小するためにいくつかの圧縮ツールを使用したいと思うでしょうがあなたのサイト上でそれらを表示する方法は異なります。これは、インターネットへのアクセスを備えたモバイル機器の普及により特に顕著です。.

私はあなたのフロントエンドコードで起こるであろうJavaScript JPEGエンコーディングについて議論している興味深い記事を見つけました。高品質の画像ギャラリーにはそれほどメリットはありませんが、モバイルビジターにとっては読み込み時間が短縮される可能性があります。画像をホットリンクしたりサムネイルを動的に再クロップするときにも便利なテクニックです。.

チェックアウトするためのもう一つの手の込んだツールはYahoo!です。 Smush.itこれはブラウザベースのWebアプリで、画像をアップロードすることができ、Smush.itはファイルサイズを最適化するために不要な余分なバイトをすべて削除します。 100％ロスレスで、画質はまったく低下しません。また、Webサイトやサードパーティのサーバーで画像をホストしている場合は、直接URLから画像を一括アップロードすることもできます。.

追加ツール

画像操作に関して試すべきたくさんのソフトウェアがあります。あなたが各ファイルのサイズを削り取ることができるどんな余分なバイトも重要です。そこにはたくさんのソフトウェアはありませんが、利用可能なオプションは素晴らしいです.

IrfanView

Windows用のこの無料ソフトウェアでは、大きな画像を任意のセットで表示および最適化できます。それは複数のディレクトリ内の画像からのバッチ変換をサポートしているので、私は特にこのソフトウェアが好きです。あなたは自動的に何百ものJPEG画像に同じ機能を適用することができます.

さらに優れているのは、サードパーティの開発者によるプラグインのサポートです。そのような例の1つがRIOT（Radical Image Optimization Tool）です。このプラグインはGIMPのような他の同様のオープンソースのグラフィックエディタのために働きます。各画像の圧縮パラメータを手動で調整できるデュアル画像ビューがあります。.

ソフトウェアのサポートは素晴らしく、RIOTの機能はとても使いやすいです。画像圧縮とともに、EXIFやAdobe XMPなどの追加のメタデータを削除することもできます。データのこれらの余分なビットはあなたの総ファイルサイズに追加することができますそしてそれらはめったに必要とされません.

Mac用ImageOptim

あなたがOS Xを実行していて、強力な圧縮アプリを必要とするなら、もう探す必要はありません。 ImageOptimはWeb用に画像を圧縮する強力なツールです - 時にはPhotoshopよりも優れています.

アプリケーション全体がドラッグアンドドロップ機能をサポートしているため、大量の画像を簡単に最適化できます。ターミナルとセットアップシェルスクリプトからも同様にコマンドを実行できます。詳細および技術サポートについては、Googleのコードページをご覧ください。.

ピクセル化されたJPEG画像をOperaでレンダリングする際の最新の1.3.3安定版リリースに関するいくつかの小さな問題がありました。 Chrome、Safari、Firefox、およびOpera（そしておそらくIE）の4つの主要ブラウザで、最適化されたすべての画像を確認してください。何かが歪んで見える場合は、少しきれいに変換ImageOptim 1.3.0をダウンロードしてみてください.

役に立つリソース

JPEG 101：JPEGのクラッシュコースガイド
WordPress用のJPG画像を保存するための正しい圧縮設定
賢いJPEG最適化技術
Webサイト用にJPEG画像を最適化する方法
画像圧縮について知る必要があるすべて

結論

あなたは品質と実体の間の適切なバランスを見つける必要があるのでJPEG圧縮は巧妙です。現代のインターネット接続速度が速くなっても、Webページのサイズを縮小する必要があります。 jQueryやTypekitのような新しいフレームワークは、たとえ最適化されたデザインであっても、数百キロバイトの追加キロバイトを達成することができます。.

私はまだ私の最高の画像編集ソフトウェアとしてAdobe Photoshopを推薦しなければなりません。 JPEG最適化プロセスにおそらくよりよい他の例があります。しかし、Webデザイナーは、あまり知られていないオープンソースソリューションでも成功することができます。あなたがJPEG圧縮に関する同様のトリックやアイデアを持っているならば、以下のポストディスカッションエリアで我々と共有してください.