あなたのウェブサイトに適した画像形式は何ですか？

画像形式の選択と最適化：ウェブサイトの画像のベストプラクティス

キーポイント

• 画像形式を正しく選択し、画像を最適化することは、ウェブサイトの画像を正しく使用するために重要です。不正確な使用は、ウェブサイトのパフォーマンスの低下とユーザーエクスペリエンスの低下につながる可能性があります。
• jpeg、gif、png、svg、およびwebpは、一般的に使用されるウェブサイトの画像形式です。 JPEG、GIF、およびPNGは長期に渡った形式であり、SVGとWebPは比較的新しいものですが、応答性の高い荷重ウェブサイトに適しているため、ますます人気が高まっています。
• 画像形式の選択は、画像タイプ、ファイルサイズ、ブラウザの互換性に依存します。たとえば、JPEGは品質と圧縮のために写真に最適ですが、PNGは透明性をサポートするため、ロゴやアイコンに最適です。
• Webpは、Googleが開発した最新の画像形式で、大きなファイルサイズを生成せずにJPEGとPNGの利点を組み合わせて、ネットワークの使用に最適です。ただし、すべてのブラウザによって普遍的にサポートされていません。

この記事は、Sitegroundとのコラボレーションで作成された一連の記事の一部です。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

2017年3月現在、画像はWebコンテンツの65％以上を占めています。

驚くことではありません。画像は美しさを追加し、情報を伝え、ストーリーを伝え、ウェブサイトの訪問者とつながります。

一方、不適切に使用すると、画像がウェブサイトの速度が遅く、ユーザーエクスペリエンスが低い主な理由であることがよくあります。

インターネット上での画像の正しい使用には、主に2つのことが含まれます。

正しい画像形式を選択します

• 最適化された画像
• この記事では、最初のポイントについて説明します。特に、Webで最高の画像形式と、最も適した画像のタイプについて説明します。

しかし、さらに議論する前に、いくつかの用語を簡単に明確にしましょう。

radic/bitmapおよびvector画像

ラジカルまたはビットマップ画像は、2次元ピクセルグリッドで構成されています。各ピクセルは、色と透明度の値を保存します。

ラスター画像のズーム効果はあまり良くありません。ズームインすると、明確さと品質が失われます。ネットワーク上の一般的に使用されるラスター画像タイプは、JPEGまたはJPG、GIF、およびPNG形式です。

以下は、Appleの2つのラスター画像（JPG）です。 1つ目は、画像の自然なサイズです。 2番目は、同じ画像拡大バージョンの詳細を示しています。

ラスター画像の自然なサイズの例。

自然サイズよりもはるかに大きいラスター画像の詳細。

拡大された画像バージョンは、元のコピーと比較して品質が劣化していることに注意してください。 対照的に、ベクトル画像は、線、形状、パスポイントで構成されています。ベクトルの情報はピクセルに保存されません。代わりに、それらはピクセルとはまったく関係のない数学的な描画指示に保存されます。アレックス・ウォーカーは、SVG（ウェブ上で最も人気のあるベクトル形式）に言及したときに非常によく言った：

SVGは画像形式ではありません。画像「レシピ」のようなものです。

なぜjpegがマクドナルドのアップルパイに似ているのか（そしてSVGはそうではありません）

解像度に関連していない意味の1つは、ベクトル画像を自由にスケーリングできることです。それらは常に明確で明るく見え、網膜画面に最適です。

小規模SVGグラフィックス。

svgグラフィックの詳細をズームします。

上記の2つの画像は同じベクトルグラフィックのビューですが、2番目の画像では、ベクトルのレンダリングサイズは最初の画像の2倍以上の大きさです。ただし、品質の損失はありません。

損失と非破壊

「lossy」と「lossless」は両方とも、デジタルメディア（つまり、画像、オーディオ、ビデオ）に適用されるファイル圧縮技術を指します。

損失のある圧縮：

デジタルデータは、元のデータの100％に再圧縮されません。損失した方法は、高レベルの圧縮を提供し、より小さな圧縮ファイルを生成できますが、元のピクセル、サウンドウェーブ、またはビデオフレームのある量は永遠に失われます。

pcmag.com Encyclopedia

これは、実際には、圧縮するより損失の多いファイルが少ないほど、それが小さくなることを意味します。ただし、ファイルのサイズが小さくなると、元のファイルの品質を不可逆的に失うこともあります。喪失した圧縮には、ファイルのサイズと品質の間のトレードオフが含まれます。

Webでよく見られる損失のある画像タイプの1つはJPEGです。

対照的に、ロスレス圧縮は、圧縮リソースと元のリソースの間にデータの損失を引き起こしません。これは、圧縮がファイル品質を低下させないことを意味します。ただし、このため、ロスレスファイル形式は通常、ファイル形式の損失のあるファイル形式よりも大きくなります。

Webで簡単に見つけることができるロスレス画像形式は、GIFとPNGです。

この予備情報は、コンテンツに最適な画像形式を決定する場合に非常に役立ちます。

以下に紹介したい最初の3つの画像ファイルタイプ、つまりJPG、GIF、およびPNGは、長い間ウェブサイトで使用されてきました。最後の2つ、つまりSVGとWebPはまったく新しい形式ではありませんが、まだ主流になっていません。ただし、レスポンシブで迅速なロードWebサイトの需要に適しているため、それらの人気は高まっています。

jpeg

jpegまたはjpgは、共同画像のエキスパートグループによって開発された損失のある画像形式

Webサイト上のすべてのコンテンツタイプのほぼ3％は、JPG画像で構成されています。これが、この画像形式がとても人気がある理由です：

• jpg形式は何百万色を表示できます。これにより、Webで写真作業を表示するのに理想的な選択肢
• 紛失したファイルタイプとして、圧縮を使用してファイルサイズを大幅に削減できます。 JPGファイルはさまざまな圧縮レベルを提供します。ネットワーク画像には約60％で十分であり、75％を超える圧縮は画質の低下につながります。
• すべてのインターネット対応デバイスはJPG画像形式をサポートしているため、Webサイトで簡単に使用できます。

JPGファイルに欠けている明らかなことの1つは、透明性のサポートです。したがって、透明な背景を使用して画像をWebページの背景色やテクスチャとブレンドする予定がある場合、JPG画像は適切な選択ではありません。以下にリストしたオプションの1つを選択することをお勧めします。

gif

GIFはグラフィカル交換形式を表します。これは、最大256色をサポートする8ビットのロスレス形式です。この制限により、GIFファイルは、幅広い範囲と写真の画像を表示するのに適していません。

以下は、ウェブサイトでのGIFファイルの長期使用に大きな役割を果たす重要なポイントの一部です。

256色の制限を考えると、ファイルサイズは通常非常に小さくなります

• サポート透明性
• サポートアニメーション。これにより、アイコン、絵文字、バナーなどのループアニメーション画像を表示するのに適しています。
• 平らな色のシンプルな画像に適していますが、写真には適していません
png

PNGは、ポータブルネットワークグラフィックスの略です。これは、W3Cによって開発されたGIFの代替形式です。 GIFと同様に、ロスレス圧縮アルゴリズムを使用し、8ビットまたは24ビット形式を備えています。どちらの形式も透明性をサポートします。ただし、24ビットPNG画像の透明度は、アルファチャネルと赤、緑、青のチャネルを使用して達成されます。したがって、GIFおよび8ビットのPNG画像は完全に不透明または完全に透明ですが、PNG画像の各ピクセルは最大256の不透明度レベルを提供します。

24ビットPNG形式を

に使用できます

さまざまなレベルの透明度を持つネットワーク画像

複雑な写真とグラフィックス
頻繁に編集およびエクスポートする必要があるグラフィック：そのロスレス形式は、品質の低下を保証しません。
• GIF形式とは異なり、PNGイメージタイプはアニメーションをサポートせず、ファイルサイズが非常に大きい場合があります。

svg

SVGは、XMLベースのベクトルファイルタイプであるスケーラブルベクトルグラフィックスの略です。 2001年以来存在していますが、最近はWeb開発者の間で非常に人気がありました。この遅れた愛の理由は、SVGが長年にわたってブラウザのサポートが不十分であることです。幸いなことに、執筆時点では、いくつかの矛盾やバグにもかかわらず、SVGがすべての主要なブラウザでサポートされていると言ってうれしいです。

SVG形式には多くの機能があり、特にロゴ、マップ、アイコンなどの簡単な画像に使用される場合は、Webグラフィック形式の優れた選択肢として推奨できます。特に適しています。

SVG形式の利点

• SVGは通常、ラスターのカウンターパートよりもファイルサイズが小さくなります。特に、ネットワークに最適化してGZIP形式で提供する場合は
• それらはスケーラブルです。つまり、画面の解像度に関係なくシャープに見えることを意味します
• CSSとJavaScriptを使用してSVG画像とその部分をアニメーション化できます。これは非常にクールです。
ファイルサイズが非常に大きくなる可能性があるため、ネットワーク使用のために過度に複雑なSVG画像を避けてください。最後に、写真画像の場合、SVGは機能しません。JPG形式またはWebPに固執する方が良いでしょう。

webp

2010年以来存在していますが、Webpはまだ新しいと感じており、JPGやPNGほどよく知られていないとは言いません。ただし、この画像形式にはDNAのネットワークが含まれています。ネットワークで使用するように設計されているため、非常に興味深いものになります

Webpは、Googleが開発したオープンソースの画像形式です。以下はその主な機能です：

WebPは、ネットワーク上の画像に優れた損失とロスレスの圧縮を提供する最新の画像形式です。 ... WebPロスレス画像のサイズは、PNGのサイズよりも26％小さくなっています。 WebPの損失のある画像は、同等のJPEG画像よりも25〜34％小さいです...ロスレスWebPは透明性をサポートしています...追加の22％のバイトのみが必要です。 Losy WebPは、損失のあるRGB圧縮が許容できる状況の透明度もサポートし、通常はPNGの3倍のファイルサイズを提供します。

webp webサイト

WebPの利点は、膨大なファイルサイズを作成せずにJPGフォーマットとPNG形式の利点を組み合わせることです。

現在、ブラウザのサポートは非​​常に優れています。Blinkベースのブラウザは、最初からそれをサポートしてきましたが、結局、WebPはGoogleの製品の1つです。サポートされていないブラウザ（つまり、IE/Edge、Firefox、およびSafari）の後方互換性のために、賢い人が適切な回避策を設計しています。

以下は、Webpと今すぐ実装する方法について詳しく知ることができる素晴らしいリソースです。

webp faq

WebPイメージ形式は何ですか（なぜ重要なのですか）？
あなたのウェブサイトを最適化するための完璧な画像形式を選択する方法
• Webp画像を使用するためのガイド：ケーススタディ
• WebP画像を使用して
結論
• この記事では、ネットワークイメージ形式の概要を説明し、より適している画像タイプについて簡単に説明します。

JPG、GIF、PNGは非常に人気があり、長い間使用されてきました。 SVGとWebpは、より新しい、刺激的な代替品です。 SVGはイラストやシンプルな画像に最適です。Webpは、JPGとPNGを使用できるすべての場合に最適です。

開発作業でSVGまたはWebpを使用しましたか？どんな課題に直面していますか？大きなパフォーマンスの向上を経験しましたか？

コメントボックスをクリックして共有してください！

ウェブサイトの画像形式（FAQ）

に関するFAQ

Webサイトの画像形式を選択する際に考慮すべき重要な要素は何ですか？

Webサイトの画像形式を選択すると、いくつかの要因に依存します。まず、取り組んでいる画像の種類を考えてみましょう。たとえば、写真はJPEG形式で最高の品質と圧縮のために保存するのが最適ですが、ロゴとアイコンをPNG形式で使用して透明度をサポートできます。第二に、ファイルサイズを検討します。ファイルサイズが小さいほど速く読み込まれ、ウェブサイトの速度とパフォーマンスが向上します。最後に、ブラウザの互換性を検討してください。ほとんどの最新のブラウザはJPEG、PNG、GIFなどの形式をサポートしていますが、WebPなどの新しい形式はすべてのブラウザーでサポートされていません。

画像形式は私のウェブサイトSEOにどのように影響しますか？

画像形式は、ウェブサイトSEOに大きな影響を与える可能性があります。 Googleなどの検索エンジンは、より速くロードされるサイトを優先順位付けしますが、画像ファイルのサイズが小さいことはこれを実現するのに役立ちます。さらに、Googleは、優れた圧縮と品質の特性があるため、JPEG 2000、JPEG XR、WebPなどの特定の画像形式を好みます。これらの形式を使用すると、ウェブサイトの検索エンジンランキングが改善される場合があります。

損失のある圧縮とロスレス圧縮の違いは何ですか？

損失と損失レスは、画像形式で使用される2種類のデータ圧縮です。紛失した圧縮により、「不必要な」データビットを排除することによりファイルサイズが削減されますが、これにより画質の劣化につながる可能性があります。 JPEGは一般的な損失のある形式です。一方、ロスレス圧縮は、画質を犠牲にすることなくファイルサイズを縮小しますが、

を生成します。

以上があなたのウェブサイトに適した画像形式は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。