Responsive Image Confusion

[dmwhipp]

I've been reading different articles on responsive images until I feel like my eyes are about to bleed. One of the articles that seemed less confusing was this one: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

So I understand the principal, it makes sense to not overload phones with unnecessarily large images, and I think I get the basics of the code. I create and upload my image in 3 different sizes:
http://cismiami.org/img/thankyoukids_480.jpg
http://cismiami.org/img/thankyoukids_768.jpg
http://cismiami.org/img/thankyoukids_1100.jpg

Then I code and upload my test page:

<picture>
<img src="/img/thankyoukids_1100.jpg"
alt="Thank you for supporting Communities In Schools of Miami"
srcset="
http://cismiami.org/img/thankyoukids_480.jpg 480w,
http://cismiami.org/img/thankyoukids_768.jpg 768w,
http://cismiami.org/img/thankyoukids_1100.jpg 1100w"
sizes="(max-width: 1100px) 100vw, 1100px">
</picture>

With the result: http://cismiami.org/volunteerthanks2.html

But no matter what device or screen size I test this on, I keep getting the large image served to me. I would love any assistance in understanding what I'm doing incorrectly.

Deborah

[styxlawyer]

Does this help?

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

[coothead]

HI there dmwhipp,


personally, I would not bother with three images.

Instead, I would compress the larger one, without
any loss of quality, and just use that.

Check out the attachment to see an example.




coothead

[dmwhipp]

Does this help?

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Thanks - it did help a bit. I think I really need to look into this more when not under pressure, but I'm using that page as a guideline for pages I create with full-width images. Thanks again!

[dmwhipp]

Thank you coothead - I've found some online compressors, but am trying to be forward thinking and figure out the srcset code. Of course, with the way my life works since I'm going with the img srcset route it will be obsolete by this time next year. Thanks again!