How to change website image depending on the device screen resolution?

I have a bootstrap carousel, and I'm trying to change its images depending on the device's screen resolution using Javascript, but I don't know how to make it work.

var width = screen.width;
var image1 = document.getElementsById("slide1");

if (width <= 411)
  image1.src = "../Pictures/slide2.jpg";

<img id="slide1" class="d-block w-100" src="Pictures/slide1.jpg" alt="Primeiro Slide">

I inserted an alert inside the if to check if the condition structure worked, and the alert appeared as expected. I believe the problem is in the form that I am trying to do this. Could someone help me?