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 Imgur: The magic of the Internet . 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.

3 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)?

This doesn’t ever seem to have been resolved on the forum and I notice it in a few difference places…

Anyway, try this:

Let’s say you have an image on the desktop that you want square on mobile view. Set both the width and height of the image (not the container, the image itself) to 100VW. So, the height and width are now the same (whatever the viewport width is). In the image fit settings, set to cover and position as you prefer, e.g. centered.

Now the image will be square, and not distorted. Obviously you could so the same by setting fixed with and height, if that works in your scenario, but this is useful to make a portrait oriented image square for mobile…

1 Like