The HTML Handbook

The HTML Handbook
0

Welcome! I wrote this book to help you quickly learn HTML and get familiar with the advanced HTML topics.


This is a companion discussion topic for the original entry at https://www.freecodecamp.org/news/the-html-handbook/

Great resource, congrats!

There is a little mistake in “In the srcset we use the w measure to indicate the window width.” The w indicates the image width, not the window/viewport one.

Also, I wouldn’t say that “the differences are very subtle” between srcset and <picture>. srcset gives options for the browser to chose from, while <picture>/<source> requires the browser to follow an “order”. That’s why "The example that follows kind of works like the above example with srcset" is wrong: for a 500px viewport width on a 2dppx screen, the srcset example will load the dog-1000.png image in most contexts, while the <picture> example will load the dog-500.png image.

Anyway, the code in the <picture> example is wrong, for 2 reasons:

  • The media queries can’t be defined with the w descriptor, nor the vw unit, they must use px, em, rem, etc.
  • Even if you had used px units, the browser takes the first <source> with a matching media query, so if (min-width: 500px) matches, it will stop, and never try (min-width: 800px) of the following, which are larger. I guess you wanted to use max-width media queries instead.

Finally “The img tag is the fallback in case the browser is very old and does not support the picture tag” is wrong, because as your WebP shows, the <img> tag serves also as the last <source> if all previous sources have content type or media queries that don’t match.

I hope it helps, responsive images are one of my hobbies… :sweat_smile: