CSS3 or jQuery Responsive Image Replacements using custom img attributes

HTML & CSS
1

Given this markup:

<figure class="figureFeatured">
    <img
        width="300"
        height="213"
        src="wp-content/uploads/featuredImage-300x213.jpg"
        data-responsive="wp-content/uploads/featuredImage-150x150.jpg"
    />
</figure>

Would it be possible (via CSS3 or Jquery) to specify at certain device-width breakpoints that the src attribute of the image is replaced by the value of the data-responsive attribute?

The closest thing I’ve found using CSS3 is here > http://nicolasgallagher.com/responsive-images-using-css3/

However, its currently not supported in ANY web browser.

Can it be done with current browsers?

2

Hi Scott,

Responsive images have been discussed quite a bit so there’s not really much I can add.

I did have the idea that perhaps you could create a very low res image as a default so that it’s file size is not a problem to download and then using css and media queries you can apply a high (or higher) res background image to that image using media queries. You can hide the initial image by setting width and height to zero in css and then increasing padding to create the viewing area onto which the hi res background image is placed. As far as I can gather the background images are not loaded until required for and of course means you have to know all the image dimensions beforehand etc.

There is a js solution that detects what type of device is viewing and serves the appropriate image.

I’m sure you could also easily add some js to detect the viewport width and swap the attributes as required.

3

Your “idea” example is exactly on point. However, the solution I’m seeking will account for dynamically generated images (aka WordPress “featured image” function), where you will not know the filename of the image you need to replace.

So, that’s the purpose of the custom attribute (data-responsive), to hold a path reference to the alternate image.

4

Hi Scott,

You could swap it with jquery and here is my feeble attempt.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</style>
</head>

<body>
<div>
<figure class="figureFeatured"> <img 
        width="300" 
        height="213" 
        src="images/zimg1.jpg"
        data-responsive="images/zimg2.jpg"
    /> </figure>
<figure class="figureFeatured"> <img 
        width="300" 
        height="213" 
        src="images/zimg3.jpg"
        data-responsive="images/zimg4.jpg"
    /> </figure>
<figure class="figureFeatured"> <img 
        width="300" 
        height="213" 
        src="images/zimg5.jpg"
        data-responsive="images/zimg6.jpg"
    /> </figure>
</div>
<script type="text/javascript">
 var lessThan = false;
 $(window).resize(function () {
     var viewportWidth = $(window).width();

     if ((viewportWidth < 600) && (lessThan == false)) {
         swapAttribute($('.figureFeatured img'));
         lessThan = true;

     } else {
         if (viewportWidth >= 600 && lessThan == true) {
             swapAttribute($('.figureFeatured img'));
             lessThan = false;

         }

     }

 });

 function swapAttribute(thisEl) {
     thisEl.each(function (index) {
        var thisdata = $(this).attr('src');
         var thisdata2 = $(this).attr('data-responsive');

         $(this).attr('src', thisdata2);
         $(this).attr('data-responsive', thisdata);
     });


 }
</script>
</body>
</html>

I’m sure you or someone from the JS forum can do it much neater.

5

Amid all the solutions for responsive and/or retina images, I’m surprised this article isn’t getting more attention:

http://blog.netvlies.nl/design-interactie/retina-revolution/

For mine, it’s a great solution for serving up high res images on retina displays while also dealing with the small images sizes for mobile—all in one.

6

Thanks for the example Paul. That definitely gives me something to work with.

Ralph, that’s a pretty impressive test! I’ve long been an advocate for pushing the bounds of jpeg compression (i have my default compression at 70% in Photoshop). I’ve noticed that on most photographs, (especially images of people) I can go much lower than that without introducing noticeable artifacts.

However, on graphics with large blocks of solid color (like web graphics for instance), the compression artifacts become more pronounced. So, this technique is much more suited to photographs than graphics.

Very good information.

Note: If you are using WordPress, you can programatically set the compression level for uploaded images. WordPress defaults to 90% compression level for Jpegs!!!

7

Correction: “Wordpress defaults to 90% quality for jpeg image uploads” (not 90% compression)

8

Good point. I’ll have to test that. But he is doing this on images with quite large dimensions. I wonder if that makes a difference. (Off to test it. :slight_smile: )