Comments on Using Responsive Images (Now)

35 Reader Comments

Back to the Article
  1. I am not sure we need the picture tag. Here is how I am doing it. Everything needed with existing CSS and HTML.

    http://webblocks.co/app/test/divimg

    Copy & paste the code below to embed this comment.
  2. Hopefully this will have full support across all browsers soon enough!

    Copy & paste the code below to embed this comment.
  3. Hi Chen Hui Jing,
    great article, would be great if you could make a Drupal tutorial on responsive images!

    Copy & paste the code below to embed this comment.
  4. Great article! But I’m surprised it doesn’t mention the fallback-image double download problem. Briefly: Some browsers that understand <picture> and srcset/sizes will still download the fallback images because of “looking ahead” in the DOM. And other browsers that only understand that syntax with the use of a polyfill will also download the fallback image.

    Dave Newton wrote a really thorough walk-through (including addressing accessibility) from a couple of years ago. Even though that’s somewhat dated, the issue still exists. Picturefill.js omits the fallback src for this reason (the only fallback is the alt text). Drupal 8, which uses Picturefill, is (likely) going to omit it too.

    The drawback to omitting src is a) technically invalid code and b) only text fallback for those who get the polyfill but have JavaScript turned off. Until these new tags/attributes are natively supported in more browsers, though, it’s probably worth the trade-off to prevent double downloads for a whole bunch of people.

    Otherwise, great run-down of these options. O brave new world, that has such image tags in it!

    Copy & paste the code below to embed this comment.
  5. A very concise and thorough article on the matter, thank you! I am happy to see more coverage of responsive images lately. I myself built a grunt plugin to make you leverage built-in browser capabilities for responsive images.
    I am looking at giving it a major update, including less configuration (get the existing image sizes directly from the files), options how to set the src attribute (stay the same, choose the smallest image, none for polyfills) and support of the data-srcset attribute. I would like to hear your feedback on this and if this is something helpful. Highly appreciated!
    Also, I wonder why we still need x descriptors, since w descriptors pretty much handle also the pixel-density use case, given that you provide big enough images.

    Copy & paste the code below to embed this comment.
  6. Loads of articles about how to use srcset/picture, etc. But none seem to touch on actual usage within a CMS (like Wordpress for e.g). How is a client supposed to create this kind of markup within a content editor?

    The other problem is bandwidth, the user might be on a big retina device but on 3g, but we’d still be serving a massive image because we only serve based on screen size.

    And as we get to super density screens, are we really going to be supplying 4k images? File size would be way over the top, even on broadband.

    Copy & paste the code below to embed this comment.
  7. So, what if I have an image in a column and want to use <img srcset=“a b c” sizes=“x y z” >. I don’t necessarily know how big the column is, perhaps it’s a percentage of a percentage, or using flexbox, and I want the image to fill the column. How do I know how big it is in vw?

    Copy & paste the code below to embed this comment.
  8. @John: There are plugins out there, that help Wordpress including the needed markup automatically.

    Also, consider using srcset is already a huge plus. As browsers get smarter they most likely will also consider available bandwidth or even user preferences.

    @Colin: Maybe the calc() function is of help to you. You could declare a size like calc(50vw - 100px), for example. That way you can account for a certain flexibility.

    Copy & paste the code below to embed this comment.
  9. @Chen, great article, thanks for posting this! I’m a little confused about something. In the section about viewport based selection you say “As of the latest specification, if the srcset has any images using the w descriptor, then the sizes attribute must be present as well.”, but then go on to say “Because the first two examples display the same image at different quality levels, the srcset attribute alone is sufficient. “

    Can you clarify this a bit more? If the srcset attribute alone is sufficient, would you just leave off the w descriptor and use x instead?

    Copy & paste the code below to embed this comment.
  10. Responsive image replacement based on width and device pixel density really isn’t that difficult

    here’s my solution

    Copy & paste the code below to embed this comment.
  11. Interesting to see the progression of how the placement of images will work going forward, but I still have my doubts of using CSS media-query-type statements in the HTML. From a philosophical point of view, isn’t this a step backwards from the goal of separating content from its styling?

    Copy & paste the code below to embed this comment.
  12. @Adam The dilemma there is that the browser needs to know details about the layout before the CSS gets loaded, that way they can start downloading the correct source. Jason Grigsby touched on this in his The Web Ahead interview (http://thewebahead.net/99). The gist of it is that the solution isn’t perfect, but it gets us really close to what we need for now. I imagine as the technology evolves, this will get better.

    Copy & paste the code below to embed this comment.
  13. Just a bit of clarification, it’s officially Microsoft Edge.  Which is also not to be confused with Edge Mode within Internet Explorer itself.

    Copy & paste the code below to embed this comment.
  14. I feel the title of this article is a little misleading.

    You reference using responsive images now and then later clarify that it’s only really supported by the latest browsers. While many people are making the switch, large-scale websites are still seeing high volumes of traffic from browsers as old as Internet Explorer 8 - so to reference it’s only supported in Microsoft Edge, immediately removes the ‘now’ proposition originally intended in the message.

    Neat, either way, though.

    Copy & paste the code below to embed this comment.
  15. Hui Jing, i will pay close attention to you in the future, i like your post just like i love my handbags collection.

    Copy & paste the code below to embed this comment.
  16. Great post thanks! I always ran into issues using high-res retina ready images on wordpress. Even compressed at jpeg 30% google insight still says theres more room to compress… A solution anyone?

    Copy & paste the code below to embed this comment.
  17. Interesting read. As some others have pointed out, I don’t see how this is practical from a designers/developers point of view or a client’s. This is a ludicrous amount of html to put in for every single picture in a website. I do massive redesigns with tons of content and this just isn’t practical. As the developer/designer, there is no way I would remember all the created resolutions for an image that would necessarily be standardized across the site (not too mention tedious and time consuming). From a client’s perspective, they can barely edit their content, let alone add pictures with complex queries. This is all aside from the fact that I’m normally lucky if I can get 2x sized images, let alone larger than that.

    What is way more practical is to either use some of the great server side solutions out now that work for any browser or simple javascript solutions like retina.js which I use currently due to it’s ease of implementation without tons of extra markup. Worst case scenario, if they had js off for some reason…the images are all standard html markup, they will just get the default 72dpi image.

    In the same vein, the only way I see this as practical is if it’s automated by developers, which inevitably will be for the basic reasons outlined above.

    Copy & paste the code below to embed this comment.
  18. This was an interesting article.  I am going to practice this technique and see how it works for me.

    I wonder if there is a similar way to approach images while using them as backgrounds in CSS (ie: background-image:url(something.jpg); I know they are treated differently but often go through the same kinds of optimization.  Is there a way to use the selective technique that way?

    Copy & paste the code below to embed this comment.
  19. WordPress will soon be implementing the responsive images within the CMS soon.
    Would love to see how it works out.

    Copy & paste the code below to embed this comment.
  20. Good examples Chen. Thanks.

    James’ point that the browser needs to know details before downloading images and that css can’t help till then is explained in Bruce Lawson’s presentation at Awwwards Conference Barcelona 2015.

    Copy & paste the code below to embed this comment.
  21. As Joshua notes - the syntax is still complex/likely to be bloated. Hard to write - hard to read. Just imagine what it would look like in real world cases.

    Would be amazing to have something shorter… I dreamt about this a few years back:

    https://gist.github.com/rasmusfl0e/6727092

    Copy & paste the code below to embed this comment.
  22. Nice article. With increasing competition it is important to have responsive and attractive websites that makes the visitor stay for a longer period of time and have some interaction. Websites are no more an informative platform, but it is a strong marketing machine that leads to business improvement.

    Content management systems are capable platforms that makes the website development easier by providing unlimited features and functionalities to satisfy any business requirements. It is important to identify the right CMS that aligns properly with your business strategy. From the dozens of CMSes available, I feel WordPress is the simplest of all that even a non-technical person can use painlessly. It has various plugins that controls the optimization of images and make them responsive. Search for the right and secured tools for better results.

    Copy & paste the code below to embed this comment.
  23. As PHP developer this is pretty cool - but I imagine a jQuery function or a PHP function being able to take care of this fairly easily…

    In fairness though if the picture tag helps people save 5-10 seconds on their development time then all power to them.

    Images that resize are awesome!

    Copy & paste the code below to embed this comment.
  24. responsive image should be uploaded on the web server which is make easy design of website responsive.

    Copy & paste the code below to embed this comment.
  25. responsive image can help to make responsive website. thank you for nice post

    Copy & paste the code below to embed this comment.
  26. great admin im really very excited..

    Copy & paste the code below to embed this comment.
  27. You did Well research and written on Fixed-width images and Fluid-width images.Great post. Keep rocking…

    Copy & paste the code below to embed this comment.
  28. great article quality . discussions were very useful , especially for me who was working on the task Harga Ban Bridgestune

    Copy & paste the code below to embed this comment.
  29. I believe there’s an error with this page. Under the section “Fluid-width images: viewport-based selection”, the snippet (#2) shows the sizes attribute using the “vw” unit, but in the below example it uses simply “w”.

    Copy & paste the code below to embed this comment.
  30. Responsive images can improve the site aspect, but they even can to slow site speed, so always must be resized and its better to use a few images on a page. Best regards

    Copy & paste the code below to embed this comment.