Comments on: A Guide to the Responsive Images Syntax in HTML https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 25 Aug 2022 21:02:44 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Mister Neutron https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#comment-1771589 Wed, 05 May 2021 15:14:58 +0000 https://css-tricks.com/?p=306139#comment-1771589 OK, talk to me like I’m an idiot. What’s the difference between srcset and data-srcset?

]]>
By: Peter Tavener https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#comment-1758099 Fri, 26 Jun 2020 19:00:25 +0000 https://css-tricks.com/?p=306139#comment-1758099 So where do the “modern image formats (JPEG 2000, JPEG XR, and WebP)” fit into this fuster cluck. How much code must we write to insert a single image?This is getting ridiculous! I’d like to keep all my website on one server but that’s begining to sound impossible.

]]>
By: Laurence Hughes https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#comment-1757267 Thu, 28 May 2020 16:04:38 +0000 https://css-tricks.com/?p=306139#comment-1757267 Thanks for this, Chris! And because it’s not explicitly mentioned, am I right in saying:

We can combine the srcset and sizes approach with the addition of width and height HTML attributes on our img, so we get the added benefit of improving performance and preventing layout jank too?

(The specific dimensions we provide in our width and height aren’t important as long as they represent the required aspect ratio, since all images in our srcset should share a common aspect ratio anyway.)

My understanding is that this update is coming soon in Firefox and Chrome (if not already released).

AFAIK there’s no similar solution at present for the Art Direction use case.

]]>
By: van Hofen https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#comment-1757244 Wed, 27 May 2020 19:10:47 +0000 https://css-tricks.com/?p=306139#comment-1757244 In reply to van Hofen.

Thank you for replying. When would you give your approval to use img and only img? Or do I misunderstand and that is still fine from your point of view?

]]>
By: Bobby Bottleservice https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#comment-1757243 Wed, 27 May 2020 17:15:34 +0000 https://css-tricks.com/?p=306139#comment-1757243

image-set() has been prefixed in Chrome for eight years

What’s the holdup on the support for image-set()?! The @media solution works (I’m using it on a high-volume site) but it’s clunky and verbose.

We ended up with a Sass mixin for it. The basic idea is checking for @support for image-set() and falling back to media queries.

]]>
By: Chris Coyier https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#comment-1757232 Wed, 27 May 2020 13:36:24 +0000 https://css-tricks.com/?p=306139#comment-1757232 In reply to van Hofen.

I try to make the point many times in the article that automation is vitally important here. I would never advocate that you author this by hand every time. Personally, I hardly ever do that. I’m always looking for ways to abstract and automate it. Quote from the article:

I’d highly recommend automating and abstracting as much of this away as possible.

But I also advocate for understanding how it works. This article is about understanding how it works and having a reference to check against when you need to check the syntax and understand what is happening.

I think it’s worth knowing all this syntax so that we can build our own abstractions, or check in on the abstractions we’re using to make sure they are doing things correctly.

]]>
By: van Hofen https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#comment-1757223 Wed, 27 May 2020 09:52:49 +0000 https://css-tricks.com/?p=306139#comment-1757223 Is it just me or is this just too complicated for many images? Why not talk about how to keep things easy? Why not question whether so much markup and tooling is necessary? Must everyone of us now uses tooling for every tag? We don’t work for Google or Facebook. There are many many many of us who say no!

I like the guidelines from Jen Meiert for example. Then you can still use img. Of course! When it makes sense. Why are perspectives like this missing? I think this guide here is fine but it’s not complete if all it says is use more HTML.

If ultimate payload differences are insignificant, just use img.

If payload differences are moderate or if no tooling is available, use img@srcet.

If payload differences are large and tooling is available, use picture and source along with alternative image formats (like WebP) to achieve maximum performance.

]]>