title: Responsive Images Based On Device Pixel Ratio
body: <p>I am confused about responsive images. <strong>How Device Pixel Ratio can affect an image when viewed on a mobile device.</strong></p>
  
  <p>I have a mobile device with resolution 480x854 with device pixel ratio as 1.5 i.e. if I send an image with width 320px (480/1.5), it will automatically fit into browser's width provided we have specified viewport as,</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>If I provide an image with width 480px, it goes out of the actual width of the browser. But, if specify this,</p>
  
  <pre><code>&lt;style&gt;
      img {
          width: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>It is displayed 100% in browser's width with obviously higher quality than 320px image.</p>
  
  <p>So, <strong>What is the feasible way to display an image based on Device Pixel Ratio?</strong> Do I have to send 320px or 480px (with 100%) image for my device?</p>