Image resizing solution for Responsive Design

John Avis by | June 15, 2013 | Responsive Web Design Web Development

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.
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

Related Posts

Computers & Internet Web Development Website Hosting

500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


Jquery/Javascript Web Development

tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.


ASP.NET Web Forms Web Development

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

Tags

About me

...random postings about web development and programming, Internet, computers, electronics and automotive topics.

Subscribe

Get the latest posts delivered to your inbox.