How do I create thumbnails with lower resolution images in html

I have a bunch of high resolution images (like 6000x4000 jpegs) and i've made a 3-column gallery with them (looks something like unsplash's gallery). So i want it to be a gallery with low res thumbnails and when i click on them i have the full res image opened in new tab. I've set the width of divs containing imgs to 400px with css, but it only affects their appearance in page layout. I mean in those 400px divs images that are loaded are still 6000x4000, so page freezes when i scroll. And i want to load low resolution images in those divs but without creating another folder with every jpg in low resolution and load them istead. i mean can i lower the resolution of images that are loaded into the page using html, css, js, jquery?