How to add Retina Image?

Retina is future. Apple has released Retina Display which adds pixel density to their devices. In other words, an iPhone 6s with the same resolution as a standard monitor will have twice more pixels. Since, images are scaled with pixels you just need to serve a twice bigger image for retina devices to get a retina image.

Does it mean I have to serve ALL my images as Retina? – Yes, or at least try to serve your logo, icons or small images as retina.

Can I use a plugin? – I strongly suggest to follow the example below. This the best way to serve retina image. However, there are some plugins you might want to try:

  • retina.js – you always serve @2x images but the loading time is significantly increased and if you don’t have @2x image, you will get an error in the console. For SVG, it looks again for @2x which is not needed.
  • WP Retina 2x – works good. I personally use it.

Solution

HTML

By just adding a twice bigger image (width and height) and specifying the width and height (twice smaller) you get retina image.

!-- Image is 600x600. Scaling is done with HTML. -->
<img src="photo.jpg" width="300" height="300" />

CSS

/*non-retina:*/
.icon{
  width: 64px;
  height: 64px;
  background-image: url(icon.png);
}

/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  .icon{
    background-image: url(icon@2x.png);
    background-size: 64px 64px;
  }
}

Fonts

Using fonts like FontAwesome or Material Design Icons adds retina too.

SVG

Using SVG automatically adds retina image. SVG is better than fonts in my opinion.
<img src="wp-content/themes/one%20minimal/img/svg/monitor.svg" alt="Design" height="96" width="96">

Favicon

Please, check this article about iOS products.

What do you think? Is there a better or proper way? Share in the comments below.

Leave a Reply