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

キーポイント

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

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

2017年3月現(xiàn)在、畫像はWebコンテンツの65％以上を占めています。

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

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

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

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

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

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

radic/bitmapおよびvector畫像

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

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

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

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

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

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

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

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

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

小規(guī)模SVGグラフィックス。

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

損失と非破壊

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

損失のある圧縮：

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

pcmag.com Encyclopedia

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

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

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

Webで簡(jiǎn)単に見つけることができるロスレス畫像形式は、GIFとPNGです。

この予備情報(bào)は、コンテンツに最適な畫像形式を決定する場(chǎng)合に非常に役立ちます。

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

jpeg

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

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

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

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

gif

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

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

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

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

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

24ビットPNG形式を

に使用できます

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

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

svg

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

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

SVG形式の利點(diǎn)

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

webp

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

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

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

webp webサイト

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

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

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

webp faq

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

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

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

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

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

に関するFAQ

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

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

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

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

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

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

を生成します。

以上があなたのウェブサイトに適した畫像形式は何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。