CSSスプライト画像とレスポンシブデザイン。フルサイズと応答サイズの両方をロードしますか？

Question

私はイメージを最適化し、私のウェブサイトのために私のサーバーへのリクエスト数を減らしているので、イメージCSSスプライトを作成してイメージの数を減らしています。

予想通り、ほとんどの画像は、サイトデザインのTablet/Mobileレイアウトでは小さくなります。

これにより、スプライトに含まれるアイコンと画像のモバイル/タブレットサイズ用の画像スプライトを作成し、@メディアクエリで切り換える予定です。実際に必要なサイズよりもはるかに大きな画像をダウンロードしないようにしますモバイル用です

私の質問はおそらくかなり単純なものです。@mediaクエリの外で参照されるデスクトップスプライトイメージと@mediaクエリのモバイル/タブレットバージョンがあります。誰かがモバイルからウェブサイトにアクセスした場合、デスクトップ（携帯電話の@mediaクエリが有効になるために必要ではない）とスプライトのモバイル/タブレットバージョンの両方を要求しますか？ @mediaクエリで必要とされるサイズのモバイル/タブレットバージョンを要求するだけのスマートなのでしょうか？

ありがとうございます。

Answer 1

はい、両方の画像アセットがダウンロードされます。これを確認する最も簡単な方法は、デベロッパーツールを開いて画像要求のネットワークパネルを確認することです。モバイルでは、デスクトップアセットとモバイルアセットをリクエストします。

メディアアセットをダウンロードしてデスクトップアセットをダウンロードする1つのターゲティングデスクトップと、モバイルアセットをダウンロードする1台のモバイルをターゲットにすることができます。