Web 用の画像最適化: 完全ガイド
2026-05-09
画像のサイズを変更する
ページの読み込みが遅いとコンバージョンが失われます。調査によると、ユーザーの 40% が 3 秒以上かかるサイトを放棄します。最大の原因は？最適化されていない画像。ホームページ上に 5 MB の写真が 1 枚あると、高速接続でも読み込み時間が膨大になる可能性があります。
画像の最適化チェックリスト
<オル>2026 年の推奨寸法
- ヒーロー画像: 最大 1920×1080 (フル HD) または 2560×1440 (2K)
- ブログ投稿のヒーロー: 1200×675 (16:9)
- 製品写真: 1500×1500 (ズーム対応)、800×800 のデフォルト表示
- アバター: 256×256 (サムネイルは縮小されます)
- オープングラフ (ソーシャルシェア): 1200×630
- ファビコン: 32×32、192×192、512×512 PNG
アップロードする前に、画像サイズ変更ツールを使用して写真のサイズをこれらの寸法に変更します。
形式: いつ何を使用するか
- WebP: Web 画像の 95% のデフォルト。同じ品質の JPG より 25 ～ 35% 小さくなります。ユニバーサル ブラウザのサポート。
- AVIF: さらに小さい (JPG より 50% 小さい)。ヒーロー画像に使用します。新しいブラウザはこれをサポートしています。
- JPG: 透明度のない写真。優れた互換性。
- PNG: ロゴ、スクリーンショット、透明性のあるもの。ロスレス。
- SVG: ベクター グラフィック、アイコン、シンプルなイラスト。小さなファイル サイズ、無限のスケーリング。
これらの形式の間で変換するには、PDF7 Image Convert を使用します。
圧縮: どれくらい攻撃的ですか?
写真の場合: 85% の品質で開始します。帯域幅が重要なページでは 75% に低下します。 70% を下回ると、アーティファクトが目立つようになります。 画像圧縮ツールを使用して、適切なバランスを見つけてください。
srcset を使用したレスポンシブ画像
2K 画像を携帯電話に配信しないでください。 HTML の srcset 属性を使用します。
ブラウザは、適合する最小の画像を選択します。画像ごとに 3 つのサイズが必要です。
遅延読み込み
すべての画像に loading="lazy" をスクロールせずに見える範囲に追加します。最近のブラウザでは、ユーザーがスクロールするまでページが読み込まれないため、ページを読み込むたびに帯域幅が節約されます。
100KB ルール
個々の画像は 100 KB 未満にすることを目指します。ヒーロー画像は 200KB まで伸びることがあります。 1 枚の写真が 500 KB を超える場合は、サイズを変更し、圧縮し直す必要があります。