SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 or jQuery Responsive Image Replacements using custom img attributes

    Given this markup:

    HTML Code:
    <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/responsi...es-using-css3/

    However, its currently not supported in ANY web browser.

    Can it be done with current browsers?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    https://github.com/adamdbradley/foresight.js

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

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Scott,

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

    Code:
    <!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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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-inter...na-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. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correction: "Wordpress defaults to 90% quality for jpeg image uploads" (not 90% compression)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    However, on graphics with large blocks of solid color (like web graphics for instance), the compression artifacts become more pronounced.
    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. )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •