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://assets-global.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.
send a message
ayk@maray.ai

If you plan a web design or development project, send me a message and I'll get back within a few hours.

Alternatively, book a free discovery call to discuss your project in more detail.

Book an appointment
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 👋