Image resizing solution for Responsive Design

Following on from my previous article on responsive design without media queries, I have been looking for how to handle the problem of image size and display in responsive design.

The problems are: (a) how do you provide the correct pixel size image; and (b) how do you prevent loading of invisible images.

The solution I present here handles these problems with jQuery and a server-side script to handle image resizing. The idea is that you add the highest resolution image your design will need, then resize it server-side as needed.

Note: this will not be a simple to implement solution for many people. It requires server-side image resizing and a little knowledge of JavaScript/jQuery to suit your needs.

Implementation requires that all images have a width, whether it be in pixels or percentage, and that the responsive image tags be replaced with something like the following:

<img alt="Sample" data-original="http://mysite.com/coffee5.jpg" src="placeholder.gif" />

The src is replaced with a placeholder image that should be used for all responsive image tags, so is only loaded once. It can be a 1 by 1 pixel image.

The data-original attribute is added and has the URL of your server-side image resizing service and the name of the image. The jQuery script will automatically append the required width to this URL.

If JavaScript is disabled it is possible to have a fallback image, for example:

<span class="fallback"><img alt="Sample" data-original="http://mysite.com/coffee5.jpg" src="placeholder.gif" /></span>
<noscript><img alt="Sample" src="http://mysite.com/coffee5.jpg" /></noscript>

The span is added around the image, and the fallback class is set to display:none so as to hide the image initially. If JavaScript is enabled then display:inline can be set on all items with the fallback class. This is required if the image is not set to display using media queries or jQuery, the script will be able to determine if the image is visible or not.

Here's the jQuery plugin to handle loading of the correct size images, if visible:

(function ($) {
	$.fn.responsiveImages = function () {
		return this.each(function () {
			if ($(this).is(":visible")) {
				$(this).attr("src", $(this).attr("data-original") + "?w=" + $(this).width());
			}
		});
	};
})(jQuery);

$(function () {
	$(".fallback").css("display", "inline");
	$("#article img").responsiveImages();

	//Optional reload new images on resize
	var resizeTimer;
	$(window).resize(function () {
		if (resizeTimer !== false) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function () {
			$("#article img").responsiveImages();
		}, 500);
	});
});

There's some optional code in there that will also get new resized images if the window is resized or changed from portrait to landscape, etc. I wouldn't recommend using this if you use proportional size images where there could be many, many different pixel sizes based on the browser window size. If you have only a few breakpoints and fixed pixel widths for the images then it is viable to use this.

Here's a sample that also uses my jQuery responsive design without media queries script.

Example