How to upload other images on mobile devices in Slick Slider?

Question

JavaScript

Good day

There is a Slick Slider on this markup

<div class="slider">
  <div class="slide">
    <picture>
      <source srcset="img/slides/slide-new-1.webp" type="image/webp">
      <source srcset="img/slides/slide-new-1.jpg" type="image/jpeg"> <img src="img/slides/slide-new-1.jpg"> 
                </picture>
  </div>
  <div class="slide">
    <picture>
      <source srcset="img/slides/slide-new-1.webp" type="image/webp">
      <source srcset="img/slides/slide-new-1.jpg" type="image/jpeg"> <img src="img/slides/slide-new-1.jpg"> 
                </picture>
  </div>
</div>

$('.slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    arrows: false,
    autoplay: true,
    fade: true,
    autoplaySpeed: 5000
  });

How can I download other images on mobile devices?
I need exactly other images, since the slider is very narrow and nothing is visible when scaling.

Thanks for the help!

Answer 1

Piccha is just created for adaptability and maximum savings in traffic and resources.
1st option - use media queries for source: media="(max-width: 1200px)"
2nd option - srcset:

<srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w">

read about responsive images

Answer 2

const isSmallScreen = window.innerWidth < X;
const src = isSmallScreen ? smallImg : bigImg
const img = document.querySelector(myImg);
img.src = src;