(I hope I am posting in correct section)

I am a UX designer working on a new responsive site, the site is using bootstrap css

Currently creating a product listing page which features a large image positioned at top of screen

Ideally I want a 1:1 image on mobile and a 2:1 image on desktop, the remainder of the page is the same regardless of screen width

I have spoke with developer and he mentioned to achieve this it would require both images loading and hiding 1 dependant on screen width


Am I right in thinking that doing this will impact page performance significantly?

Can anyone suggest any methods to achieve this?