Optimising image display across different devices: seeking advice on implementing multiple assets

Right now, we’re just using one image for everything, and sometimes it gets cut off weirdly on different devices. We want to use four different images instead, each one fitting better on certain screen sizes, with the element’s srcset helping us out. What’s the best way to do this?

Current setup: (check out the screenshot I attached)

My first idea was to make a component that can handle four images, but that seems like a bit too much. Surely, there’s a simpler way to get this done.

Anyone got a better idea?

This topic has been created from a Discord post (1220133935091159171) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord