重複の可能性:
純粋な css で Retina ディスプレイ画像を表示する
Retina ディスプレイを使用しているユーザーに高品質の画像を提供するために、Retina ディスプレイのメディア クエリについていくつか読んでいます。例を示し、デバイスが Retina 対応であるかどうかに応じて、いずれかを提供します
または、画像を 1 つ持っていて、メディア クエリを使用して、その画像を Retina 対応デバイスに最高の品質で提供しますか。
私の 2 番目の質問は、ユーザーが Retina 対応デバイスを使用している場合に、すべての画像を最高品質で提供するようにブラウザに指示する方法です。
これが基本的な質問である場合は、アドバイスをいただければ幸いです。
IMO、デバイスの解像度ごとに異なる画像を提供する必要があります-主な理由は、小さなデバイスでは帯域幅接続が低く、リソースが少ない可能性があるため(ローカルキャッシュを検討してください)などです-解像度の低い画像(サイズが小さい)がより良い代替手段になります.
静的アセットを作成するか、何らかのツール/ハンドラーを使用してそれらを動的に作成するかは、別の問題です。たとえば、アダプティブ イメージは、後でアプローチする PHP ベースのソリューションです。
編集
2番目の質問については、メディアクエリを使用している場合、ブラウザは毎回その決定を下します-IMO、メディアクエリを使用してそのデバイス用のcssファイル全体を適用する以外に解決策はありません。しかし、パフォーマンスの観点からは大きな違いはないと思います。
Web でいくつかの解決策を検索してみましたか? 何か試しましたか？
たとえば、Retina.jsを試しましたか?
いわゆる「レティーナ」ディスプレイの問題は、デバイスのブラウザーがその解像度についてあなたに嘘をつき、あなたのウェブサイトにあるすべての画像と他のすべての寸法をスケーリングすることです. それらが嘘のない単なる高解像度ディスプレイであれば、そのような問題はなく、標準的なレスポンシブ デザインのテクニックとレスポンシブ IMG のトリックはうまく機能します。
残念ながら、そうではなく、デザインは次のことに対処する必要があります。