We have an image field on the page content type where the site editor can upload a hero image for each page. 

We've been asked to swap out these hero images on mobile for the same image, but with a custom crop specifically for mobile. 

I'm thinking we could simply have two fields on each page, one for the desktop hero image and another for mobile. 

Can anyone suggest a better alternative? Are there any modules that you know of to address this specific problem? Different images for different screen sizes?

Comments

@bwpanda - As far as I can tell, the srcset_image module is useful in using a different image style for a different screensize. But, if I have an entirely different version of the image that I wish to use on mobile, it's not clear to me that I can use srcset_image module. 

I watched your video (https://youtu.be/sE7Z4QE7zN0) and it only describes using different image styles.

BWPanda's picture

@stpaultim, I was basing my suggestion on your comment above:

We've been asked to swap out these hero images on mobile for the same image, but with a custom crop specifically for mobile.

You can certainly have the same image with different crops using image styles...