Her ekran için ayrı resim yükleme sorunsalı

Web sitenin her ekranı için sliderdaki resimlerin en boyu farklı olması gerekiyor ama ebat girildiğinde resim bozuluyor. Her ekran için farklı ebatta resim yüklemek gerekiyor. Çözüm nedir? Tek resim bozulmadan nasıl optimize edilir her ekranda? React

@media screen and (min-width:480px) { /* style changes when the screen gets larger */
}
@media screen and (min-width:800px) { /* And even larger */ } css te bu tarz düzenleme yapman işi düzeltir

<div class="slider-container">
  <div class="slider">
    <img src="small-image.jpg" alt="Small Image" class="slider-image" />
    <img src="medium-image.jpg" alt="Medium Image" class="slider-image" />
    <img src="large-image.jpg" alt="Large Image" class="slider-image" />
  </div>
</div>

.slider-container {
  max-width: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slider-image {
  height: auto;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .slider-image {
    height: auto;
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .slider-image {
    height: auto;
    width: 33.33%;
  }
}

Reactta nasıl yazılır