Responsive Web Design & Client Managed Images

When you’re building responsive websites, images are a big concern. Website images need to be able to scale in a layout friendly way from displays that are just a couple of hundred pixels wide all the way up to thousands of pixels wide. This presents a couple of problems when encountered in practice.

When designing and building a responsive website with a content management system (CMS), it’s very easy to forget that at some point when you finish the project, the site will be managed by a client where they will update and change the content as required. It’s very easy for us, as designers and developers, to handle images as we build out the site because we can just modify the image’s dimensions to fit the design as needed. However, what we often tend to forget is that when the client starts to update their site themselves, they expect to be able to upload an image and have it fit properly.

Often times, the elements that contain the images are required to have a consistent sizing regardless of the image being used. This, of course, means that you can’t just use an image element as the sizing of the image element is entirely dependent on the dimensions of the image being used. A common solution to this problem is the use of the wonderful CSS property background-image, combined with other powerful CSS features like background sizing and positioning. While this method often works quite well, using it means that you have to specify the dimensions of the container holding your background image manually, and that you can’t have it scale responsively in an aspect ratio friendly way without a million different breakpoints for every screen size imaginable.

My solution to that is to simply use a <img> tag with the width set to 100%, the height to auto, and display: block (as required), with the src set to a tiny transparent image (png usually works great) utilizing the correct aspect ratio. Say for example that you have an image section in your design that needs to have a 16:9 aspect ratio. Simply create a transparent PNG file 16 pixels wide by 9 pixels tall, and then set the src of your <img> tag to that transparent PNG and the background image to whatever image is going to be displayed there. Voila! You now have a perfectly responsive image for every element size imaginable that will always (no matter what image is being displayed) fit properly into the layout of the site.

There are some minor drawbacks to using this method however, now instead of one request made for the image, you now have two; one for the image itself and one for the <img> tag sizing data. While you could mitigate the performance effects of this by using caching (which you should be using for static resources like images anyways), there is a far better solution out there. 

That solution, of course, is to embed your image sizing data in the HTML as a Data URI. Data URIs are supported in every major browser IE 8 and above, and while IE8 only supports data URIs with lengths of up to 32KB, that is never going to be an issue with fully transparent PNGs, let alone ones that aren’t even a hundred pixels in either dimension. Let’s take for instance a perfect square, 1px by 1px, if I create a transparent PNG with that size and then further optimize it by running it through a tool like ImageOptim, I can get a file that is a mere 81 bytes (on a HFS+ filesystem). That’s half the size of the previous sentence! Of course, it’s a tiny bit bigger when represented as a data URI string (130bytes including the data:image/png;base64, component) but that is still so minuscule as to be completely irrelevant.

I hope these tips save your clients from some future frustrations.

Tell us what you think.