How to change the image of the site depending on the screen resolution of the device?

I have a carrot in Bootstrap, and I'm trying to change the images of it depending on the screen resolution of the device using Javascript, but I do not 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 lies in the way I'm trying to do it. Could someone help me?