I am experimenting with responsive images and I am confused. I attempted to make two pages appear on website, one that uses art direction, and another that uses resolution switching. I wrote a simple HTML doc, and I ended up with a HTML doc that opens separate images, only one of which does any resolution switching at all. You can read the code and see for yourself. Would you be able to tell me where I went wrong? Thank you!
For all intents and purposes, you can assume that the images are in the same folder as the .html file. If need to upload the images, please let me know.
The min-width and max-width values are missing px (e.g. (max-width: 799px) )
When using <img> with srcset the correct attribute is called sizes not media
Additionally, you can simplify your <picture> code by removing the second <source> element. If the viewport is wider than 799px it will automatically pick the default <img> (which is the same as your second <source> element)
I hope that helps!
Michael
PS: Your email address is visible in your post. I think it somehow ended up in the optional “name” field of your profile. I recommend removing it.
I don’t think that it’s necessary to actively remember these element/attribute combinations. In my opinion it’s enough to know that you can use multiple images with <img> and <picture>. For the details when you want to use it just look up the reference pages on MDN.
As they say:
You don’t have to know everything. You just have to know where to look it up.
After using them for some time you will eventually remember the attributes and won’t have to look it up every time.
