HTML <picture> element in Webflow

Maray profile image thumbnail.
Blog post cover image.

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.

A screenshot of html picture element in Webflow interface.
Images with different sizes and proportions for different breakpoints.
An image showing how to create an html picture element in Webflow.
An image showing how to create a source tag for the html picture element in Webflow.
An image showing the default image in the html picture element in Webflow.
Email icon.
eine Nachricht senden
ayk@maray.ai

Wenn Sie ein Webdesign- oder Entwicklungsprojekt planen, senden Sie mir eine Nachricht, und ich werde mich innerhalb weniger Stunden bei Ihnen melden.

Oder vereinbaren Sie einen kostenlosen Beratungstermin, um Ihr Projekt im Detail zu besprechen.

Buchen Sie einen Videoanruf

Follow me on Instragram

@maray.design

discord_icon

Join discord

The Internet made meeting likeminded people much easier. Join my group if you want to ask something or collaborate on a project. Here's the invite link ↗.

Come to say hi 👋