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.