title: How to make retina ready image that can be used on retina and non retina devices
body: <p>This is a follow up to the link below</p>
  
  <p><a href="https://stackoverflow.com/questions/15341857/preparing-the-images-for-retina-ready-web">Preparing the images for retina-ready (web)</a></p>
  
  <p>This is clarification, because so many words mean different things to different people. It appears that to have one image that looks good on both retina and non-retina device:</p>
  
  <p>if the image on the screen should be max-width of 400 and max-height of 300, then the image itself should be 800 x 600, with a ppi of 144. Then the file should be highly compressed to minimize its download time.</p>
  
  <p>When you display the image, you force it to its max-width and max-height using css/html code like this:</p>
  
  <pre><code>&lt;img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" /&gt;
  </code></pre>
  
  <p>Is this correct? (I have already resolved that our company won't be using responsive.js or a cdn.)</p>