title: Image icons in HTML that display nicely in Retina displays
body: <p>I want to have nice images in my HTML that display very nicely on browsers in computers with Retina displays. I'm guessing I just have to have a high resolution image in my <code>img</code> tag. But then the lower resolution browsers will all have to download this bigger file and then downscale it, maybe resulting in a lower quality image than if I downscaled it in a tool like photoshop.</p>
  
  <p>I'm hoping there's something like this I can do:</p>
  
  <pre><code>&lt;img src="/example.png" src-retina="/example-high-res.png"/&gt;
  </code></pre>
  
  <p>What's the proper way to display 2 different images, 1 for normal displays and 1 for retina displays?</p>