Load different images from JSON file on mobile and desktop React

Question

For better web app performance, I am showing different images on mobile and desktop due to resolution. The data is getting loaded from JSON file 


[{
    "_id": 9,
"title":"Text 9",
    "subheader":"Dummy header 9",
    "images": "images/four-1.png",
    "imagesmob" : "images/four-1.webp",
    "content":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec velit consectetur, pretium risus vel, eleifend tortor. Integer enim nulla, iaculis sit amet leo vel, sagittis maximus leo. Aliquam semper sapien bibendum nulla consectetur, ut eleifend arcu accumsan. Duis consequat diam sed dolor convallis semper. Ut justo mauris, accumsan non tempus ut, ultrices at tellus. Quisque a sapien urna. Maecenas tempor consequat sollicitudin. Nullam volutpat a eros sit amet vestibulum. Cras sollicitudin vitae urna nec varius. Etiam nec facilisis urna.</p> <p>Donec ut dui condimentum, tincidunt tellus vitae, interdum lorem. Phasellus eget pretium enim. Morbi accumsan turpis vitae turpis venenatis ullamcorper. Proin pretium nisi nec nulla faucibus, a hendrerit turpis malesuada. Nullam id faucibus metus, id faucibus metus. Donec et massa suscipit, congue tortor non, ultricies turpis. Aliquam venenatis massa velit, id ornare ante efficitur vitae. Vivamus id dui tortor. Pellentesque sem mi, bibendum a orci hendrerit, mollis eleifend eros. Nunc sodales orci purus. Vivamus molestie porta egestas. <p>Suspendisse convallis mi ullamcorper, dapibus nisi a, semper felis. Praesent ut lacus eu neque vestibulum efficitur.<\/p> Sed dolor magna, mattis a ultricies vel, <b>tincidunt<\/b> eget enim.<\/p>"
}
]

The code file is :

<Card variant="outlined" sx={{ maxWidth:345, borderRadius: '11px' }} elevation={3}>
           <CardMedia
        component="img"
        height="194"
        image={welcom.images}
        alt="Home Page"
       sx={{display:{xs:'none', sm:'none',md:'block'}}}
      />
            <CardMedia
        component="img"
        height="194"
        image={welcom.imagesmob}
        alt="Home Page"
        sx={{display:{xs:'block', sm:'block',md:'none'}}}
      />
      <CardHeader
       
        titleTypographyProps={{fontSize: 18, fontWeight: 'bold', color: 'purple' }}
        title = {welcom.title}
        
        subheader = {welcom.subheader}
        />
        
            <CardContent>
              <div>{welcom.content}</div>
            </CardContent>
         
        </Card>

In tthis I want to load images for mobile in CardMedia, when I used display none and made other cardmedia for mobile, the image used for desktop is also getting loaded. I dont want the image for desktop to be loaded when on mobile. As this affect the website performance.

Any help will be appreciated. Thanks