Working with responsive images

Responsive design is something that I feel is valuable in web design and development. It is something that allows you to not only control all your content from one view but also forces you to structure your content well between mobile, tablet and desktop. However responsive design does come with some drawbacks and difficulties and one of the biggest is serving up responsive images. Serving up images at the incorrect sizes can really cause issues, you will either end up with small blurry images or large images that are scaled down and cause slow page load. You need to cater for everything from large high resolution desktop screens to small phones and everything in-between, whilst also accounting for pixel density on things like retina screens.

I like to use the picture and srcset tags as well as the PictureFill Javascript library to serve up my retina images. I prefer this solution because the srcset tag has pretty good browser support and picture support can be polyfilled in older browsers and Internet Explorer with the PictureFill library. This library also does not rely on jQuery to work so it can be loaded asynchronously, letting the content load first.

You can use srcset and picture tags independently and they can be very useful, but when you bring the two together you get the flexibility to specify exactly what image you want at each screen size and pixel density.

You can of course have one div element with a background image and swap that out in the css using media and retina queries but I have found this can get quite messy. It is also better for content structure and accessibility to have image tags marked up in the HTML. The Picture tag allows you to specify multiple sources in one html tag. Then you can combine this with the srcset tag to serve images for set media sizes and also server retina images when required.

This solution to retina images may seem quite bulky in terms of the amount of images needed but I try to use as few images on the page as possible in websites and use icon fonts and svgs where possible. This is of course not always possible, but you can setup Photoshop actions or server side processes to batch these images (where no human input is needed) and save some time.

You can see the final result below, this is by no means a blanket solution for all responsive websites but it is one that I find the most versatile. If you have any new or different techniques in serving responsive images I would love to hear about them in the comments.

References
Picture Element Browser Support
SrcSet Element Browser Support
PictureFill

Code used


  
    <style>
      img{
        width:100%;
        height:auto;
      }
    </style>
    <script>
      // Picture element HTML5 shiv
      document.createElement( "picture" );
    </script>
    <script src="js/picturefill.js" async=""></script>
  
  
    <picture>
      <!-- Large image with retina version -->
      <source media="(min-width: 1100px)" srcset="img/bongo-large@1x.jpg, img/bongo-large@2x.jpg 2x">
      <!-- Medium image with retina version -->
      <source media="(min-width: 800px)" srcset="img/bongo-medium@1x.jpg, img/bongo-medium@2x.jpg 2x">
      <!-- Small image with retina version -->
      <source media="(min-width: 500px)" srcset="img/bongo-small@1x.jpg, img/bongo-small@2x.jpg 2x">
      <!-- Square image for Portrait Screens with retina version -->
      <source media="(orientation: portrait)" srcset="img/bongo-square@1x.jpg, img/bongo-square@2x.jpg 2x">
      <!-- Default fallback image -->
      <img src="img/bongo-medium@1x.JPG">
    </picture>
  

Final Result


Bored?

Yes / No