Different images for desktop and mobile

Hi! I have a quick question.

First here is my read-only site: https://preview.webflow.com/preview/bitz-redesign?utm_source=bitz-redesign&preview=93ebbab3b4ee035adbcf631398d801ca

If you go to the ‘For Customers’ page, in the ‘How it works’ section you will see three mockups with steps. For desktop I would like to keep it that way but if you change to mobile, I would like that the mockups are half shown, cut like you can see here https://imgur.com/SGz0sE4 . So, still one step on top of each other but with a shadow effect below like I currently have for the different sections in the page.

I was wondering if It’s possible to upload different images for desktop and mobile so that I can upload a cut version for mobile, keeping the full for the rest of the devices.

Or is there any other simpler way to achieve this? Also considering that I would somehow need a shadow effect below each cut image.

Looking forward to hearing from anyone! Have a nice one!


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

Rather than having 2 sets of images, you should just use the ones you already have and cut them using overflow:hidden.

When you have a very diffferent design for desktop and mobile, using the same assets, don’t hesitate to design 2 sections and make them visible only for one device. So one section designed for desktop, one for mobile, and you swap the visibility using display:none.

2 Likes

Clear! Will try this, thanks vincent!

Hi! when you use 2 sest of images and show just 1 set for let’s say mobile and hide the other one. Both sets will still get loaded right? thx

@Materia_Lab

Most browsers do download images that are not visible when using the display:none attribute on the image or parent container. So heavy use of this on lots of media hidden from mobile and the impact on page load size should be considered. Here is an excellent article that discusses it.

Any updates? This seems simple functionality to add, why is it not possible (to simple change the image)?