Как зарезервировать место для изображения?

Question

[Atsin Vtinko]

По дефолту макет прыгает по мере загрузки картинок. Как через HTML или CSS сделать так, чтобы место под картинками заранее было нужного размера?

Comments

[RAX7]

https://web.dev/i18n/ru/optimize-cls/
https://docs.emmet.io/actions/update-image-size/

Answer 1

[origami]

1) Дать блоку с картинкой фиксированную высоту и ширину, даже до загрузки он будет нужных размеров.
2) Использовать background-image.
3) Сделать прелоадер

Answer 2

[SHKD]

Задайте высоту и ширину блока куда помещаете изображение в css. Так же задайте явно высоту и ширину изображения в html.

<img src="#" width="100" height="100" loading="lazy" alt="#">