一般的な Web ページでは、ダウンロードされるバイトの大部分を画像が占めます。そのため、画像の最適化は、実行できる最も効果的なパフォーマンス修正になります。Google はページ エクスペリエンスをランキング シグナルとして使用するため、読み込み時間を短縮し、コア ウェブ バイタルを改善し、SEO にも役立ちます。
画像がページの重みを占める理由
HTML、CSS、JavaScript は通常、キロバイト単位で測定されます。最適化されていない 1 枚のヒーロー写真はメガバイト単位で測定できます。画像の重みを減らすことは、他のほとんどの変更よりも読み込み時間にはるかに大きな影響を与えます。
ほとんどのサイトを修正する 3 段階の最適化
- １．サイズ変更: 元のカメラの解像度ではなく、表示されている寸法 (高 DPI 画面の場合は 2 倍) で画像を提供します。
- ２． WebP に変換: 同じ画質で JPEG より 25 ～ 35% 小さく、ユニバーサルな最新ブラウザをサポートします。
- 3.圧縮品質 75 ～ 82% は画面上で視覚的に同一ですが、劇的に軽くなります。
これが Core Web Vitals にどのように役立つか
最大のコンテンツフル ペイント (LCP) 要素はヒーローのイメージであることが非常に多いです。より小さく、適切なサイズのヒーローは読み込みが速くなり、Core Web Vitals の中で最も画像に敏感な LCP を直接改善します。圧縮をペアにする loading="lazy" スクロールせずに見える画像と露骨な表現 width/height の属性も CLS スコアを保護します。
ヒント: 画像フォルダー全体を一度にバッチ圧縮し、ZIP をダウンロードします。さらに詳しく知りたい場合は、ウェブに最適な画像形式と画像ファイル サイズを削減する方法をご覧ください。
レスポンシブ画像を忘れないでください
圧縮後、複数のサイズを提供します srcset なので、携帯電話には小さいバージョンがダウンロードされ、デスクトップには大きいバージョンがダウンロードされます。圧縮と応答性の高い配信は、高速で鮮明な画像を実現するための完全なレシピです。
Web 用に画像を最適化する方法
表示寸法に合わせてサイズを変更します
4000 ピクセルの画像を 800 ピクセルのスロットに提供しないでください。各画像を実際に表示される最大サイズ (網膜の場合は×2) にサイズ変更します。
WebP に変換して圧縮
WebP に変換し、75 ～ 82% の品質で圧縮します。これにより、通常、同じ外観で JPEG よりも画像の重さが 25 ～ 35% 削減されます。
アセットフォルダー全体をバッチ処理します
サイトのすべての画像を一度にドロップして ZIP をダウンロードし、最適化されたバージョンを出荷します。
🔧 画像の圧縮をお試しください — 無料、プライベート、アップロードなし
ファイルをドロップすると、数秒で小さいバージョンが得られます。品質スライダー、形式の切り替え、バッチ処理をすべてブラウザーで実行できます。
画像の圧縮を開く →よくある質問
画像圧縮によりサイトの速度はどの程度向上しますか?
たくさん — 通常、画像はページの重量の大部分を占めます。サイズ変更、WebP への変換、圧縮により、合計ページ サイズが半分以上削減され、読み込み時間が直接改善されます。
画像圧縮は SEO に役立ちますか?
はい、間接的にです。ページの高速化とコア ウェブ バイタル (特に LCP) の改善は、Google のページ エクスペリエンス シグナルの一部です。
Web サイトの画像に最適な形式は何ですか?
ほとんどの写真やグラフィックに対応する WebP — 同じ品質の JPEG より 25 ～ 35% 小さく、最新のすべてのブラウザでサポートされています。
画像を圧縮すると画面上の品質が低下しますか?
適切なサイズの画像で 75 ～ 82% の品質を設定すると、画面上では違いが見えなくなりますが、ファイルははるかに軽くなります。