title: iOS app non-retina and retina images concept
body: <p>I am asking this question just for information and to clear my concepts about images in <code>iOS</code> application (<code>Retina</code> and <code>non-retina</code> devices).</p>
  
  <p><strong>What I currently do is</strong></p>
  
  <p>When I develop an <code>iPhone</code> application and I have to show an image lets say on <code>UIButton</code> using <code>Interface builder</code> I take two images lets suppose submit.png button image of following sizes</p>
  
  <ol>
  <li>100x100 px (submit.png)</li>
  <li>200x200 px (submit@2x.png) for retina display </li>
  </ol>
  
  <p>And in <code>Interface builder</code> I will set the size of <code>UIButton</code> 100x100 px and its just works perfectly.</p>
  
  <p><strong>Question:</strong></p>
  
  <p>Why don't we place only single image lets say submit.png</p>
  
  <ol>
  <li>200x200 px (submit.png)</li>
  </ol>
  
  <p>And set <code>UIButton</code> size 100x100 px in <code>interface builder</code> and same image will be used in both <code>retina</code> and <code>non-retina</code> devices. </p>
  
  <p><strong>What is the actual reason of using two images rather than one single image of retina size?</strong></p>
  
  <p><strong>Another similar question,</strong> </p>
  
  <p><code>iPhone 5</code> is only available in <code>retina</code> display but we have to place its <code>Default</code> images as <code>Default-568h@2x.png</code>. Why at 2x?</p>