Image resizing solution for Responsive Design

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

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

Web Development

How to set up a debugging using the Turnkey Linux LAMP stack and VS Code

by johna | December 19, 2023
The second part in my guide to setting up a website and database using the Turnkey Linux LAMP stack.

Website Hosting Web Development

How to set up a website and database using the Turnkey Linux LAMP stack

by johna | November 18, 2023
If you need to host your own website for the purposes of web development, Turnkey Linux LAMP Stack is an easy to install all-in-one solution that you can set up on a spare computer or a VM (Virtual Machine).

Web Development

Intermittent "Unable to read data from the transport connection: net_io_connectionclosed" errors

by johna | May 6, 2020
If you are having intermittent problems sending email in .NET using System.Net.Mail consider switching libraries.

Comments

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

Leave a Comment

About

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

I recommend ASPnix for web hosting and Crazy Domains for domain registration.

Subscribe

Get the latest posts delivered to your inbox.