How to have images automatically swap on smaller devices

[DawsonLab (Eric)]

Hi, I’m still a bit new to WF and I’ve looked in the forum and have gone through some of the tutorials, but I’m still stumped on how I can have my hero image automatically swap out for a similar but slightly different hero image when you go from desktop to table to cell phones.

I don’t know how well I’m explaining this, so here’s an example: on the main page of the Apple website is a photo of the Apple Watch Series 5. It’s a certain size on a desktop browser. When I resize my browser to a tablet size, the image swaps out to a smaller image, and then again when I resize my browser to mimic a phone size. I’ve uploaded the images I’m referring to.

I like this functionality as it’ll work well for my hero images. So what I’d like to have happen, is that the “Broken DNA large” image I attached is seen on desktops & tablets, and that the “Broken DNA small” image is seen on cell phones in landscape & portrait.

I hope this makes sense. If you click on my Read-Only link, you’ll see I uploaded the “Broken DNA large” and some placeholder text on the “News” page. Pay no attention to the rest of the site, as I’m still figuring out how to properly use WF.

If someone can point me in the right direction, that would be great. Many thanks in advance!

Here is my site Read-Only: https://preview.webflow.com/preview/dawson-lab-website?utm_medium=preview_link&utm_source=designer&utm_content=dawson-lab-website&preview=f505c74b7e96d219dfcc04c70900c25a&pageId=5dc29cc5f3d1443219fc8584&mode=preview

[shokoaviv (Moshe Assulin)]

Hi

I think this tutorial from webflow university will help

[DawsonLab (Eric)]

Hello shokoaviv, I read through the link you provided, but it doesn’t help me as I don’t believe it answers my question. As per my example above: I would like to show a different image on cell phones, than I do on desktop & tablets, just like the Apple site. The reason for this is that my hero images will loose a lot of their impact if they get too small.
The link you provided just seems to explain that WF creates variants of each image that I upload and then decides which variant to show depending on the browser size. This is not what Apple is doing.

If anyone has any thoughts about this, that’d be great. Thanks.

[PeteM (Pete)]

You can hide each image depending on the platform - so have one for Desktop, one for Tablet and one for Mobile and just choose hide for each one.

[DawsonLab (Eric)]

Ah, by hitting the “Do not show” icon, right? I’ll give that a go tomorrow, thanks!

[PeteM (Pete)]

Yes - So have three different images on the page - and then from each view port (Desktop, Tablet, Mobile) select when to show - noting that it Cascades down - so you need to do it in that order.

[DawsonLab (Eric)]

I checked it and it works great. Thanks!