.. Your Daily Design Dosis

Wishing You A Responsive and Retina-Friendly Xmas!

I would like to take the opportunity to wish the readers of the gonzoblog.nl a very merry Christmas and a successful and healthy new year! As a token of my gratitude for the many visitors this year, I made you a retina-friendly and responsive christmas card.

So please, .. you know the procedure by now, resize your browser window! (When on a Smartphone or Tablet, just change the device orientation -> landscape vs. portrait)

Note: It seems that Google Chrome can have some difficulties showing the background-image(s). If so, please refresh your browser once or twice and you should be able to see the different images! In FireFox, IE (9+), Safari and Opera there are no problems and everything works like a charm!

Some background information

Last week I read a very interesting article by Tom Kenny of Inspected Element: “A Responsive CSS Background Image Technique“. A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image (read Tom’s article to know more about how it works).

Actually the idea isn’t that new, FitVids.js also uses the same trick for videos by setting the height to 0 and work out the height depending on the aspect ratio of the video itself and use padding-bottom to reveal the image instead (for more background information, please read: Creating Intrinsic Ratios for Video, by Thierry Koblentz).

But this got me thinking .. okay, I now can serve different responsive background-images by defining them in my various media-queries? So far I only saw examples of this technique in headers of websites, but the different background-images weren’t responsive nor Retina-friendly ..

So I wanted to combine the two techniques and make it possible to show this in the main content of my blog ..

How I did it

First of all we need a trigger in the main content, insert the next code into your text editor:

<a class="background" href="#">Merry Xmas</a>

(You can do this by typing the words ‘Merry Xmas”, insert a link (via text editor) and set destination URL as #. Open the ‘Text’ tab in your text editor and manually insert class="background" into the link as done above)

I think you get the point from here, you can define as much media queries as you want. Although I’m a huge supporter of DRY (Don’t Repeat Yourself), in this case it’s neccessary to include the same 4 CSS rules over and over again.

The percentage in the padding-bottom is the aspect ratio of your image. Divide the height of your image by the width of that same image, then multiply it by 100 and you’ve got your exact percentage (you need to repeat this for every image you’ll use)! If the image height is bigger then the width you’ll have a percentage >100%!

Making your Images Retina-Friendly

Next step is to serve the various HD displays some crispy images as well! As you probably know there are several ways to make your images Retina-friendly. Below I mention some of the common solutions, without going into the details too much:

Image Compression

CSS Image-Set

SVG/Canvas/IconFonts

Pixel Ratio Detection with JavaScript/ jQuery

Server-Side Retina Solutions

IMHO the easiest way to make your images Retina-friendly – and keep their size small – is to double the dimension and use JPG/PNG/GIF Compression. Lately there have been some redesigns in the blogosphere where you see a lot of extra scripts or bloated CSS files to make the images Retina-friendly, .. this doesn’t increase the overall performance at all!

There are some great articles and experiments written about Image Compression and Retina, I strongly recommend you to read these articles if you’re interested in JPG Compression:

Graphics tho, are best to be used as double dimension .pngs or .GIFs with compression (as mentioned in the article: Retina Revolution Follow Up).

These files have no color change, are sharper and much smaller than .jpgs. It is notable to mention that the PNG-24 files are the smallest, in this tutorial I used .pngs to do the job which were compressed in Photoshop (save for Web & Devices). The biggest image (image of iMac) is 1200x960px big and has a file size of 22.40KB ..!

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

7 comments

Thanks for this cool technique! Of course this technique does only apply for background-images, as the get only loaded when a specific media-query applies, did I get it right? This is definitely something I’ve got to try out on my page for the photography section christian-fei.com/photography, but not only there :)

Thanks for your comment and yeah, you’ve got it totally right ;-P Read my comment prior to yours, I’ve tried to explain why this is a great technique for retina-friendly RWD, imho! Please keep me posted when and if you’ll use this technique. I’m intending to use this in the redesign of my corporate website, but still lacking time to do that (client work ;-P)

Have a great evening and once again, keep me posted please! Cheers & Ciao!

Trick is nice, but the images defined in CSS will get downloaded to all devices, which is too bad for bandwidth.. For that reason alone I don’t think it’s a good technique to use.. Clever idea nevertheless of course :)

thanks for your comment, but I think you’re under-estimating the power of background-images and image compression ;-P

The beauty of serving background images in media-queries is that the background that is served is the only one that is downloaded! Reload the page and check ‘network’ or ‘timeline’ in devtools, you’ll see that the resolution will only fire the corresponding background-image, see below:

Another way to demonstrate this, is to delete your cache. Open the page in your desktop en start to resize your browser window. If your cache is clean, you’ll see a ‘blank’ spot first (every time when you’re ‘crossing’ a media-query) and after a little while the new background is visible. That ‘blank’ spot is the time to download the new background-image .. and that’s the same on mobile/tablet, the device orientation fires only the corresponding background-image to download, if you turn your device, you’ll see the same ‘blank’ spot again.

On the other hand, if I had used image in combination with display: none; in the different media-queries, you would been right concerning downloading ALL images, but this is not the case with background-images. Therefore I think this technique is rather well-suited for RWD, imho ..?

And last but not least, using image compression – imho the most rewarding with .jpgs – you still can serve doubled-sized images (to show crispy images on HD displays) and by compressing these save tons of Kb! Please check the mentioned articles and see what (especially) jpg compression means to your loadtime, in many cases the file-size is even smaller than the ‘original’ image with 80% compression and the ‘normal’ dimensions, without loss of quality .. you’ll be surprised just like I was!

I even have done some of these experiment with image compression myself and was flabbergasted with the results ;-P