画像形式の選択と最適化：ウェブサイトの画像のベストプラクティス
キーポイント
この記事は、Sitegroundとのコラボレーションで作成された一連の記事の一部です。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。
2017年3月現在、画像はWebコンテンツの65％以上を占めています。
驚くことではありません。画像は美しさを追加し、情報を伝え、ストーリーを伝え、ウェブサイトの訪問者とつながります。
一方、不適切に使用すると、画像がウェブサイトの速度が遅く、ユーザーエクスペリエンスが低い主な理由であることがよくあります。インターネット上での画像の正しい使用には、主に2つのことが含まれます。
正しい画像形式を選択します
radic/bitmapおよびvector画像
ラジカルまたはビットマップ画像は、2次元ピクセルグリッドで構成されています。各ピクセルは、色と透明度の値を保存します。
ラスター画像のズーム効果はあまり良くありません。ズームインすると、明確さと品質が失われます。ネットワーク上の一般的に使用されるラスター画像タイプは、JPEGまたはJPG、GIF、およびPNG形式です。
以下は、Appleの2つのラスター画像（JPG）です。 1つ目は、画像の自然なサイズです。 2番目は、同じ画像拡大バージョンの詳細を示しています。
ラスター画像の自然なサイズの例。
自然サイズよりもはるかに大きいラスター画像の詳細。
拡大された画像バージョンは、元のコピーと比較して品質が劣化していることに注意してください。 
対照的に、ベクトル画像は、線、形状、パスポイントで構成されています。ベクトルの情報はピクセルに保存されません。代わりに、それらはピクセルとはまったく関係のない数学的な描画指示に保存されます。アレックス・ウォーカーは、SVG（ウェブ上で最も人気のあるベクトル形式）に言及したときに非常によく言った：
SVGは画像形式ではありません。画像「レシピ」のようなものです。解像度に関連していない意味の1つは、ベクトル画像を自由にスケーリングできることです。それらは常に明確で明るく見え、網膜画面に最適です。なぜjpegがマクドナルドのアップルパイに似ているのか（そしてSVGはそうではありません）
小規模SVGグラフィックス。 
svgグラフィックの詳細をズームします。
「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ファイルに欠けている明らかなことの1つは、透明性のサポートです。したがって、透明な背景を使用して画像をWebページの背景色やテクスチャとブレンドする予定がある場合、JPG画像は適切な選択ではありません。以下にリストしたオプションの1つを選択することをお勧めします。
gif
GIFはグラフィカル交換形式を表します。これは、最大256色をサポートする8ビットのロスレス形式です。この制限により、GIFファイルは、幅広い範囲と写真の画像を表示するのに適していません。
以下は、ウェブサイトでのGIFファイルの長期使用に大きな役割を果たす重要なポイントの一部です。
256色の制限を考えると、ファイルサイズは通常非常に小さくなりますPNGは、ポータブルネットワークグラフィックスの略です。これは、W3Cによって開発されたGIFの代替形式です。 GIFと同様に、ロスレス圧縮アルゴリズムを使用し、8ビットまたは24ビット形式を備えています。どちらの形式も透明性をサポートします。ただし、24ビットPNG画像の透明度は、アルファチャネルと赤、緑、青のチャネルを使用して達成されます。したがって、GIFおよび8ビットのPNG画像は完全に不透明または完全に透明ですが、PNG画像の各ピクセルは最大256の不透明度レベルを提供します。
24ビットPNG形式を
に使用できますさまざまなレベルの透明度を持つネットワーク画像
SVGは、XMLベースのベクトルファイルタイプであるスケーラブルベクトルグラフィックスの略です。 2001年以来存在していますが、最近はWeb開発者の間で非常に人気がありました。この遅れた愛の理由は、SVGが長年にわたってブラウザのサポートが不十分であることです。幸いなことに、執筆時点では、いくつかの矛盾やバグにもかかわらず、SVGがすべての主要なブラウザでサポートされていると言ってうれしいです。
SVG形式には多くの機能があり、特にロゴ、マップ、アイコンなどの簡単な画像に使用される場合は、Webグラフィック形式の優れた選択肢として推奨できます。特に適しています。
SVG形式の利点
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
開発作業でSVGまたはWebpを使用しましたか？どんな課題に直面していますか？大きなパフォーマンスの向上を経験しましたか？
コメントボックスをクリックして共有してください！
ウェブサイトの画像形式（FAQ）
に関するFAQWebサイトの画像形式を選択すると、いくつかの要因に依存します。まず、取り組んでいる画像の種類を考えてみましょう。たとえば、写真はJPEG形式で最高の品質と圧縮のために保存するのが最適ですが、ロゴとアイコンをPNG形式で使用して透明度をサポートできます。第二に、ファイルサイズを検討します。ファイルサイズが小さいほど速く読み込まれ、ウェブサイトの速度とパフォーマンスが向上します。最後に、ブラウザの互換性を検討してください。ほとんどの最新のブラウザはJPEG、PNG、GIFなどの形式をサポートしていますが、WebPなどの新しい形式はすべてのブラウザーでサポートされていません。
画像形式は、ウェブサイトSEOに大きな影響を与える可能性があります。 Googleなどの検索エンジンは、より速くロードされるサイトを優先順位付けしますが、画像ファイルのサイズが小さいことはこれを実現するのに役立ちます。さらに、Googleは、優れた圧縮と品質の特性があるため、JPEG 2000、JPEG XR、WebPなどの特定の画像形式を好みます。これらの形式を使用すると、ウェブサイトの検索エンジンランキングが改善される場合があります。
損失と損失レスは、画像形式で使用される2種類のデータ圧縮です。紛失した圧縮により、「不必要な」データビットを排除することによりファイルサイズが削減されますが、これにより画質の劣化につながる可能性があります。 JPEGは一般的な損失のある形式です。一方、ロスレス圧縮は、画質を犠牲にすることなくファイルサイズを縮小しますが、
を生成します。以上があなたのウェブサイトに適した画像形式は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
