ウェブサイト向け画像形式の選び方
画像形式はファイルサイズ、見た目、使える機能に影響しますが、どの画像にも最適な形式はありません。読み込み速度もページ エクスペリエンスの一部です。GoogleはCore Web Vitalsをランキング システムで利用すると説明していますが、単独のスコアで上位表示が保証されるわけではありません。自分の画像で形式を比較し、閲覧者が使うブラウザーや端末で結果を確認してください。
WebP：サイズと見た目を比較
WebPは非可逆・可逆圧縮、透過、アニメーションに対応します。ウェブ用の写真、図、アニメーションの選択肢になりますが、結果は画像、エンコーダー、設定によって異なります。コピーを書き出し、細部や透過、ファイルサイズを元画像と比較してください。公開システムや送信先がWebPに対応しているかも確認しましょう。
JPEG：写真で広く使われる形式
JPEGは写真で広く使われる非可逆圧縮形式です。品質を下げすぎたり、何度も保存したりすると、目に見える圧縮ノイズが生じることがあります。JPEGは透過情報を保存しません。ロゴ、細い文字、くっきりした輪郭では、内容と互換性に応じてPNG、可逆WebP、SVGと比べてください。
PNG：画素を保つラスター形式
PNGは透過に対応する可逆ラスター形式です。画素の保持が重要なスクリーンショットや図に使えますが、ファイルサイズは画像によって異なります。写真では他の形式とサイズや見た目を比較してください。
SVG：ベクター画像
SVGは固定ピクセルの格子ではなく、図形や指示でベクター画像を表現します。拡大縮小するアイコン、図、イラストに向く場合があります。写真全般の代替にはなりません。複雑さ、ファイルサイズ、表示するシステムのセキュリティ規則も考慮しましょう。
選ぶときの目安
写真では送信先が対応する場合にJPEG、WebP、AVIFを比べます。ベクターのアイコンにはSVGを検討します。透過にはPNGまたはWebP、細い線を保ちたい画面キャプチャにはPNGなどの可逆形式が使えます。これは出発点であり、すべてに当てはまる規則ではありません。
公開前に画像を準備する
表示領域に合う寸法のコピーを作り、用途に合わせて圧縮し、実際の画面で確認してください。代替形式を提供する場合は、閲覧者の環境に合う形式も残します。関連ガイドで画像の縮小や形式の比較を確認できます。
出典と仕様
引用した仕様書が各形式の機能を定義しています。Googleはページ エクスペリエンスとランキング システムの関係を説明していますが、単独のスコアで順位は保証されません。
画像ツールとガイド
仕様と検索に関する資料
形式の機能は仕様で定義されます。Googleはページ エクスペリエンスと検索システムの関係を説明していますが、単一のスコアで順位が保証されるわけではありません。
よくある質問
WebPは常にJPEGより小さくなりますか？
いいえ。元画像、エンコーダー、設定によって結果は異なります。見た目を確認し、書き出したファイルを比較してください。
画像はどの寸法でアップロードすべきですか？
表示領域に合う寸法を選び、必要ならレスポンシブな複数サイズを用意します。別の用途に備えて元画像を保管してください。
Core Web Vitalsの評価が高ければ検索順位も上がりますか？
順位が保証されるわけではありません。Googleのシステムは複数のシグナルを使い、ページ エクスペリエンスの良好な結果だけで上位表示は保証されません。