Picture Tag
Layout
Image
Responsive
Custom Element
CMS
Preview Links
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
Last Updated: Nov 20, 2025
- The html picture tag allows us to switch images per breakpoint without loading images the user doesn't need.
- On each source tag under attributes, a url must be pointing to the image. You can copy the url for your image from the assets panel in Webflow.
- The media attribute on each source tag defines when the image will switch. This is set to match Webflow breakpoints by default but can be switched to EM or REM units as well.
- To this with the CMS, the picture tag has to be added in an embed like shown in the CMS Example so it can reference CMS Image Fields.