非可逆圧縮と可逆圧縮: オンライン画像にはどちらが適していますか

どのような種類の画像圧縮であっても、何もしないよりはマシです。 ただし、Web サイトのパフォーマンスを一貫して向上させるには、非可逆圧縮オプションと可逆圧縮オプションの違いを理解することが最善です。 これらの用語を聞いたことがあるかもしれませんが、どういう意味ですか? どの画像圧縮方法を使用するかは本当に重要ですか? 多くの場合、その通りですが、それはユースケースによって異なります。

この記事では、画像の最適化の概念と、非可逆圧縮と可逆圧縮について説明します。 ウェブサイトに最適なアプローチを選択する方法についても説明します。

目次：

• 画像圧縮はどのように機能しますか?
• 非可逆圧縮と可逆圧縮の違いは何ですか?
• 非可逆圧縮と可逆圧縮: 画像にはどちらが最適ですか?
• ウェブサイトの画像を圧縮する方法

画像圧縮はどのように機能しますか?

画像圧縮 (または最適化) には、画像ファイルを取得し、そのファイル サイズを削減することが含まれます。 これはおそらく、非メディア ファイル (ドキュメントなど) よりも画像の方が複雑です。 これは、画像を圧縮すると品質が低下する場合があるためです (このため、非可逆および可逆という用語が使われます)。

可能であれば、品質の低下を軽減または排除する必要があります。 そうしないと、元のファイル サイズの数分の一の重さの画像が作成される可能性がありますが、見た目も悪くなります。

技術的な観点から見ると、画像圧縮にはアルゴリズムによる最適化が含まれ、多くの場合、画像からピクセルの冗長性や一部の詳細を削除します。 方法 (非可逆圧縮と可逆圧縮) に応じて、圧縮プロセスは複数のピクセルを 1 つに結合する (非可逆) か、類似または近くの色を 1 つのピクセルにグループ化する (可逆) かのいずれかになります。 その結果、画像のピクセル数が減り、オンラインで読み込むときに必要な処理能力が低くなります。

非可逆技術と可逆技術の両方を使用して画像を圧縮するために使用できるツールがいくつかあります。 それぞれの圧縮方法がどのように機能するかについて説明します。 ️

非可逆圧縮と可逆圧縮の違いは何ですか?

非可逆および可逆という用語は、2 種類の画像圧縮を指します。 非可逆圧縮によりファイル サイズは小さくなりますが、品質が低下する可能性があります (ただし、品質の低下に気付かないことがよくあります)。 ロスレス圧縮は、品質を目に見えて損なうことなく画像ファイルのサイズを最適化することを目的としています。

どちらの最適化方法も Web で広く使用されており、その実装は圧縮する画像によって異なります。 実際の非可逆圧縮と可逆圧縮の例を示すために、まず非圧縮画像を見てみましょう。

その画像は 448 KB です。 次に、可逆圧縮技術を使用して最適化した後の同じ画像を示します。 このバージョンのイメージは現在 415 KB です。

そして、これは非可逆圧縮で最適化された画像のバージョンです。 このバージョンは 287 KB です。

非可逆圧縮と可逆圧縮の違いがわからない場合は、問題の画像の小さいバージョンが表示されていることに留意してください。 画像をフルサイズで開くと、いくつかの小さな違いが明らかになることがあります。 これらの違いは通常、色がすぐに変化したり、非常に詳細な要素 (猫の毛皮など) を含む画像を公開したときに現れます。 非可逆圧縮では、ピクセルを周囲の類似点と結合しようとし、ほとんどの場合、同じように見える色を使用します。 したがって、この画像の背景はすべて非常に似た色であるため、非可逆圧縮はこの画像の背景を圧縮するのに素晴らしい効果を発揮します。 ただし、猫の細い毛束をよく見ると、写真で劣化が見られる場合があります。

一方、可逆圧縮では、物理的に似ている色だけでなく、ピクセル内の冗長性も特定します。 したがって、同じものを示す不必要なピクセルのみが削除され、詳細が多い場合の画像の品質が向上します。 非可逆圧縮と可逆圧縮を比較すると、前者は類似した色を取得してグループ化するプロセスがあまりインテリジェントではありません。 これは文字通り色の違いを取り除き、それらを 1 つに結合しようとします。これはうまく機能する場合もありますが、画像内のあるアイテムから別のアイテムへの変化が途切れ途切れになる場合もあります。

️ピクセル除去に対するより積極的なアプローチにより、非可逆圧縮は通常、可逆圧縮よりも画像のファイル サイズを小さくします。

非可逆圧縮と可逆圧縮: 画像にはどちらが最適ですか?

すべての画像に最適な圧縮というものはありません。 紙の上では、画像の品質レベルを維持しながらファイル サイズを削減できる可逆圧縮が最適なオプションです。 また、反復ピクセルを「より賢い」方法で識別する傾向もあります。

実際には、小さな画像しか公開しない場合、多くのユーザーは非可逆圧縮と可逆圧縮の違いが分からない可能性があります。 たとえば、オンライン ストアを考えてみましょう。ショップ ページには、各製品を示す小さな画像のギャラリーが含まれています。 可能な限り高速な読み込みが必要であり、顧客は各写真の詳細を見ることを期待していないため、ここでは非可逆圧縮が理にかなっています。

ただし、個々の製品ページでは、複雑な詳細を示す高解像度の画像が必要になります。 この状況では、画像にはより高い解像度が必要であるため、ロスレス アプローチを検討できます (顧客が写真をズームインすることが予想されます)。

非可逆圧縮と可逆圧縮の利点と欠点をよりよく理解できるように、それぞれの長所と短所のリストをまとめました。

非可逆画像圧縮の長所:

1. ファイル サイズの縮小 : 非可逆圧縮により画像のファイル サイズが大幅に縮小され、保存、送信、ダウンロードが容易になります。
2. 読み込み時間の短縮: ファイル サイズが小さいため、非可逆技術を使用して圧縮された画像の読み込みが速くなります。
3. 調整可能な圧縮レベル「」非可逆圧縮では、ニーズに応じて圧縮レベルを変更できます。

非可逆画像圧縮の短所:

1. 品質の損失: 非可逆圧縮では一部のデータが永久に失われます。 これは、画質が低下し、完全に元の状態に戻すことができないことを意味します。
2. 繰り返しの編集: 損失のある画像を編集して保存するたびに、さらに多くのデータが失われます。 時間が経つと、画質が大幅に低下します。
3. 詳細な画像には理想的ではありません: 画像に重要な詳細が含まれている場合、または微妙な色の違いが重要な場合は、目に見えるアーティファクトやカラー バンディングが発生するため、非可逆圧縮は最適な選択ではない可能性があります。

ロスレス画像圧縮の長所:

1. 品質保持: ロスレス圧縮では、圧縮中にデータが失われることがないため、画像の品質がそのまま維持されます。 これにより、元の画像を正確に復元できます。
2. 繰り返し編集: データが失われないため、可逆圧縮は複数回編集する必要がある画像に最適です。 何度保存しても画質の劣化はありません。
3. テキストとグラフィックに最適: 可逆圧縮は、鮮明な線、テキスト、またはグラフィック要素の鮮明さと鮮明さを保持するため、画像に最適です。

ロスレス画像圧縮の短所:

1. ファイル サイズが大きくなる: 可逆圧縮はファイル サイズを削減しますが、非可逆圧縮ほど大幅には削減されません。 これは、画像がより多くのデジタル領域を占めることを意味します。
2. 転送/読み込みが遅い: ファイル サイズが大きいため、特にオンラインでは、可逆イメージは非可逆イメージに比べて送信またはダウンロードに時間がかかります。
3. すべての高解像度画像に最適ではない: 写真など、無数の色と詳細を含む複雑な画像の場合、可逆圧縮後でもファイル サイズがかなり大きくなる可能性があります。 このような場合 (高速な読み込み速度と高品質の画像が必要な場合)、適切に調整された非可逆圧縮が適している可能性があります。

どのタイプの圧縮を選択するかは、最適化する画像とその使用例によって異なります。

非可逆画像圧縮を使用する可能性がある例:

1. 一般的な Web およびブログ投稿画像: Web サイトは多くの場合、優れたユーザー エクスペリエンスを提供するために迅速に読み込む必要があります。 画像に非可逆圧縮を使用すると、読み込み時間を短縮できます。 ただし、それは絶対的に最高の品質を見ることをそれほど気にしていない場合に限ります。
2. ソーシャルメディア: Facebook、Instagram、Twitter などのプラットフォームは、アップロードされた画像に非可逆圧縮を自動的に適用して、ストレージ容量を節約します。
3. 電子メールの添付ファイル: 画像を電子メールで送信する場合、非可逆圧縮を使用すると、ファイル サイズを管理しやすい大きさに保つことができます。
4. e コマース プラットフォーム: オンライン小売業者は、製品の鮮明で高速な読み込み画像を表示するために非可逆圧縮を使用することがよくあります。 主な例外は、顧客がセーターの糸を拡大して確認したり、靴紐の市松模様の色を確認したりするために、詳細な画像が必要な場合です。

可逆画像圧縮を使用する例:

1. ロゴとグラフィックス: ロゴやグラフィックスなど、テキストや鋭い線を含む画像の場合は、鮮明さを維持するために可逆圧縮が推奨されます。
2. スクリーンショット: Web 画像の例外の 1 つは、ソフトウェアなどの Web インターフェイスのスクリーンショットを圧縮する場合です。 ロゴやグラフィックスと同様、これらのショットにはシャープな線やテキストが表示されるため、ロスレスが最良の選択肢となります。
3. 医用画像処理: 放射線学のような画像の詳細が重要な分野では、可逆圧縮によりデータが失われることはありません。
4. プロの写真: 写真家は、最高の品質を維持するために、編集中に RAW や TIFF などのロスレス形式を使用することがよくあります。
5. 科学または技術画像: 科学研究または技術分野では、多くの場合、画像を詳細に分析する必要があるため、可逆圧縮がより良い選択となります。
6. 画像のアーカイブ: 画像を長期保存する場合、可逆圧縮により、常に元の品質にアクセスできることが保証されます。

すべての画像圧縮ツールとサービスが非可逆圧縮と可逆圧縮の両方を提供するわけではないことに注意してください。 画像圧縮アプリの使用を開始する前に、Web サイトに対してどのようなアプローチを取るかを知る必要があります。

ウェブサイトの画像を圧縮する方法

Web サイトの画像を圧縮するために使用できるツールにはいくつかの種類があります。 嬉しいことに、プロセス全体を自動化する一部のツールを除いて、これらのツールの多くは無料です。

私たちは過去に、お気に入りの画像最適化ツールのいくつかについて話しました。 ここでは、使用できるツールとサービスの種類の内訳を示し、開始するための推奨事項をいくつか示します。

• 画像最適化 Web サイト。 これらは、TinyPNG や Squoosh などの Web サイトであり、画像をアップロードし、最適化し、サイトで使用するためにダウンロードできます。 これらのサイトは無料ですが、圧縮数に制限があります。
• WordPress 画像最適化プラグイン。 WordPress を使用している場合は、画像最適化プラグインにアクセスできます。 これらのプラグインは、アップロードした画像を取得し、自動的に圧縮します。 Optimole はそのようなプラグインの一例であり、コンテンツ配信ネットワーク (CDN) に接続して画像を提供します。
• 画像最適化ソフトウェア。 Image Optimizer など、画像をサイトにアップロードする前にダウンロードしてローカルで画像を最適化できるソフトウェアがあります。 ただし、ほとんどの場合、オンライン サービスまたはプラグインを使用する方が簡単なオプションです。

一部の画像形式は、ファイル サイズの点でより「効率的」になるように設計されていることにも注目してください。 この例には、AVIF や WebP 画像が含まれます。 これらの形式は「次世代」とみなされ、PNG や JPEG などの形式と同等の品質の画像を提供しますが、ファイル サイズが小さいため、圧縮ツールを使用する必要性が減ります。

注: すべてのブラウザーがこれらの次世代フォーマットをサポートしているわけではありません (ほとんどのブラウザーはサポートしていますが)。WordPress は WebP (バージョン 5.8 以降) をサポートしていますが、AVIF はサポートしていません。 AVIF 画像を活用してサイトのパフォーマンスを向上させたい場合は、Optimole などの形式のサポートを追加するプラグインを使用する必要があります。

非可逆圧縮と可逆圧縮の使用に関する結論

ユーザーにできるだけ詳細を見てもらいたいため、品質を維持する必要がある画像には通常、可逆圧縮が適した方法です。 オンラインで公開されているほとんどの画像では、非可逆圧縮を利用してファイル サイズをできる限り削減し、サイトの読み込みを高速に保つことができます (ただし、常にそうとは限りません)。

非可逆圧縮と可逆圧縮について質問がありますか? 以下のコメントセクションでそれらについて話しましょう!