How to make your Bootstrap site retina-ready

Learn how to add stunning retina-ready images to your Bootstrap site.

Why Bother?

Well first of all, making your Bootstrap site retina ready is totally optional but as we touched on in a previous retina article the amount of retina ready devices in circulation is now into the millions so it’s worth consideration before opting out.

Let your users tell you!

Here at BootBites those users on retina devices will have noticed we do not server retina images (yet), yeh no joke! The reason, we launched back in October 2015 just 2 months ago and we don’t yet know if it’s worth it for the site vs providing site updates or content.

To help us decide whether to go retina or at least put priority on it we’re using Google Analytics (and a snippet inspired by a gist from Andy Rossi) to provide insight into our user base to see what percentage of users are on retina enabled devices. We’ll be collecting data for a number of months before deciding if and when we will make the site retina ready.

So far only about 25% of our traffic is on retina enabled devices.

First you’ll need to setup a Created Custom Dimension in your Google Analytics account then add the snippet to your page:

<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");

ga("create", "UA-YOUR-GA-ACCOUNT-ID", {"cookieDomain":"auto"});
ga("require", "linkid", "linkid.js");
ga("set", "anonymizeIp", true);
var pixelRatio = (window.devicePixelRatio >= 1.5) ? "high" : "normal";
ga('set', 'YOUR-CUSTOM-DIMENSION-NAME', pixelRatio);ga("send", "pageview");
</script>

 

Once the data has been tracked for a couple of days you should be able to create a custom Google Analytics report so you can view the data.


Preparing & Optimising Retina Images

This is probably the most vital part of providing retina images, serving badly optimised retina images can really clog up a mobile connection! The general idea is you make the retina image double the pixel size of the non-retina image & the trick is to not make them double the file size too.

Image compression

It’s best to think “retina first” so that you can downsize your images (using Photoshop of similar) rather than upscale them where you run the risk of loosing quality.

When creating .jpg retina images in Photoshop experiment with lower quality on the retina image version, you can actually get away with much lower quality settings than you might expect, in some cases you might find your retina image ends up a smaller file size as the original.

Pro Tip: Squeeze every last kb out your images with ImageOptim.

Filenames

We recommend you save your retina images with the same name as the original but with something like @2x or -2x before the file extension ie. myimage@2x.png or myimage-2x.jpg. This make it easy to determine retina images from non-retina ones and some plugins require a predicted naming pattern.


Image editing programs

We love using Photoshop but they are a number of free alternatives out there for both Mac & Windows:


Technical Approach Options

If you’re already decided and you want to make your Bootstrap site retina ready then the good news is it’s not too tricky from a technical point of view.

1. CSS Backgrounds

Using media queries we can detect browsers that support retina images which couples nicely with Bootstrap sites that already require media query support to function correctly.

In the CSS snippet below we define a default background image for all browsers and then using media queries we detect the pixel-ratio or min-resolution (multiple media queries are for targeting different browsers) and then serving a retina image which is double the pixel size of the non-retina version but squeezed into the same HTML wrapper space using CSS3 background-size property.

CSS:

.my-retina-background-image {
  background-image: url("PATH/TO/NON-RETINA-IMG.FILEEXTENSION");
}
@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) {
    .my-retina-background-image {
      background-image: url("PATH/TO/RETINA-IMG");
      background-size: WRAPPER-WIDTH WRAPPER_HEIGHT;
  }
}

 

If you’re using LESS then there’s already a not so well know mixin called .img-retina built into Bootstrap 3 although it will be removed in Bootstrap 4.

Retina.js also offers both LESS & SASS mixins for retina background images.


2. HTML img Tags

There’s a couple of retina Javascript plugins out there, many have gone out of development with the increase browse support for SVG (more on that below) but the principle is pretty much the same for all these plugins:

  • Offer a default image in your HTML
  • Use Javascript to see if the browser supports retina & replace the default images with retina ones if retina is support

We’ve worked with both Retina.js and Unveil.js, both of which make retina images relatively simple to implement. Retina.js is probably (just) our recommended option because it seems to be in more active development.


Retina.js Usage

HTML:

<img src="/images/my_image.png" data-at2x="http://example.com/my_image@2x.png" />

 

data-at2x is the retina version of the image, it’s important you ensure these images exists as the plugin does not check whether files exist so you could end up with broken images.

SVG

This is probably beyond the realm of this beginner/intermediate tutorial/article but we couldn’t talk about retina images without mentioning SVG. SVG is a vector image format which means they can be scaled much better without loose of quality making it perfect for retina.

Downside to SVG is the browser support is still only basic so in most cases you’ll need to implement some sort of fallback and also you kind of need to know your way around Photoshop & Illustrator although inkscape.org offers a nice free alternative.

SVG is definitely the future and we’ll be looking at it in more depth in future tutorials.


Summary

Hopefully that gives you a good overview of how to implement retina images in your Bootstrap websites, download the demo files and experiment and post any questions in the new comments section below.

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *