Which is better <img src= or <source src= or <style> .image-container{?

Please forgive me if there are any errors the coding. I’m just learning this, so I’m playing around trying to get it to work. Or is there a easy, but different method?

<img src="https://shunyata-villas-bali.com/wp-content/uploads/2018/11/ShunyataVillasBali-SEA-Pool1-1400px.jpg" alt="BreakPoint Images for Bootstrap 5"
     sizes="100vw"

     srcset="https://shunyata-villas-bali.com/wp-content/uploads/2018/11/ShunyataVillasBali-SEA-Pool1-1400px.jpg 1400w,

             https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2015/03/1200px-Hommik_Viru_rabas.jpg 1200w,
             
             https://www.wsidigital.ie/wp-content/uploads/Influencer-992px-v03.jpg 992w,
        
             https://aperture.org/wp-content/uploads/2021/03/Ethridge_FugitiveSunset-scaled.jpg 768w,
             
	           https://images.squarespace-cdn.com/content/v1/53d93b35e4b06c5991190a48/1512538618265-FFBBNEU56O3A5QPEQWL3/576px-Antelope_Canyon-Utah2089.JPG 576w">

<picture alt="BreakPoint Images for Bootstrap 5">

   <source src="https://shunyata-villas-bali.com/wp-content/uploads/2018/11/ShunyataVillasBali-SEA-Pool1-1400px.jpg" media="(min-width: 1400px)">
   
   <source src="https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2015/03/1200px-Hommik_Viru_rabas.jpg" media="(min-width: 1200px)">

  <source src="https://www.wsidigital.ie/wp-content/uploads/Influencer-992px-v03.jpg " media="(min-width: 992px)">

   <source src="https://aperture.org/wp-content/uploads/2021/03/Ethridge_FugitiveSunset-scaled.jpg" media="(min-width: 768px)">
   
  <source src="https://images.squarespace-cdn.com/content/v1/53d93b35e4b06c5991190a48/1512538618265-FFBBNEU56O3A5QPEQWL3/576px-Antelope_Canyon-Utah2089.JPG?format=2500w" media="(min-width: 576px)">
  
  <img src="https://shunyata-villas-bali.com/wp-content/uploads/2018/11/ShunyataVillasBali-SEA-Pool1-1400px.jpg" alt="1400 px">
</picture>

<style>
.image-container{
.image-container{
text-align:center;
}
img{
width:undefinedpx;
max-width:100%;

}
@media only screen and (max-width: 1400px) {
	img{
		width: 100%;
	}

}
@media only screen and (max-width: 1200px) {
	img{
		width: 100%;
	}

}
@media only screen and (max-width: 992px) {
	img{
		width: 100%;
	}

}
@media only screen and (max-width: 768px) {
   img{
		width: 100%;
	}

}
@media only screen and (max-width: 576px) {
	img{
		width: 100%;
	}
}
</style>
<div class="image-container">
<img src="https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2015/03/1200px-Hommik_Viru_rabas.jpg" width="100%" alt="Image is not loaded">
</div>

I would say a) or b)

You can check caniuse.com for browser compatibility.

That’s something I did not think about, Browser compatibility. Thanks @Jannis

Not sure how to check this one .image-container{