First Mobile approach images and breakpoints !!

Hey Eduardo, Your question taught me something today! So a cool solution for this could be to use the <picture> tag as you suggest, but do it a kinda funny way:

<picture>
  <source srcset="#" media="(max-width: 900px)">
  <img class="large-image" src="https://via.placeholder.com/1000x600">
</picture>

The reason is, Internet Explorer doesn't recognize the <picture> tag, so only that embedded <img> tag will be used in those browsers. So that's where you'd put your large image for larger screens. Then the <source> tag adds a media query that says if the screen width is 0-900px wide (you can change this to whatever size you want), replace the large image's src attribute with # -- in other words, don't show an image there. You'll get a broken link, which you can handle with CSS:

@media (max-width: 900px) {
    .large-image {
        display: none;
    }
}

The "old"/standard way of doing this would be to just use a media query to display: none; the image under a certain breakpoint. But I think this way is better because it doesn't actually download the image at all unless your screen is wide enough -- adding a performance boost.

Media queries in CSS will allow you to detect screen width and height and apply new styles based on the screen size.