The " width & height" image attribute fixed the image's dimensions this thing you can see in my code snippet. So it would help if you used CSS to style your photos to make them responsive (automatically scaleable on big and small screens.).
Try following the CSS code:

.my_img {
  width: 420px;
  max-width: 100%;
  height: auto;
}

<img src="https://images.pexels.com/photos/2453551/pexels-photo-2453551.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="leaf-image" width="200" height="300" />

<img src="https://images.pexels.com/photos/2453551/pexels-photo-2453551.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="leaf-image" class="my_img" />

Set class for the image. Then set width whatever you want, after that set max-width: 100%; and height: auto; which will help the browser to increase and decrease the height of the image when the image needs to be scaled down on smaller than 420px screens.
Width property will set the image size to 420px when the screen size is bigger than 420px and the max-width: 100%; will make the image responsive, It means when the screen size will less than 420px your image will automatically be adjusted according to your screen with.
You can avoid scrset and width/height image attribute. Use CSS.