World Wide Web用のJPEGファイルの圧縮と最適化

By ネイサンE.マルパス, Last updated: August 27, 2019

私はグラフィックデザイナーで、毎日複数の画像や画像フォーマットを扱っています。私がしていることの1つは、大きな画像ファイルを操作してそれらを編集することです。最も使用されているファイル形式の1つはJPEGです。今、私はどのように最適化する方法についてもっと知りたいです。 JPEGを圧縮 特にWeb用です。お客様はそれを手伝ってくれる？

〜匿名グラフィックデザイナー

パートI：はじめにパートII：百パーセント（100％）で節約するのを止めなさいパートIII：圧縮のためのオプションパートIV：Web用のさまざまなメディアタイプパートV：JPEG画像を圧縮するためのツールパートVI：結論

パートI：はじめに

画像圧縮は今日非常に人気のある概念です。画像はビジネス、仕事、そして当社の個人的な生活においても重要な役割を果たしてきたので、人生のほとんどあらゆる面でそれが使われています。画像圧縮は、GIF、JPEG、PNGなどのさまざまなファイル形式で行うことができます。

これらの画像ファイル形式の違いは、画面内での圧縮方法と表示方法です。インターネット内で優れたメディアを公開する方法を説明するガイドはたくさんあります。しかし、多くのデザイナーは、イメージやメディア全般に関してはまだ基本を理解していません。

この記事では、JPEGファイルの圧縮を正しく実装するための方法について説明します。画像の品質をある程度維持しながら、Webページの読み込み時間を短縮するには、画像を最適化して圧縮する必要があります。

ここでの秘訣は、ファイルのサイズとその画面上の描写のバランスを見つけることです。完璧な解決策はありません。慣れるまでには少し練習が必要です。しかし、お客様がもっと知っていたら JPEGファイルの圧縮長期的には、Webサイトの開発が容易になります。
JPEG画像を圧縮

パートII：百パーセント（100％）で節約するのを止めなさい

JPEG画像を100パーセント（100％）の品質で保存しないでください。もちろん、これによって画像が最適化されることはありません。画像の品質が高いほど、ファイルサイズは大きくなります。

何かをチェックしてください。 90％から95％の品質で画像を保存しようとすると、ファイルサイズが大幅に縮小されます。 90％より低い品質で画像を保存しなければならない場合があります。

お客様がPhotoshopを使っているなら、お客様は運がいいです。「Web用に保存」ダイアログボックスをチェックアウトしようとすると、Photoshopでは実際にはさまざまなプリセット値から選択できることがわかります。 JPEGの可能な値は以下の通りです：

*最高品質は100％です。

*非常に高画質は80％です。

*高品質は60％です。

*中品質は30％です。

*最後に、低品質は10％です。

Adobe Photoshopは60％を高画質の画像と見なしています。 Web開発者にとっては、50％に対して70％に固執することが最善です。これは、Webサイトを開発するときに保証できる安全な範囲です。

では、実際に画質が実際に低いと述べることができる実際の値は何ですか？最適化に実際に使用する値は、実際に作業しているプロジェクトまたは画像によって異なります。

最大のファイルサイズになるさまざまなグラフィックタイプを考慮する必要があります。これらの画像は、可能な限り最も圧縮が必要です。 30％以下であれば、低品質の画像になることをお勧めします。他のデザイナーや開発者は、品質を妥協したくないので、制限を50％に設定するだけです。

しかし、最良のアドバイスは何ですか？まあ、お客様は実際にお客様のために最高の設定を試す必要があります。最適化レベルまたは圧縮レベルをいくつか試して、品質とファイルサイズの観点からどのレベルが最適かを確認してください。ここでいくつかの調整をすれば、そのルックアンドフィールを妥協することなく、JPEGファイルをその最大圧縮率に最適化するのに役立ちます。
Jpeg Photoshopを圧縮する

パートIII：圧縮のためのオプション

まず、品質と圧縮について詳しくお聞かせください。これら2つの用語は実際には互いに逆相関しています。つまり、特定のJPEG画像を30％の圧縮率で保存すると、70％の品質の結果が得られます。画像が圧縮されていない場合は、100％の品質になります。

これらは実際に使用できるオプションで、最も基本的なものの1つです。そして実際には、それはお客様がワールドワイドWebのために節約するとき十分なものであるべきです。ほとんどのユーザーは、さまざまなカスタマイズについてあまり深く掘り下げていません。たとえば、RGB画像の変換からYCbCrの変換（クロマレッド、クロマブルー、および輝度）への変換プロセスが行われている場合、サブサンプリングによって人々ははるかに複雑な問題に陥ります。

明るさの設定は輝度と呼ばれます。 JPEG画像の圧縮中は、輝度は常に最も高い値に設定されます。輝度値は別のチャンネル内に配置されます。そしてこれにより、個々の色の値（例えば青と赤）は実際に最適化するのがより簡単になります。これはクロマサブサンプリングのプロセスと呼ばれます。非常に細心の注意を払っている設計者は、このタイプの圧縮アルゴリズムについてもっと知りたいと思うでしょう。

しかし、お客様はこれを知らないかもしれませんが、Adobe Photoshopは通常圧縮のための方法としてサブサンプリングを使用しません。 Adobe Photoshopを使用し、Web用に保存を選択した場合、この機能を使用して保存された画像は、品質値50％を下回る色差サブサンプリングを利用します。
JPEGを圧縮JPEGを圧縮

パートIV：Web用のさまざまなメディアタイプ

World Wide Webは非常に多様です。さまざまな画像メディアでいっぱいです。たとえば、アイコン、バッジ、ボタン、写真、その他の種類のグラフィックファイルがあります。しかし、お客様はこれを考慮したいかもしれません：2つの異なるタイプのグラフィック（例えばボタンと製品イメージ）の品質を比較することは実際にはそれほど意味がありません。

詳細な画像や写真を使用する場合は、圧縮率が低い別のJPEGファイルへのリンクを試してみてください。その後、比較的高い圧縮率とファイルサイズを大幅に縮小したサムネイルをサイト内で設定できます。

これの欠点は何ですか？さて、メディアギャラリー用にこれらの画像の2つの異なるセットを提供する必要があります。 Webサイト内に配置したすべてのグラフィックファイルを考慮する必要があります。その後、各ファイルに実装する必要のある圧縮または最適化の手法を工夫する必要があります。

ファイルを簡単に検索できるように整理されたファイルシステムを実装するのが最善です。 PicasaやFlickrなどのWebホストの外部で画像をホストすることを選択しているWebマスターがいます。

このような場合でも、画像のサイズを最小限に抑えるために、圧縮用のツールを使用することをお勧めします。ただし、サイト内でこれらの圧縮画像を実際に表示する方法は異なります。これは今日、人々が世界中のどこからでもインターネットにアクセスするのを手助けするモバイル機器の使用が増えているために真実です。
圧縮JPEG圧縮