javascript - デバイスのピクセル比に基づくレスポンシブ画像

Question

レスポンシブ画像について混乱しています。モバイル デバイスで表示したときにデバイス ピクセル比が画像に与える影響。

デバイスのピクセル比が 1.5 の解像度 480x854 のモバイル デバイスを使用しています。つまり、幅 320px (480/1.5) の画像を送信すると、ビューポートを次のように指定した場合、ブラウザの幅に自動的に収まります。

<meta name="viewport" content="width=device-width, initial-scale=1">

幅 480px の画像を提供すると、ブラウザの実際の幅からはみ出してしまいます。しかし、これを指定すると、

<style>
    img {
        width: 100%;
    }
</style>

320pxの画像より明らかに高画質でブラウザ幅100%で表示されます。

では、デバイスのピクセル比に基づいて画像を表示する実行可能な方法は何ですか? デバイスに 320px または 480px (100%) の画像を送信する必要がありますか?