Sometimes you want to use different images for the same section/element in different breakpoints. For example, a landscape image for the desktop breakpoint, and a portrait image for the mobile breakpoint.
There are two solutions to this problem.
The first solution is to adjust the image wrapper size and set the image to cover the wrapper.
The second solution is to use an html `<picture>` element where you can specify images for any breakpoints you want.
Until now, Webflow didn’t support the `<picture>` element. Now we can use the custom DOM element and use it as a <picture>.
1. Create a custom DOM element and give it a `<picture>` tag.
2. Create another custom element inside the `<picture>` element and set its tag to `<source>`
3. Specify the breakpoint attribute `media=”(max-width: 478px)”` for mobile and `media=”(max-width: 991px)”` for tablet. You need a `<source>` element for each breakpoint you want to set a specific image for.
4. For each `<source>` element add a `srcset` attribute with the image URL you want to use: srcset=”https://cdn.prod.website-files.com/6565f5fa007e1f3e0c67aea7/6567b270058807757c594c75_picture-element-tablet-img.webp”
5. Add the default image. In my case, it’s the desktop image.
