Different image file for mobile that does change other breakpoints

I’m looking for a way to update the hero image on the mobile breakpoint, which does not cascade to affect the other three widescreen, desktop, and tablet breakpoints.

Wix Studio Editor

Essentially, the mobile hero image needs to be cropped and scaled slightly differently to gain optimal visibility with a text overlay. A smaller image size theoretically should help with the dismal LCP score too.

Since Wix Studio is a cascading editor, some changes will apply to all breakpoints, such as data changes (changing an image source or its text value etc.)

I’m not sure how your page is structured, but you have the option to change the focal point of an image (which can be applied per breakpoint).

Alternatively, you may be able to hide the image element on the mobile breakpoint, add a new image element to change the source etc.

Hope this helps :slight_smile:

Screenshot 2024-06-20 at 12.44.29

Hi Noah,

Thank you for your response. Unfortunately, changing the focal point is not an option in this case.

I am concerned about hiding the image element on the mobile breakpoint and then adding a new image element to change the source.

Will the extra image impact our load time and performance score? Our largest contentful paint metric is already at 6.5 seconds, according to a recent Lighthouse report. This metric alone is causing our mobile performance score to drop to 77.

Your expertise is appreciated.