Web 画像最適化ガイド

Web 画像形式を理解する

適切な画像形式を選択することは、Web 最適化の基礎です。各形式は異なる目的を果たし、独自の利点を提供します。 JPEG は写真や多くの色を含む複雑な画像に最適で、優れた圧縮率を提供しますが、損失が大きくなります。 PNG は、透明度、シャープなエッジ、限定されたカラー パレットを備えた画像に優れているため、ロゴやグラフィックに最適ですが、ファイル サイズが大きくなる傾向があります。 WebP は次世代の Web 画像を表し、高品質を維持しながら JPEG や PNG の両方に比べて優れた圧縮を実現します。非可逆圧縮と可逆圧縮の両方、透明性、アニメーションをサポートします。ただし、ブラウザのサポートは広範ではありますが、普遍的ではありません。 AVIF はさらに新しく、JPEG よりも最大 50% 小さい優れた圧縮率を提供しますが、ブラウザの採用は依然として増加しています。 ロゴ、アイコン、シンプルなイラストなどのベクター グラフィックスには、SVG が最適です。 SVG 画像はベクター形式なので、品質を損なうことなく無限に拡大縮小でき、多くの場合、ファイル サイズは小さくなります。コードで編集することもでき、対話性もサポートしているため、最新の Web デザインに非常に多用途です。

• JPEG: 写真や複雑な画像に最適
• PNG: 透明性とシャープなエッジを持つグラフィックスに最適
• WebP: 優れた圧縮率を備えた最新の形式
• AVIF: 優れた圧縮率を備えた最新フォーマット
• SVG: スケーラブルなベクター グラフィックスとアイコンに最適

画像圧縮技術と品質設定

圧縮を理解することは、画質とファイル サイズのバランスをとるために重要です。 JPEG などの形式で使用される非可逆圧縮では、ファイル サイズを削減するために画像データが永久に削除されます。重要なのは、許容可能なビジュアル品質を維持しながら圧縮が最大化されるスイート スポットを見つけることです。ほとんどの Web 画像では、JPEG 品質設定を 75 ～ 85% にすると優れたバランスが得られますが、これは画像の内容によって異なります。 PNG および一部の WebP 画像で使用される可逆圧縮は、品質を損なうことなくファイル サイズを削減します。これは理想的に聞こえますが、可逆ファイルは通常、可逆ファイルよりもはるかに大きくなります。これにより、可逆圧縮は、電子商取引用の製品写真やさらに編集される画像など、品質が最も重要な画像に最適になります。 高度な圧縮技術には、高品質パスで画像を表示するプログレッシブ JPEG ローディングや、人間の目があまり敏感ではない色情報を削減するクロマ サブサンプリングが含まれます。最新のツールは知覚的な最適化も提供し、人間の目が最も注目するものに基づいて圧縮を調整し、多くの場合、従来の品質設定よりも優れた結果を実現します。

解像度と応答性の高い画像の最適化

現代の Web デザインでは、スマートフォンから 4K モニターに至るまで、あらゆる環境で鮮明に見える画像が求められます。重要なのは、ピクセル密度とデバイスの機能を理解することです。幅 1200 ピクセルの画像はデスクトップでの表示には最適かもしれませんが、375 ピクセルのモバイル画面ではやりすぎで、帯域幅が無駄になり、読み込み時間が遅くなります。複数の画像サイズを作成すると、各デバイスが適切なサイズの画像を受信できるようになります。 レスポンシブ画像は、HTML の srcset 属性と picture 要素を使用して、画面サイズと解像度に基づいて異なる画像を提供します。この技術により、モバイル ユーザーの画像ペイロードを 50% 以上削減できます。たとえば、400 ピクセルの画像をモバイル デバイスに、800 ピクセルの画像をタブレットに、1200 ピクセルの画像をデスクトップ画面に提供するとします。 Retina スクリーンのような高密度ディスプレイでは、鮮明な外観を得るために 2 倍の解像度の画像が必要です。 画像のサイズ変更では、Web サイト上の実際の表示サイズも考慮する必要があります。ユーザーの画面に関係なく、幅 300 ピクセルで表示される画像は幅 1200 ピクセルである必要はありません。画像は常に実際の表示サイズに合わせて最適化し、特大の画像を提供するのではなく、CSS を使用して小規模なスケーリングを処理することを検討してください。

パフォーマンスへの影響と読み込み戦略

画像は Web サイトのパフォーマンスに大きく影響し、多くの場合、ページの総重量の 50 ～ 70% を占めます。最適化されていない大きな画像は、Web サイトの読み込み速度が遅い主な原因の 1 つであり、ユーザー エクスペリエンスと検索エンジンのランキングに直接影響を与えます。読み込み時間が 1 秒増えるごとに直帰率が最大 32% 増加する可能性があるため、画像の最適化はビジネス上重要な考慮事項となります。 遅延読み込みは、ビューポートに入る直前まで画像の読み込みを遅らせる強力なテクニックです。これにより、特に画像の多いページの初期ページ読み込み時間が大幅に短縮されます。最新のブラウザは、loading=”lazy” 属性によるネイティブの遅延読み込みをサポートしていますが、JavaScript ライブラリはより高度な制御と幅広いブラウザ サポートを提供します。 画像のプリロード戦略もユーザー エクスペリエンスを向上させることができます。重要なスクロールせずに見える画像は最速で読み込まれるように最適化する必要がありますが、スクロールせずに見える画像は遅延読み込みできます。フル解像度の画像の読み込み中に即座に視覚的なフィードバックを提供するには、低品質の画像プレースホルダー (LQIP) またはブラーからシャープへのエフェクトの使用を検討してください。プログレッシブ JPEG エンコーディングにより、画像は低品質ですぐに表示され、より多くのデータが読み込まれるにつれて鮮明になります。

SEO とアクセシビリティに関する考慮事項

検索エンジンはページ速度をランキング要素として考慮するため、SEO の成功には画像の最適化が不可欠です。画像を適切に最適化すると、ページの読み込みが速くなり、検索ランキングとユーザー エクスペリエンスの向上に貢献します。さらに、画像ファイル名と代替テキストは検索エンジンに貴重なコンテキストを提供し、コンテンツが画像検索結果に表示されるようにします。 アクセシビリティには、スクリーン リーダーや視覚障害のあるユーザー向けに画像コンテンツを説明する、思慮深い代替テキストが必要です。代替テキストは、画像の内容とその目的をコンテキスト内で説明する、説明的かつ簡潔なものである必要があります。情報価値を追加しない装飾画像の場合は、空の alt 属性 (alt=””) を使用して、スクリーン リーダーがそれらを不必要にアナウンスしないようにします。 構造化データとスキーマ マークアップにより、検索エンジンが画像を理解して表示する方法が強化されます。適切な画像サイトマップは、検索エンジンが画像をより効果的に検出し、インデックスに登録するのに役立ちます。ファイルの命名規則は、関連する場合は説明的でキーワードを豊富に含むものにし、「image1.jpg」のような一般的な名前を避け、「red-running-shoes-front-view.jpg」のような説明的な名前を使用する必要があります。