Image resizing solution for Responsive Design

By · June 15, 2013
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://wsi.tafensw.edu.au/resource/image/830/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://wsi.tafensw.edu.au/resource/image/830/coffee5.jpg" src="placeholder.gif" /></span>
<noscript><img alt="Sample" src="http://wsi.tafensw.edu.au/resource/image/830/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

Comments

There are no comments

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. Avatars are sourced from gravatar.com — a globally recognised avatar.














About me
John Avis ...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

profile for John at Stack Overflow, Q&A for professional and enthusiast programmers
Tags
Search
Recent Posts
Subscribe

To receive email notifications when this blog is updated, subscribe by entering your email address below.