Web サイトを展開する際、開発者は通常、すべての画面サイズに同じ画像を使用しますが、ブラウザーにサイズ変更を依存できないため、これは良い習慣ではありません。このような状況では、応答画像が有効になり、対応するデバイスに適切なサイズと品質で画像がダウンロードされるようになり、ページの読み込み速度が向上します。
レスポンシブ画像を使用してページの読み込み速度を向上させるにはどうすればよいですか?
レスポンシブ画像を使用してページの読み込み速度を向上させるには、次の方法を検討してください。
例 1: 「srcset」属性を使用したレスポンシブ画像によるページの読み込み速度の向上
レスポンシブ画像を適用する最も便利なアプローチは、「 ソースセット 「」に蓄積された属性 <画像> ' 鬼ごっこ。この属性を使用すると、プログラマはさまざまな画像サイズを指定でき、ブラウザはユーザーの画面サイズに応じて最適な画像を自動的に選択します。以下はデモンストレーションです。
DOCTYPE html >
< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< タイトル > タイトル >
頭 >
< 体 >
< 画像 送信元 = 'F:\ジョブ技術記事\imgre.png' すべて = 「レスポンシブイメージ」
ソースセット = 'F:\ジョブ テクニカル アーティクル\imgre.png 400w、F:\ジョブ テクニカル アーティクル\imgre.png 800w、F:\ジョブ テクニカル アーティクル\imgre.png 1200w'
/>
体 >
html >
このコードでは:
- ” ソースセット 」属性が含まれており、画像のパスと毎回異なる幅を構成します。
- 「」というイメージです。 F:\ジョブ技術記事\imgre.png 400w ” は、幅が ” の画像パスを表します。 400 ”ピクセル。
- この情報に基づいて、ブラウザはユーザーの画面サイズに基づいてダウンロードするのに最適な画像を分析し、小さい画面にはより小さい画像が表示されるようにして、帯域幅を節約します。
出力
例 2: 異なるピクセル密度を指定して、レスポンシブ イメージによるページの読み込み速度を向上させる
この例では、高解像度ディスプレイ用のさまざまなピクセル密度とともに画像パスが指定されます。これは、「 ソースセット ” 属性を以下に示します。
DOCTYPE html >< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< タイトル > タイトル >
頭 >
< 体 >
< 画像 送信元 = 'F:\ジョブ技術記事\imgre.png' すべて = 「レスポンシブイメージ」 ソースセット = 「F:\JOB TECHNICAL ARTICLES\imgre.png 1x、F:\JOB TECHNICAL ARTICLES\imgre.png 1.5x、F:\JOB TECHNICAL ARTICLES\imgre.png 2x」
/>
体 >
html >
このコード スニペットでは、ピクセル密度を変えて画像パスを 3 回指定します。これは、さまざまな画面で最高の品質を確保するために、ブラウザーが最も適切な画像を選択するようなものです。
注記： ” 1x 」ピクセルはデフォルト値であるため、画像のパスに関連付けるかどうかはユーザーが選択できます。
出力
例 3: 「sizes」属性を使用したレスポンシブ画像によるページの読み込み速度の向上
状況によっては、画面上の実際の画像サイズが画面の幅と異なるという制限が発生する場合があります。この問題に対処するために、「 サイズ 」属性を利用して、メディア クエリまたは固定サイズに関する画像サイズを含めることができます。以下はコードのデモです。
DOCTYPE html >< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< タイトル > タイトル >
頭 >
< 体 >
< 画像 送信元 = 'F:\ジョブ技術記事\imgre.png' すべて = 「レスポンシブイメージ」 ソースセット = 'F:\ジョブ テクニカル アーティクル\imgre.png 50w、F:\ジョブ テクニカル アーティクル\imgre.png 800w、F:\ジョブ テクニカル アーティクル\imgre.png 1200w'
サイズ = '(最大幅: 800px) 100vw、800px'
/>
体 >
html >
このコード ブロックでは、「 サイズ ” 属性はメディア クエリとサイズを統合します。これは、ユーザーの画面幅に応じて画像サイズを選択するようにブラウザを誘導するものです。これにより、画像がターゲットの最大幅を超えないようになります。
出力
「sizes」属性を使用する際の重要な考慮事項
「」の使用にはいくつかの制限があります。 サイズ ” 属性も以下にリストされています。
- 「」で複数のメディアクエリを利用する場合 サイズ ” 属性では、最初の真のメディア クエリが選択されていることを確認してください。また、メディア クエリが最も具体的なものから最も具体的でないものの順に並べられていることを確認してください。
- 「sizes」属性はパーセンテージ サイズをサポートしません。これは、ブラウザは親要素の幅を認識するまで、パーセンテージで指定されたものの幅がどのくらいになるかを認識しないためです。
例 4: 「
” <写真> 」要素を使用すると、プログラマは複数の画像を異なる画面サイズで表示および展開できます。デバイスによってコンテンツが異なる場合に役立ちます。以下はコードのデモです。
DOCTYPE html >< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< タイトル > タイトル >
頭 >
< 体 >
< 写真 >
< ソース メディア = '(最大幅: 100px)' ソースセット = 'F:\ジョブ技術記事\imgbanner.png' />
< 画像 送信元 = 'F:\ジョブ技術記事\imgre.png' すべて = 「レスポンシブイメージ」 />
写真 >
体 >
html >
これらのコード行によると、次のようになります。
- 「」を指定してください <写真> 』をためる要素。 <ソース> 」要素をさまざまな画像に使用し、ブラウザーがユーザーの画面サイズに基づいて適切なものを選択できるようにします。
- また、「 <ソース> 」要素は画面サイズ、「」で指定した画像に適したものになります。 <画像> ” タグはフォールバックとして機能します。
- これにより、予期せぬ場合に代替画像が追加され、向上したページ読み込み速度が維持されます。
出力
結論
ページの読み込み速度は、「 ソースセット ” 属性を使用して、さまざまなピクセル密度を指定します。 サイズ ” 属性、または「 <写真> ' 要素。 ” <写真> 」要素アプローチは、同じ画像に追加のオプションがなくても、予期せぬ場合に代替画像を追加するため、他のアプローチがうまくいかない場合に検討できます。