How to effectively reduce the size and, accordingly, the weight of the image as efficiently as possible?

Question

Image processing

I want to make a gallery for my website. In order for the page to load faster, it is more logical to use an initially smaller image size, and when you click on it, load the same image, but with a larger size.
Is it possible to reduce the size (weight) of a small image using html/ css/ js ?..
If not, what is the most efficient way to do this?

Answer 1

The best way to do this is on the server. Either when uploading an image, give it the right size, or before uploading it, press and save it to the cache. The first is done using server-side programming languages, and the second is done using ready-made modules for a CDN or a web server.
The image is already full on the client and compression in the browser will not solve the problem