How can I ensure that different resolutions in Webflow keep their respective images when I change the picture for mobile, tablet, and desktop?

When you change an image in Webflow on a specific breakpoint (like mobile or tablet), it overrides the image for all breakpoints unless done correctly. Here's how to ensure different images display on different screen sizes using Webflow.

1. Use Display Settings Instead of Replacing the Image

• If you replace an image directly in the Image element (e.g., via the image picker), that change affects all breakpoints, because the image source is global across breakpoints.
• To show different images for desktop, tablet, and mobile, use multiple image elements, each set to display only at the desired breakpoint.

2. Add Multiple Image Elements

• Add separate Image elements for each version you'd like to show (e.g., Image-desktop, Image-tablet, Image-mobile).
• Insert all versions into the page but don't stack them too close visually, or it may be confusing in the Designer.

3. Assign Unique Classes (Optional but Recommended)

• Assign each Image element a unique class name or combo class to make targeting easier (e.g., .hero-image--desktop, .hero-image--mobile).

4. Control Visibility with Display Settings per Breakpoint

• Select an image element, go to the Style panel, and scroll to Layout > Display.
• At each breakpoint:
• Set the desired image to Display: Block (or Flex/Grid, as needed).
• Set the others to Display: None.
• Example:
• On Desktop, set .hero-image--desktop to block, and the others to none.
• On Mobile, set .hero-image--mobile to block, and the others to none.

5. Avoid Replacing Src Directly

• Don’t click into the Image settings panel and replace the image directly when inside a mobile or tablet view — that updates the image globally across all breakpoints.
• Always manage visibility, not the asset itself, per breakpoint.

6. Use Background Images in Divs (Optional Alternative)

• Create a Div block instead of using an Image element.
• Assign background images via Background > Image & Gradient styles.
• Then on different breakpoints, override the background image, which can be done per breakpoint.

Summary

To show different images on different screen sizes in Webflow, use multiple image elements with controlled visibility using Display: None/Block per breakpoint. Don’t replace image files directly per breakpoint, because Webflow applies those changes globally. Alternatively, use styled Div blocks with background images, which can be changed per breakpoint.