如何使此img srcset代码正常工作？

Question

I'm trying to use the srcset attribute of the img tag in HTML5. My goal is to switch to a smaller (file size and dimensions) image depending on the viewport size of the device. My three breakpoints are Desktop, Tablet, and Mobile.

I've followed several online tutorials on how to use the srcset attribute of the img tag, but I cannot seem to get it to work as people are saying it should. No matter if I copy and paste the various tutorials' exact code into my site and put my image URLs and sizing into it, Chrome and other browsers are completely ignoring it. Is there a CSS or JS component to this I'm unaware of and that people are just assuming I would know to use?

<img 
     srcset="https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_desktop_447w.jpg 447w, https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_tablet_537w.jpg 537w, https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_mobile_217w.jpg 217w" 
     sizes="(max-width: 1440px) 447w, (max-width: 768px) 537w, (max-width: 354px) 217w" 
     src="https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_desktop_447w.jpg">

Here's a CodePen of the most basic thing I'm trying --> https://codepen.io/anon/pen/XLzoaZ

Here's an example URL where I'm trying it out for real. The graphic is on the right sidebar just above the "Search" field. The other images are not yet implemented with srcset. --> https://dev-fenfast.pantheonsite.io/health/

I can't find any error messages in the Inspector Console regarding this seemingly simple tag.

Answer 1

I have better option for you if you like. Instead of scrset you can use pure css or bootstrap. These links might help you https://getbootstrap.com/docs/4.0/layout/media-object/ https://getbootstrap.com/docs/4.0/layout/overview/ Also learn more about how to use @media in css or more it will be easier if you use it with bootstrap. One of those links explaining to you how to use @media with bootstrap. The media work like this. If the screen smaller than min-width: 768px it's mean it's a tablet and so on. Here you can see the media in css with live examples. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

For responsive images use width: 100% and high: auto or in bootstrap 3 use the class img-responsive or in bootstrap 4 use img-fluid

Update: Use this in bootstrap 4

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }