Retina Ready Images and Responsive Web Design

I want you to clearly understand what Retina Display is. In the simplest of terms, it means a high definition display, that’s it. Also, Apple products are not excusive to this type of display. Retina Display is simply Apple’s term for is but other phones, tablets and monitors too have higher quality displays. But, because these displays are being widely implemented and used, it is more than ever important to create websites and apps that support these displays.

With that said, let me explain to you why Retina ready images and Responsive Web Design go hand in hand and how to create such images for Responsive Web Design.

What does Retina mean?

Retina Display is Apple’s brand name term which refers to a liquid crystal display that displays pixels at higher density. A simple visualization will explain this concept well so take a look at the image below which compares the pixels between Retina and a standard definition display. In Retina Displays, you get double the pixels in the same amount of space as you would with a traditional display. This is why icons or text on an iPad 2 looks blurrier then on iPad 3.

Standard VS retina

retina Comparison

The dilemma

Designer and developers now have to accommodate different types of displays. This means two things:  users with Retina Displays will either have badly displayed images on designs that did not include Retina support or the designs that do support Retina, the users will enjoy a high quality, crisp imagery that we all crave and love.

Why is Retina important in Responsive Web Design?

The answer to this question is actually very simple: a lot of newest mobile Apple devices have Retina displays (and the new upcoming ones will too) therefore when creating a responsive website you also need to accommodate Retina images into them for the best display. The best display also means the best experience.

How to create Retina ready images in Responsive Web Design?

There are various tool and methods out there. I will discuss only a few mostly because they best accommodate the responsive aspect of this problem.

SVG, FTW!

I am sure you are familiar with SVG image format. Shame if you are not…! But let’s recap anyhow. SVG is an image format for vector graphics that allows those vectors to scale up or down in size without losing their shape. Because vectors are composed of a fixed shape instead of pixels, they can be manipulated in many ways and still have their shape be kept intact and sharp.  Unfortunately, raster images – which are JPG, PNG, or GIF – cannot do that.

Because of the unique ability to resize flawlessly, SVG is a great format to use in Responsive Web Design. No matter the screen size, the image will resize accordingly and look great on any phone, tablet or monitor. This is also true for Retina displays as the SVG image will resize for the pixel density and stay the same shape. You should always use a SVG if you can as it will solve this dilemma for you.

Photographs and Raster Images

I understand that not all images can be a SVG format especially if they are a photo or are already a raster image. There is a possible solution to this issue which is to use image at twice its desired size and display it at 50% of those dimensions. What I mean is that if you have a photo in a website that is 150px wide by 150px tall, use an image that is actually 300px x 300px in size but still display it at 150px x 150px. This way, on a Retina Display the image will show nice and sharp.

There are many ways to have 2x images implemented into your website via HTML, CSS or JS. I will not go into detail about them here but I will show you just the basic methods.

First, if you have an image that is the size of 300px x 300px, in your HTML you can simply declare the height and width of the image to be 150px.

<img src="myIMG.png" height="150" width="150">

Additionally, you can change an image’s width and height in CSS by either declaring the image to be 50% of its size or literally defining for it to be half if you know what half is.

img{
      width: 50%;
      height: 50%;
}

.box img{
      width: 150px;
      height: 150px;
}

Lastly, if the image you want to downsize is a background, this is the code to do the trick:


.box{
      background-image: url(myIMG.png);
	  background-size: 150px 150px;
}

There is a big downside with this method. First, you cannot have a double sized image unless you have access to a bigger image. Obviously, blowing one up and using it isn’t the way to go at all! Additionally, if your website had many images or even some images that are just big in size, the load time can be greatly affected by having to load these now giant file. This is an especially big bummer as many mobile devices use crappy connections whether it is a low Wi-Fi bandwidth or low or slow cell phone service.

But there are ways to fix it too.

Media Queries

When creating a CSS media query you are able to specify more than just device widths or heights. The following code is a sure way to detect if the device has Retina Display. This works best when the images you use on your site are backgrounds of divs so that in the media query you just change the image with the one that is double in size. This way, the big images are only loaded for the Retina Display devices.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

  /* Retina replacement CSS here */

}

Retina.js

Retina.js

 

If you don’t fancy the media query solution that is perfectly fine. There is a JavaScript plug in to solve this issue! “retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.” How this plug in works is that when you have two images, one of the intended/original size and the other one double that size, retina.js detects when there is a Retina Display being used and changes the images accordingly. It is very simple to work with and I suggest checking it out. All you have do is to make sure that you name your images accordingly to work with the plug in.

Icons

svg icons

Thanks to @font-face and fonts that are made up of icons instead of letters, you are welcome to utilize them instead of images. I very well support this method for two reasons. First, fonts are great at scaling in a similar way that SVG do, therefore they not only scale to different screen sizes but also to different resolutions such as Retina.

Also, currently @font-face browser support is very high and is only growing. Most current browsers – mobile and desktop – support @font-face which allows many users to see your icon fonts perfectly. To learn more about @font-face check out this snazzy article: What is @font-face and how to use it in CSS.

Paula Borowska

Paula Borowska loves all thing UX and all thing mobile. She believes all products ought to cater to their users. She loves to talk shop @paulaborowska

Newsletter

15 Comments
  1. l Jan 22, 3:42 pm

    A co z Androidowymi min-device-pixel-ratio: 3/2 ?

    Reply
    +1
    • Paula Borowska Jan 22, 6:53 pm

      Najlepiej bym proponowala dodac nastepmy i nowy media query zebys targetowaw specificzne telefony; w tedy beda najlepsze rezultaty.

      Reply
      +1
  2. Jude Jan 22, 6:17 pm

    Hi, great post, but there’s still one problem that I can’t truly figure out. Using SVG images will increase HTTP Requests, how do you think if using a double sized css sprites image is better than using separate SVG images?
    Thanks

    Reply
    +2
    • Paula Borowska Jan 22, 6:57 pm

      Well, using any image via tag will increase those requests so your issue isn’t going to be with only SVGs. You are right a sprite might help in loading time but for many people creating those with CSS is much harder then creating a vector graphic which is why I went over SVGs and often times the load time will not be effected significantly enough unless the site consists of multiple heavy SVGs.

      Reply
      +6
      • DOwca Aug 2, 7:35 am

        Typically, I use sprites which include small icons and frequently used small images. For simple gradients I use SVG. For large sites with many images, SVG would be overkill. Since it doesn’t cache, it also has to be processed by the browser on every page load. Also, for those who like gradients and rounded corners, you can’t do that with IE9 since css3 linear gradients are not supported. So most use Filter instead. But that doesn’t let you round the corners. SVG gradients do though. Eventually I think browsers will make SVG images cacheable automatically.

        Reply
        +1
    • PHil Jan 31, 2:01 am

      I’m not sure I understand your statement that SVG increases HTTP requests? How so?

      The SVG definition can be contained within the page HTML or included via other means i.e. a .js file etc and given that you can include multiple graphics in the same file (given that SVG equivalents of certain image types, i.e. illustrations / icons rather than rasterized images are much smaller in size anyway) I can only see that there is a need for SVG as a format. Especially if you need dynamic graphics that may depend on user input.

      If I as a developer had to produce an interactive image counter / display that changed it’s output based on output from any client side scripting then I’d rather handle that in the front end using SVG (especially with retina) instead of using rasterized sprite based techniques, AJAX content provision etc.

      As described in the post you can use media queries to ensure that your site’s being browsed by a retina capable device and the high-res image src’s are replaced within the CSS to point to a different file. That means you can construct a 72 DPI and a retina website simply by adding a few lines to your CSS (no extra HTTP requests here either).

      I may have misinterpreted your comment and sorry if I have but I have recently seen what SVG an offer and here’s an example of why I like SVG – http://jsfiddle.net/jcutrell/3C9JW/5/

      And there is no way to create that kind of thing at the moment in page without additional HTTP requests other than Flash (or some very complex JS stuff). It’s supported quite well on most devices now and I for one think it’s a great format. You can go straight from Adobe Illustrator into HTML… Wow :D

      Reply
      +2
  3. idkak Jan 22, 10:55 pm

    In a world where development costs are required to cost less and less peanuts, adding yet more functionality to suit retina displays for devices that cost money … and to ask of the developers to waste time with this is hopefull at best… I for one, although do care about how my work displays on visitor devices, can’t be bothered with yet another waste of time.. in addition to all the loops one must pass through to make sites work for those who can’t be bothered to upgrade their browsers along with those that use non standards compliant browsers (ehm IE). ….

    Reply
    +3
    • Paula Borowska Feb 3, 5:59 am

      Hey, I’m not telling you to do this. If you don’t want to you don’t have to. I just wanted to tell you how in case you did decide to or had a client who made you do it.

      Reply
      +2
  4. Skweekah Jan 23, 2:54 am

    I agree with Idkak. I wouldnt be bothered too much with nuances. Most users wouldnt really notice the difference. Go for it if you have the time or resources, but there’s no need to be too pedantic. I think developers/designers have enough on their plate already.

    That said, great article, as always.

    Reply
    +2
    • Haris Bacic Jan 23, 9:33 pm

      Although it’s true that not many people currently use retina/hi-dpi screens, that will change very soon. Many PC manufacturers like Samsung, Asus, etc. are coming out with their own hi-res displays, so it’s only a matter of time before it becomes the new norm. As web designers, it is our job to keep up with the latest tech and know how to design for it.

      Reply
      +5
    • Paula Borowska Feb 3, 6:02 am

      Thank you – I’m glad you enjoyed it. I think this is something worth knowing as high res displays are only going to increase. I do agree this is another annoyance – for now – but you never know if you’ll have a client who will ask you for this. Inputting an image that’s 2x in size isn’t that hard but it could be a nice selling feature for a few extra bucks for the clients who are willing to pay. Think about that… =]

      Reply
      +1
  5. ryan Jan 23, 4:38 pm

    excellent, very useful and clean explanation! SVG ftw!

    Reply
    +1
  6. Cwebba1 Feb 9, 7:46 am

    Thank you for the various roadmaps. I’m on the hunt! Yesterday I recreated my logo in SVG and what a thrill! My next thought was “now I want to animate it”. I also want to master serving images for retina, which is why I landed here. Tonight I am studying various ways to stack and position background images to decorate my soon-to-launch responsive site. Rocking! Thank you for your help.

    Reply
    0
  7. Nelson Jul 31, 6:56 am

    On the method of serving 2x images and telling they are half size in HTML…

    I think is the best method, because it always works, not only when the user has a retina display but when the user chooses to smart zoom to that picture.

    Then you say that pictures will be heavier. I disagree, because when you have a bigger image, you can ramp up the compression, in my opinion, you get better results in 100k picture with with a higher resolution, than with a small one.

    Bacause when you display a hi res picture in a hi res display, the pixels will be so small that the user will notice less the jpeg artifacts than when displayed on a normal res display.

    Thanks for the article

    Reply
    0
  8. Ingrid Jan 14, 3:01 pm

    Hi,

    I really enjoy your articles. But struggle with this svg format. My wordpress refuses the upload .svg completely due to security problems. On my desktop computer, file explorer doesn’t show svg files, fireworks, adobe bridge and lightroom and internet explorer doesn’t know it.
    So how can I use svg files?

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters