Streaming live at 10am (PST)

How do I change the image for different screen sizes? Webflow always applies the picture to all resolutions

Hey there!

I’ve designed two images for the section that I am working on. The first one is for Desktop and tablet and the second one for mobile horizontal and vertical.
Whenever I change the picture in mobile it also changes the pictures for tablet and desktop. How do I make sure that the different resolutions keep their respective image?

I’ve attached both images below. Please also feel free to check out my project here: https://preview.webflow.com/preview/octomo-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=octomo-landing-page&preview=9e90aaae4c598004f497fd07251dc9dc&mode=preview

webflow_forum1

Thanks a lot!

Best wishes,
Fred


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Instead of changing the image (which would affect all breakpoints) you can have two images, one displayed on a set of breakpoints and the other hidden on them. Then repeat. Note: hidden elements are still loaded by browsers. With background images you can set them per breakpoint (or the cascade) and they would only load if the viewport matched.

Jeff, amazing!
This has worked like a charm. Thanks a lot, I appreciate your time!

All the best,
a very happy Fred

An image, used as an image (when you drag it into your page from the Asset Manager), is declared in the DOM, that means it’s written in the HTML code.

Responsivity tuning is not affecting HTML, it’s affecting CSS. So if you change the image, you change it in the HTML and the change can be seen on all breakpoints.

You need to add your 2 images, give them each a class, like .desktop-image and .mobile-image, and set their visibility per breakpoint: turn the mobile one display:hidden for desktop, and do the opposite for mobile.