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.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

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 runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

Newsletter

17 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
      +3
  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
      +6
    • 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
  9. pyro Sep 24, 5:50 am

    paula :)

    you are pretending to be smart girl. i give you chance to prove that what you are acting here. you whole article is created on several facts, but what is most important here and all over, is the “SVG” you meaned

    please paula, you are combining here svg images retina displays and (WAIT FOR IT) – responsive web design. which means your writyings must be done on your personal experiences.

    this is all about something that you are talking here about “you-must-solved” issue what nobody else on internet succeeded.

    please, oh mighty paula and help us, poor people of internet. how did you solved including / embeding / linking SVG file as image file (img, src) or background (css, js, html) into actual versions of OSX? how did you do that please?

    nobody exept you (on the whole internet, maybe..) did not solved this mysterious combination issue: SVG + RETINA + RESPONSIVE WEB

    you must know why, because if you are talking about RESPONSIVE WEB, it automatically means, you must be done a solution that is not working on just iphone, or computer, but it is working on all devices with OSX

    please save my life, i have to be done a milestone project, with heavy graphics, that have special requirements. one of life saving solutions is use SVG

    now prove your words please and instead of generating absurd blog posts and show us how you solve SVG/RETINA/RESPONSIVE WEB issue

    thank you
    with all respect

    Tomas

    Reply
    0
  10. pyro Sep 24, 6:25 am

    one more thing. why are you forcing people to use two kind of images and doubling its size? did you before exported image from photoshop for responsive website?

    do you know that normal resolution of image is not PIXEL, but DOTS PER INCH. it means, you dont have to create two images! how about to keep image on 144dpi (72dpi is normal, you must know it), keep size – 150×150 and export image for web?

    you did not tried any of this parts of code, that you are teaching about? you are showing parts of code, that are not working:

    “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.”

    OMG did you tried this? you did? no! 300×300 to 150×150, only because there is on google something about device-pixel-ratio 2? * did you know that what are you writing about is using web browser to stretch normal size image and use antialiasing engine on it? did you knew that every image like this is SLOWING DOWN your web browser and does not have ***ANYTHING*** with device-pixel-ratio! only what you saw is antialiasing engine on stretched image to hide destroyed quality? every browser – chrome, firefox, safari, opera, internet explorer has its own antialiasing engine = it will do all the same on every device, not depending ON RETINAS displlay ;))))

    device-pixel-ratio does not have anything with pixel you know from photoshop :) device-pixel-ratio is counter of density light points what is display made of. (dots per inch? dpi? how big is one pixel? – well – depending on DPI density? yes?)

    you are not a bad person, seems to be pretty smart. but you have no idea what you put into this article

    paula, please.. in future, when you will have a “good idea” to write about. try to check your “examples” on other devices. not just like maybe this example.. :) try to check for exmample – stupid – chrome on windows 7 pc with normal office monitor; compare it! if you would be comparing it with retina, you should notice it. windows pc will have suspicious allmost same quality..

    why? because you think, that is that “retina” you are writing about? or webkit / gecko antialiasing engine what is really slowing down whole browser? well that is really how to DO NOT MAKE RESPONSIVE WEB PAGES. responsive has to make web faster, or does not?

    *i understand you, because when i use translator to tranaslate from slovak to polish and back, iam lauging enough. so device pixel ratio had to be similar translation

    try to google “how big is pixel”

    and dont combine DPI and PPI, because pixels per inch must be coutned using “how big is pixel” and that all this marketing bullshit around . it is just like 50 and 200 hz tv – there is doubled frame ratio, with gently added blur between start and end of each frame

    your “idea” – not-a-solution is the same like writing that 4k video quality can be watched on 1080p tv :) its not? really its not? only whay you see is sharper image, not the real 4K quality, do you get it ?

    doubling image pixel size is same as watching 4k movie on 1080 and telling others, donjt you see? its 4k!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters