Question about consuming high-resolution image resources?

Question

css

The essence of the issue: there are modal windows in which, when opened, large and beautiful pictures with a decent resolution appear. There are many such modal windows. Do they use the resources of the browser (I apologize right away if the question is not quite correct), if you set the property 'display: none' to them, but after opening the modal, change it to 'block' ? Or is such a scheme suitable for facilitating the page? I will be grateful for constructive articles on the subject

Answer 1

Pictures will be loaded only when you make display: block. It's called lazy loading images.
luis-almeida.github.io/unveil