さまざまな画像形式

画像やさまざまな視覚要素は、Web サイトのデザインのインパクトを決定する上で重要な役割を果たします。画像ファイルにはさまざまなカテゴリがあり、それぞれに独自の長所と短所があります。ここでは、ラスター画像、GIF、PNG、JPEG、SVG、WebP について詳しく説明します。これらの形式は Web 全体で広く使用されており、Web サイトの画像の特定の要件に基づいて選択できます。

ラスター画像

圧縮がサポートされていないため、ファイル サイズが大幅に大きくなり、ページの読み込み速度が低下するため、このファイル タイプを Web サイトで使用することはお勧めしません。

GIF画像

GIF は「JIF」とも呼ばれ、基本的なアニメーションによく使用されます。256 色に制限されているため、シンプルなグラフィックに適しています。GIF では透明度が許可されますが、アルファ透明度はサポートされていないため、半透明の要素の表示に問題が発生する可能性があります。

PNG ファイル

この形式は、透明性、特にアルファ透明性を必要とする画像に最適です。

PNG形式には、8ビットと24ビットの2つのバージョンがあります。8ビットバージョンは色の選択肢が少なく、透明度が制限されていますが、24ビットバージョンは色の選択肢が豊富で、アルファ透明度が完全にサポートされています。どちらのバージョンもオンラインで利用できますが、アルファ透明度が高いため、一般的には24ビットPNG形式が好まれます。 画像最適化[↗] そして イメージアルファ[↗] 24 ビットの PNG ファイルを 256 色まで圧縮できるため、透明性を維持しながらファイル サイズを大幅に削減できます。

JPEG

JPEG は、ファイル サイズを縮小する圧縮機能で知られる、非常に人気の高い形式です。JPEG 形式で保存された、300 キロバイトを超える画像を考えてみます。

比較すると、同じ解像度と寸法のビットマップ形式の同じ画像は 50 メガバイトを超えることがあり、JPEG 形式の画像の約 150 倍の大きさになります。これは、ビットマップが各ピクセルの詳細な情報を保存するため、ファイル サイズがかなり大きくなるからです。ビットマップ ファイルを保存することは、各ピクセルに「グレー ピクセル、グレー ピクセル、グレー ピクセル」のようなデータを保存することと同じです。

JPEG 圧縮により、画質を犠牲にすることなくデータ量を大幅に削減できます。繰り返しのピクセル データを省略できる柔軟性により、JPEG は多目的フォーマットとしての魅力が高まります。

SVG

SVG (スケーラブル ベクター グラフィックス) は、ピクセル寸法が固定された他の形式とは異なり、ベクター グラフィックスに依存しているため、解像度に依存しません。

これらのグラフィックは、優れた結果で無限に拡大縮小できます。通常、SVG は図形、テキスト、スケッチ、ロゴに使用されます。

注記： 実際のピクセルで構成される写真画像の場合は、他の形式を選択することをお勧めします。

重要： SVG は、Gmail などのさまざまなメール クライアントと互換性がないため、製品やバリエーションの画像フィールド、および e コマース メールのブランド ロゴには適していません。

WebP 形式

の WebP画像フォーマット 画像の品質を維持しながら、ファイル サイズを大幅に削減します。画像の多い Web サイトや、ストレージ スペースを節約したい場合に非常に役立ちます。

WebP が推奨されるファイル形式となる理由はいくつかあります。

• JPEGやPNGに比べて圧縮が強化されており、ウェブサイトの読み込みが速くなり、ユーザーの維持率が向上し、ストレージ使用量が削減されます。
• 透明度とアニメーションのサポート
• ロスレス圧縮とロッシー圧縮の両方のオプションを提供

既存の画像アセットは、アセット パネル内の Webflow 変換ツールを使用して WebP ファイルに変換できます。

注記： Webflow 変換ツールは非可逆圧縮のみを提供します。圧縮の詳細については、Webflow で画像アセットを WebP ファイルに変換するガイドラインを参照してください。.

WebP 画像の横の長さは 16383 ピクセルに制限されています。Web ページのパフォーマンスとストレージ効率は向上しますが、一部のブラウザではこの形式がサポートされない場合があります。 WebPサポートのブラウザ互換性を確認する.