How to include images on the site?

Question

css

Good afternoon.
I’ll quickly go over from the very beginning: I made a landing page, marked it with grids, adjusted adaptability.
When everything was ready, I began to connect images to the grid blocks. And it is very noticeable how the site began to freeze. Due to the fact that I connected 5 images in very high quality and resolution.
Actually, the question is: in what formats, in what extensions to save images so that they do not load heavily?

Answer 1

1080px for PC and x2 for Retina.

Answer 2

1 for full color - jpg, but not png and vice versa
2 jpg compression also decides. The standard 65% may well be enough. Compare with 80% visually.
3 saving in Photoshop in "save for web" gives a better result than just saving
4 pictures do 1v1 in pixels as it will be on the site. 2x for retina, Only if it's for full screen images or full window width then set it to full resolution.
5 if the site is hosted not on ssd but on hdd, then transferring images to the sidien cloud can also give a result.

Answer 3

https://tinypng.com - PNG optimization.
Up to 70% without noticeable quality loss. I run twice.
Images are 2x of the desired size. Need 100 - take 200.