画像圧縮とは？

画像圧縮とは？

画像圧縮は、画像ファイルを小さくする処理です。画像圧縮は、一般的には画像から情報のバイトを削除するか、画像圧縮アルゴリズムを使用して、より少ない記憶容量に画像ファイルを書き換える方法で行われます。画像圧縮は、ユーザーがWebサイトやアプリケーションを操作する際に、画像が素早く読み込まれるようにするための効果的な方法です。画像圧縮は、画像の最適化における重要な要素の一つです。

例として、以下にサイズが96KBの画像があります。

以下は同じ画像を70KBに圧縮したものです。

さらに、以下は35KBに圧縮したものです。

画像圧縮が重要である理由は？

圧縮画像は、非圧縮の画像と比較して読み込みが速くなります。Webページやアプリケーションの読み込み速度は、SEO、コンバージョン率、ユーザーのデジタル体験、その他の重要な指標に大きな影響を与えるため、非常に重要です。Webパフォーマンスの向上は、開発者がWebサイトを最適化する主要な方法の1つです。

画像圧縮は通常、他の方法と併用してWebパフォーマンスの向上に使用されます。例えば、CDNは、コンテンツをキャッシュして、エンドユーザーにより高速に配信することができます。負荷分散は、Webサーバーが過負荷になるのを防ぐことができます。遅延読み込みを使用することで、Webページの最も重要なコンテンツをさらに高速に読み込むことができます。しかし、全体的に見れば、多くの場合、画像圧縮は、ページパフォーマンスの低下を修正する最も早い方法の1つであると言えます。

非可逆画像圧縮とは？

旅行者が旅行のために衣類を詰めることを考えてみましょう。靴から帽子、フォーマルな服まで、クローゼットの中身をすべて詰め込むことが可能です。しかし、そのような方法では大量の荷物が発生し、旅行者が持ち歩く荷物が増え、動作は遅くなり、余計な輸送費がかかってしまいます。代わりに、旅行者は衣類を厳選して1つのスーツケースに詰め込みます。

旅行者が全ての衣類を持ち運ぶ必要がなのと同じように、人は画像全体を最大解像度、最大寸法で見る必要はほとんどありません。（デスクトップで最も使用されている画面サイズは1680×1050ピクセル、モバイルで最も使用されている画面サイズは360×800ピクセルとさらに小さくなっています。このサイズでも、画面いっぱいに画像が表示されることはまずありません）。通常、画像は一般的な閲覧者に気づかれない方法で品質やサイズを下げることができます。このアプローチは、「非可逆」画像圧縮と呼ばれています。

非可逆画像圧縮は、すべてのピクセルを保持するのではなく、画像の最も重要な情報のみを保持します。非可逆圧縮アルゴリズムには、以下で詳しく説明するようにいくつかの種類があります。しかし、いずれも画像ファイルから情報を削除して、ファイルがより少ないバイト数で構成されるようにするものです。

非可逆画像圧縮方式

Web上で公開されている画像のファイル形式の多くは、非可逆圧縮を使用したものです。これにより、画像の読み込みが早くなり、帯域幅の過剰使用が防止されます。非可逆圧縮方式の一般的な例としては、以下のようなものがあります：

• JPEG：Joint Photographic Experts Groupという組織の名を冠したこのファイル形式は、おそらく最も広く使われている画像圧縮方式です。通常、画質の低下を最小限に抑えながら、ファイルを1/10程度に圧縮することができます。JPEGの最新版にはJPEG 2000やJPEG XRがありますが、多くのブラウザはこれらのフォーマットをサポートしていません。
• WebP：WebPは可逆圧縮にも対応していますが、一般的には非可逆圧縮の画像圧縮に使われることが多いようです。WebPはもともと、JPEG、PNG、GIFのファイル形式を置き換えるためにGoogleによって開発されました。
• High Efficiency Image Format（HEIF）：High Efficiency Image Format（HEIF）は、圧縮画像用のコンテナファイルの一種です。この方法で圧縮された画像はHEICファイルと呼ばれることもあります。

可逆画像圧縮とは？

旅行者が思うように衣類をスーツケースに入れられない場合、服をたたみ直したり、配置を変えたりして、きれいに収まるように工夫するでしょう。同様に、「可逆」画像圧縮は、数学的なアルゴリズムを用いて、情報を削除することなく画像ファイルを書き換えます。可逆圧縮で処理された画像は、基本的にオリジナルと同じように見えますが、ファイルサイズははるかに小さくなります。

可逆圧縮では画像のファイルサイズを40%も削減できるものの、非可逆圧縮に比べると、ファイルサイズの削減やWeb用に画像を最適化するには、まだ効果が低いと言えます。Webサイト構築者は、非可逆画像圧縮と可逆画像圧縮のどちらかを決定する際に、エンドユーザーのニーズを慎重に考慮し、Webサイトの速度テストを実施する必要があります。

可逆圧縮方式

広く使われている可逆圧縮方式には、以下のようなものがあります：

• Portable Network Graphics（PNG）は、Web上でJPEGやWebPの代わりに使われることがあります。
• Graphics Interchange Format（GIF）も、Web上でよく使われる形式です。
• ビットマップ（BMP）ファイルは通常、Web上で実用的に使用するには大きすぎる形式です。
• RAW画像は全く圧縮されていない形式です。デジタルカメラは写真をRAW形式で撮影しますが、Webサイトで使用する前に別の形式に変換して圧縮する必要があります（特に極めて高画質な画像を表示することを目的としたWebサイトを除く）。

一般的な画像圧縮アルゴリズムにはどのようなものがあるか？

非可逆圧縮方式、可逆圧縮方式ともに、様々な画像圧縮アルゴリズム（アルゴリズムとは、コンピュータが従うべき一連の規則です）を用いて、ファイルサイズの縮小を実現しています。変換符号化、ランレングス符号化、算術符号化、LZW、Flate/Deflate、ハフマン符号化などは、画像圧縮アルゴリズムの一例です。

変換符号化は非可逆画像圧縮アルゴリズムで、一般的に離散コサイン変換（DCT）と呼ばれる、より少ない情報量でファイルを数学的に表現する手法が用いられます。JPEGは、変換符号化を使用しています。

ランレングス符号化（RLE）は、画素内の連続する同一の値を符号化する可逆圧縮アルゴリズムです。例えば、白色の画素が8つ並んでいる場合、8つすべての画素を（WWWWWWWのように）書き出すのではなく、画素の数を（8Wのように）記録します。

算術符号化も可逆圧縮アルゴリズムの一種です。他のデジタルファイルと同様に、デジタル画像を文字列で表し、計算レベルが低い形で扱われます。算術符号化は、画像ファイル内で使用頻度の高い文字を少ないビット数で、使用頻度の低い文字を多いビット数で符号化します。その結果、元の文字列と比較して、全体的にビット数が少なくなります。

ハフマン符号化は、算術符号化と若干似ていますが、通常、ファイルサイズはそれほど小さくなりません。

LZW（Lempel-Ziv-Welch）アルゴリズムは、LZ77とLZ78という 2 つの古い圧縮アルゴリズムをベースにした可逆圧縮方法です。

Flate/deflateは、ハフマン符号化とLZ77圧縮をベースにした可逆圧縮アルゴリズムです。

Cloudflareを使用して画像を圧縮する方法

Cloudflareは、画像をできるだけ高速に読み込むために、画像の保存、キャッシング、最適化、サイズ変更を行う3つのプロダクトを提供しています：

• Cloudflare Images
• Cloudflare Image Resizing
• Cloudflare Polish

これらのサービスを利用することで、Webサイトの所有者は、ワンクリックで画像を最適化したり、画像をWebPなどの圧縮ファイル形式に変換したり、デバイスごとに読み込む画像サイズをカスタマイズすることができます。これらのサービスの詳細については、上記のリンクを参照してください。また、Cloudflareのプランを開始するには、こちらを参照してください。