Как избежать скачков страницы при загрузке изображений
Открываете статью, начинаете читать — и текст уезжает вниз, потому что над ним загрузилась картинка. Браузер не знал её пропорций и оставил слишком мало места.
Зарезервируйте место
Укажите настоящие размеры исходного файла. Они задают соотношение сторон ещё до загрузки изображения; ширину на странице по-прежнему можно менять через CSS.
<img src="/images/project.jpg" width="1200" height="800"
alt="Главная страница проекта" class="article-image">
<style>
.article-image { display: block; max-width: 100%; height: auto; }
</style>Числа 1200 и 800 описывают файл, а не обязательный размер блока на экране. Не подставляйте случайные размеры: неверные пропорции тоже могут привести к сдвигу.
Если карточке нужна фиксированная форма
Для списка работ можно выделить прямоугольник одинаковых пропорций и обрезать изображение внутри.
.project-cover { aspect-ratio: 3 / 2; overflow: hidden; }
.project-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }Применяйте это правило к контейнеру картинки. Важные подписи и интерфейс продукта могут попасть под обрезку; для них лучше сохранить исходные пропорции.
Проверьте медленную загрузку
В инструментах браузера отключите кеш, включите ограничение скорости и перезагрузите страницу.
Место под изображение должно появиться сразу. Если текст всё ещё движется, проверьте шрифты, баннеры и вставляемые скриптами блоки. Размеры картинок устраняют одну причину сдвигов, но не гарантируют нулевой CLS всей страницы.