web-dev-qa-db-ja.com

GTmetrixはレスポンシブデザインの最適化されていない画像について不平を言います

GTmetrixのWebサイトでは、次の理由で「画像の最適化」のスコアが低くなっています。

メインページには、画像のある4つの列があります。各列は画面解像度の25％を占めるため、私の1920x1080pxモニターでは、各画像の幅は463pxです。ただし、ユーザーが600pxから1200pxの解像度のデバイスでメインページを表示している場合、4列ではなく2列しか表示されないため、4列（1200pxに近い場合）に比べて画像の幅が大きくなります。 1199pxブラウザー幅で2つの画像を表示しているとき、各画像の幅は576pxです。ここに問題があります。

576pxのナチュラルイメージサイズを使用する場合、576metxの幅のナチュラルイメージを使用するため、GTmetrixは「次のイメージを最適化してサイズをXに縮小します」と言いますが、4列の場合、必要な最大サイズは463px。

463pxで自然な画像を使用する場合、2列を使用するときに表示される画像は576pxにストレッチされ、品質が低下します。

今、私は両側を満足させる方法を理解することができません。

htmlcssimagesresponsive-webdesign
1
Bobimaru

ページのパフォーマンスを最適化しながら、高解像度の画像を高dpiのクライアントに提供する最良の方法は、次のようにimg srcset HTML属性を使用することです。

<img
 srcset="
  /img/image4x.jpg 4x,
  /img/image3x.jpg 3x,
  /img/image2x.jpg 2x,
  /img/image1x.jpg 1x"
 src="/img/image1x.jpg"
>

この例では、大きい乗数は、デフォルトサイズの2倍、3倍、4倍の画像にリンクしています。最新のブラウザは、高解像度ディスプレイで実行されている場合、より大きな画像を自動的に選択するのに十分なほどスマートです。

sizes属性を使用して、さまざまな画面サイズに最適な画像をブラウザに示唆することもできます。

詳細：

  1. https://html.com/attributes/img-srcset/
  2. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
2
Maximillian Laumeister