非可逆圧縮と可逆圧縮：両方の形式の初心者向けガイド

デジタル画像はウェブの本質的な部分であり、メディアなしでコンテンツを作成することは困難です。 謙虚な静止画は、あなたの文章に追加のコンテキストを提供するための素晴らしい方法です。

ただし、最適化しないと、画像のファイルサイズが非常に大きくなる可能性があります。 非可逆圧縮と可逆圧縮は、それぞれが画像のサイズを縮小できるため、一般的な考慮事項ですが、品質のトレードオフも考慮する必要があります。

ほとんどの場合、画像に圧縮を適用する必要があります。 これにより、ファイルサイズを抑えながら、許容できるレベルで品質を維持できます。 適切な圧縮レベルの選択は、最終的な目標と要件によって異なります。

この投稿では、非可逆圧縮と可逆圧縮について説明します。 全体を通して、画像が「形を整える」ために必要なプロセス、圧縮とは何か、および画像を最適化する他の多くの側面について説明します。

LossyとLosslessの違い

デジタル画像の圧縮に関しては、いくつかの異なる形式から選択できます。 多くの要因に応じて、これらの名前が他の名前になる場合があります。 ただし、コアレベルでは、次の2つのタイプがあります。

• 非可逆圧縮：ここでの目的は、画像に可能な限り最小のファイルサイズを提供することです。 そのため、画質は優先順位のリストの下位にあることがよくあります。
• 可逆圧縮：この圧縮形式を使用すると、ファイルサイズが大幅に縮小されますが、画像にアーティファクトやその他の問題が発生することはありません。

ほとんどの場合、どの形式を使用するかについての決定は、最終目標になります。小さなファイルが必要ですか、それとも品質の維持に重点を置いていますか？

非可逆圧縮は、画像から不要と見なされるデータを完全に削除します。 これを実現するためにさまざまな手法を使用しているため、ファイルサイズが非常に小さくなります。

可逆圧縮もデータを削除しますが、必要に応じて元のデータを復元できます。 目標は、品質を高く保ちながら、ファイルサイズを小さくすることです。

これを実現する方法はいくつかありますが、結果は同じであることがよくあります。 ニーズに合った適切なオプションを見つけるために、最初に一歩下がって、画像と圧縮の基本を一般的に確認しましょう。

デジタル画像の要素

ソフトウェアやWeb開発と同様に、カメラからWebに画像を取り込むための「スタック」がよくあります。

画像は「生の」データとして始まります（そのため、RAWという名前が付けられています）。 これはアプリのコードに似ています。スニペット、線、値は、色、画像プレースホルダー、動的要素などの背景に変換されます。

画像の場合、RAWファイルは、カメラの製造元、編集ソフトウェア、色空間アルゴリズムなどに基づいて、わずかに異なる画像表現を提供します。 そこから、画像を編集し、いくつかのファイル形式の1つとしてエクスポートします（これらについては後で詳しく説明します）。

標準のデジタル画像を構成するいくつかの異なる要素があります。

• ファイルタイプ：さまざまなタイプが、最終的な画像に適している場合とそうでない場合がある品質を提供します。 重要なのは、アプリケーションに最適なファイルタイプを選択することです。
• 解像度：これはメガピクセル（MP）で表されることがよくありますが、1インチあたりのピクセル数（PPI）または1インチあたりのドット数（DPI）も使用します。 解像度が高いほど品質は高くなりますが、初期ファイルサイズも大きくなります
• ビット深度：この側面は、画像の色情報を決定します。 ビット深度が低いと数色しかレンダリングされませんが、ビット深度が高いと一度に数百万色がレンダリングされる可能性があります。 一般的に、高いほど良いです。
• 寸法：これは、画像が占める物理的なスペースです。 たとえば、1,000ピクセルx 500ピクセルで、画像の合計サイズを定義できます。
• 色空間：これは、色の表示方法を決定するアルゴリズムです。 それぞれの色空間は異なって設定されており、それはしばしば写真家の好みに帰着します。

これらの要素を組み合わせて、さまざまな品質の最終的な画像を提供します。 たとえば、大きく、高解像度、高ビット深度のJPEG写真は、最高の品質と鮮明さを提供します。

対照的に、大きなサイズで多くの色を表示する機能を備えた画像でさえ、低解像度では見栄えが悪くなる可能性があります。

このバランスは、圧縮を適用する前にコアイメージを現像する方法です。 ただし、画像に使用する形式は、最終的な品質に大きな影響を及ぼします。

Web画像の最適化のしくみ

画像圧縮は一般的な意味で同じであるため、Web用に画像を最適化する方法に標準のルールを適用できます。

これらの概念の多くはKinstaブログの他の場所で取り上げていますが、参照用に簡単な要約を提供する価値があります。

• これはWebの標準であるため、72PPI解像度を使用します。 アーカイブ上の理由から、より高いPPI / DPIを使用できますが、Webに公開していることを前提としています。
• 画像の「長辺」を2048pxに設定します。これは、さまざまなアプリケーションに最適です。
• オプションがある場合は、8ビットの色深度を使用します。
• 公開する前に、圧縮および最適化ツールを使用して画像を実行します。

これは、一貫した結果を提供できる単純な形式ですが、圧縮と最適化については、この記事の残りの部分でさらに詳しく説明します。

そのために、非可逆圧縮と可逆圧縮の利点と欠点を見てみましょう。

画像圧縮がWeb画像にどのように役立つか

一般的に、「圧縮」は最小値と最大値を互いに近づけます。 たとえば、圧縮すると音楽の最小音量が上がり、最大音量が下がります。 これにより、平均レベルが耳に対して大きくなります。

画像の場合、圧縮はより還元的なプロセスです。 これは、可能な限り高い品質を維持しながら、ファイルサイズを縮小するために画像からデータを取り除くことに重点が置かれていることを意味します。

画像ファイルのサイズを小さくするのに役立つ独自のアルゴリズムがたくさんあります。 多くの場合、これらは特定の会社に所有権があります。 多くの「不可逆」および「可逆」圧縮標準があり、それぞれに固有の記述子があります。

とはいえ、特定の形式に限定されない画像圧縮を適用することには、多くの利点があります。

• ファイルサイズを低く抑えることができるため、サイトのパフォーマンスが向上します。
• ひいては、サイトのサーバーで行う作業が少なくなり、パフォーマンスに影響を与えます。
• ファイルサイズが小さいと、サーバーの排出量を削減できます。 このように、あなたは持続可能で倫理的な未来に貢献するのを助けます。
• 選択したアルゴリズムと圧縮品質に応じて、ほぼ完全で同等の品質を表示できます。

共有可能な画像を作成するのと同じように、さまざまな圧縮値で遊んだり、特定の会社を使用したり、正しいアルゴリズムを選択したりすることは、自分に合った結果を見つけるために不可欠です。

非可逆圧縮の長所と短所

非可逆圧縮は、他のすべての側面をほぼ除外して、画像のファイルサイズを縮小します。 アルゴリズムが機能する方法は、データを完全に削除することです。 これは、聞こえるほど破壊的である可能性があります。

あまり詳しくは説明しませんが、非可逆圧縮で削除されたデータの一部が画像に表示されていることを知っておいてください。 アイデアは、元の高品質の画像をより軽量で最高の表現で提供することです。これは、一部のデータがカットされないことを意味します。

一般に、非可逆圧縮を使用することにはいくつかの利点があります。

ニュースレターにサインアップ

トラフィックを1000％以上増やした方法を知りたいですか？

インサイダーのWordPressのヒントを含む週刊ニュースレターを受け取る20,000人以上の他の人に参加してください！

今すぐ購読

• ファイルサイズは小さくなります—場合によっては10キロバイト（KB）未満になります。
• アーティファクトがあるにもかかわらず、多くの場合、品質の低下は許容されます。

これにより、不可逆圧縮を使用することの欠点が生じます。つまり、圧縮を行うと画質が低下します。

カラーバンディング（カラーシェードが正しい方法でレンダリングされない場合）と、場合によってはエッジの鮮明度の低下が見られることがわかります。 色数が少ない画像では、これは少なくなりますが、鮮明度の低下は依然として存在します。

また、画像の劣化は圧縮プロセスの永続的な機能です。 これは、後日効果を元に戻す方法がないことを意味します。

欠点はありますが、非可逆圧縮はWebとサイトのパフォーマンスに優れています。 ファイルサイズが小さいと、必ずしも画像が粗くなるとは限りませんが、（もちろん）極端なことをすることはできます。

ただし、損失は唯一の選択肢ではありません。 可逆圧縮は、品質を重視するサイト所有者にとっての代替手段です。

可逆圧縮の長所と短所

可逆圧縮は、ラベルに記載されていることを実行します。画像のファイルサイズを、表示品質に影響を与えることなく可能な限り圧縮します。 これは、不要なスペースを占める可能性のある画像メタデータを削除することによって行われます。

可逆圧縮アルゴリズムは、繰り返されるピクセルシーケンスも検索し、それらを表示するためのショートカットをエンコードします。 たとえば、「コマンドラインインターフェイス」を考えてみましょう。 多くの場合、頭字語を一度定義してから、「CLI」（または選択した頭字語）を使用して、超高速で参照します。

可逆圧縮は、破壊的ではないという点で同じように機能します。 メタデータの削除は元に戻せませんが、一部の圧縮は元に戻せるため、多くの用途に柔軟なアルゴリズムになります。

可逆圧縮を使用することの長所は、品質の維持を中心に展開します。

• 可逆圧縮は、他のすべてのアルゴリズムと比較して、画像の最高品質を維持します。
• ロスレスは、アーカイブの目的には最適です。 たとえば、写真家は、ストレージリソースと、ほとんどのデータを保持する画像のバランスをとることができます。
• ロスレスは、写真、グラフィックデザイン、デジタルアートなど、視覚芸術に適した圧縮アルゴリズムです。 ロスレスアルゴリズムを適切な深さと解像度と組み合わせると、ほぼ「1対1」のコピーを実現できます。

ただし、ロスレス圧縮が特定のニッチにどの程度役立つかについては注意が必要です。アプリケーションの範囲は狭いです。 これにより、全体的な可用性が低下します。

考慮すべきロスレス圧縮のその他の短所は次のとおりです。

• Webサイトで多くの画像を使用している場合、ロスレス圧縮はそれらを表示するのに最適ではない可能性があります。 これは、ほとんどの場合、これらのタイプの状況では小さいファイルサイズを重視するためです。
• 圧縮によりファイルサイズは減少しますが、可逆アルゴリズムは画像データを非可逆ほど変更しません。 このため、極端な痩身の結果ではなく、サイズのわずかな縮小しか見られない場合があります。

次に、これを行うための最速の（そして潜在的に最良の）方法を見ていきます。

LossyとLosslessのどちらを選択するか

この時点で、非可逆圧縮と可逆圧縮の違いを理解できます。 ただし、サイトで使用するのに最適なアルゴリズムがまだわからない場合があります。

考慮すべき2つの状況があります。

1. Web上のほとんどのユースケースでは、非可逆圧縮を使用できます。
2. 写真や写真アートを表示したい場合は、ロスレス圧縮の方が適しています。

これらの考慮事項は、JPEG、PNG、GIFなどの標準的なWeb画像形式のいずれかを使用することに依存しています。 ただし、圧縮のニーズは、HEICやWebPなどの最新の形式とは異なる場合があります。

サイトに写真を表示しない限り、非可逆圧縮がデフォルトの選択であると言っても過言ではありません。 WordPressはデフォルトで画像を圧縮します。これは、非可逆圧縮がほとんどすべてのアプリケーションに適していることを示しています。

オンライン圧縮サービスを使用して画像を最適化する

サイトに表示する前に画像を圧縮する方法はたくさんあります。 たとえば、編集段階で圧縮を適用することを選択できます。 これは、とにかくRAW形式からの変換の副産物である可能性があります。

ただし、人気のある選択肢は、多くのオンラインサービスの1つです。 それぞれがアルゴリズムの選択と模範的なユーザーインターフェース（UI）を提供します。 さらに、ほとんどの場合、少なくともコミットする前にアプリを試すための無料サービスがあります。

画像の最適化に関する記事でいくつかのオプションについて説明しますが、これらはアプリケーションプログラミングインターフェイス（API）に接続するWordPress固有のプラグインです。 良いニュースは、これらのプラグインの多くがオンラインインターフェースも提供していることです。 たとえば、ShortPixelについて考えてみます。

ここでは、画像をアップローダーにドラッグし、アプリが画像を圧縮して処理するのを待ちます。 ただし、プロセスはすぐに開始されるため、最初にアルゴリズムを選択することをお勧めします。

選択は簡単です。2つの形式の不可逆圧縮（「非可逆」と「光沢」）と、可逆オプションです。 ShortPixelのインターフェースは、各アルゴリズムの違いをうまく説明しており、数秒で画像をダウンロードできます。

どちらもお客様の要求に対応できますが、ImagifyのインターフェースはShortPixelのインターフェースよりも滑らかでプロフェッショナルに見えます。 ここには、ノーマル、アグレッシブ、ウルトラの3つの「圧縮レベル」もあります。

ここでのわずかな違いは、Imagifyは可逆圧縮から始まり、重いアーティファクトを伴う不可逆アルゴリズムまで機能することです。 ただし、他のソリューションにはないオプションがいくつかあります。

手始めに、画像のEXIFデータをそのまま維持し、変換後にサイズを変更することもできます。 これは、特にEXIFデータを削除したり、画像のサイズ変更方法を制限したりする可能性のある圧縮レベルを適用する場合に、非常に貴重です。

神話上の同名のように、Krakenは画像をまとめて、さまざまな種類の圧縮を適用できます。 ほとんどのユーザーは、ロッシータイプまたはロスレスタイプのいずれかを選択します。

ただし、エキスパートモードもあります。

これにより、他のオプションの中でも、自分のニーズに合わせて圧縮を調整できます。 たとえば、JPEGとPNGの両方の圧縮レベルを調整したり、画像からメタデータを保持することを選択したり、クロマサブサンプリングを使用して色をさらに変更したりすることもできます。

概要

画像はサイトの単純な側面のように見える場合があります。ファイルを取得してWordPressにアップロードし、画像ブロックを追加して表示します。

ただし、Web用の画像を準備するプロセスには、想像以上に多くのことが含まれます。 選択した圧縮形式は、ファイルサイズ、画質などに影響を与える可能性があります。

この投稿では、非可逆圧縮と可逆圧縮について説明し、どちらを選択するかをまとめました。 品質とサイズの綱渡りにもかかわらず、非可逆圧縮はWeb上のほとんどのユースケースに最適です。 写真家や画像の品質の改ざんを懸念している人は、ファイルサイズに関する利点は少ないですが、可逆圧縮を使用することをお勧めします。

非可逆圧縮と可逆圧縮の戦いでは、どちらの側に立っていますか？ 以下のコメントセクションであなたの考えを教えてください！