How to optimize photos on the site?

Question

css

There is a website in this image block . They take quite a long time to load. Are there any services or a manual way to speed up the download of these photos?
I compressed these photos through one online service, they became two times, three times less in weight, but this did not give a noticeable result.
When you scroll to this block, noticeable lags begin, how to fix it?

Answer 1

I have the most shitty router in the world... Weak Wi-Fi signal, the speed is terrible, mobile Internet is faster than on a PC, but even on this shit, everything loaded quickly for me. Lags personally with you.
1. Regarding the photos. There is such a thing as lezload (lazy loading) - google.
2. Why png images? They don't have transparency, they don't need super quality. Why? png is larger than jpg.
3. Use not jpg, but webp - it's even faster.
According to Google: WebP compresses lossless images 26% better than PNG. WebP compresses lossy images better than JPEG by 25-34% for the same Structural Similarity Index (SSIM) WebP maintains lossless transparency (known as alpha channel) at only 22% increase in size
ps
Lending is spelled with A. L a nding

Answer 2

Yes, the problem is not in Webp and not in lazyload (although they will not be superfluous), but in the fact that you cannot load large images in a grid on a small scale, the logic should be different: small images are initially loaded and displayed (such as 370x280 px) - and when you click, a large full-size photo is already loaded.
In wordpress, this is done in two clicks, but here, apparently, you will have to manually spank small previews.

Answer 3

So why the hell did you put pictures of this size there.
Make the actual size and it will be ten times faster