Ответ
При большом количестве картинок без указанных размеров могут возникнуть:
-
Layout Shift - страница будет "прыгать" при загрузке изображений, так как браузер не знает их размеров заранее.
-
Медленный рендеринг - браузеру приходится пересчитывать layout при каждой загрузке нового изображения.
-
Неправильная работа скролла - позиция скролла может сбиваться из-за изменения высоты контента.
Как исправить:
<img src="image.jpg" width="300" height="200" alt="Пример">Или через CSS:
img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}Также можно использовать loading="lazy" для отложенной загрузки.
Ответ 18+ 🔞
Слушай, а вот эта штука с картинками — это же просто пиздец какой-то, если честно. Представь: грузится страница, всё красиво, ты уже начал читать, и тут — бац! — вылезает очередная фотка, и весь текст, блядь, съезжает вниз, как будто его хуем по лбу двинули. Это и есть тот самый Layout Shift, ёпта. Страница прыгает, как сука на сковородке.
А знаешь, почему так? Потому что браузер — он не экстрасенс, блядь. Если ты не сказал ему заранее, какого размера твоя картинка, он её видит впервые только когда она уже скачалась. И тут он такой: «Опа, а это что за хуйня? Место надо? На, держи!» — и всё, что было ниже, дружно едет нахуй.
И что в итоге? Медленный рендеринг, потому что браузеру каждый раз приходится пересчитывать всю хуйню на странице. И скролл сбивается, ты пытаешься кликнуть на кнопку, а она уже уехала, и ты попадаешь пальцем в пизду какую-то рекламную. Бесит, да?
Ну и как с этим бороться, спросишь ты? Да элементарно, Ватсон! Просто не будь мудаком и указывай размеры, блядь.
Можно прямо в HTML прописать, вот так:
<img src="image.jpg" width="300" height="200" alt="Пример">Видишь? width и height. Теперь браузер знает, сколько места зарезервировать, ещё до того, как картинка загрузится. Всё, прыжков нет, мать его.
А если ты стилями управляешь, через CSS, то тоже не забудь про aspect-ratio. Сделай вот так:
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}Тут магия в том, что aspect-ratio говорит: «Слушай, браузер, высоту сам посчитай, исходя из ширины и этого соотношения сторон». И опять всё ровно, без сюрпризов.
И, блядь, пока не забыл — используй loading="lazy". Это чтобы картинки, которые далеко внизу, не грузились сразу, а только когда пользователь до них допиздуется. Экономия трафика и нервов.
<img src="image.jpg" width="300" height="200" loading="lazy" alt="Пример">Вот и вся наука. Не усложняй, делай правильно, и не будет у тебя этих ебаных прыжков контента. Всем плюс, и пользователю, и тебе.