Javascript change image and width on hover

When we load a page with a lot of images, we can load all those images in a reduced size and then, when we mouse over each one of them, change them to the larger image and increase its size.

In the following example we have a list of images, when we pass the mouse over them we change to the image that best suits us and increase its size.

<div id="imgs_inside" style="width:600px; height: 600px; margin-bottom:5px; overflow: scroll;">
  <img src="https://www.lookkle.com/images/test/p_1.JPG" width="300" height="300">
  <img src="https://www.lookkle.com/images/test/p_2.JPG" width="300" height="300">
  <img src="https://www.lookkle.com/images/test/p_3.JPG" class="lazy" width="300" height="300">
  <img src="https://www.lookkle.com/images/test/p_4.JPG" class="lazy" width="300" height="300">
  <img src="https://www.lookkle.com/images/test/p_5.JPG" class="lazy" width="300" height="300">
  <img src="https://www.lookkle.com/images/test/p_6.JPG" class="lazy" width="300" height="300">
</div>
<script>
document.querySelectorAll('img').forEach(function(e, index){
    e.addEventListener("mouseover", () => {
        e.setAttribute('src', 'https://www.lookkle.com/images/test/p_'+(index+2)+'.JPG')
        e.setAttribute('style', 'width: 500px');
    });
});
</script>