Изображения при загрузке вызывают резкую смену структуры страницы

Иногда во время загрузки страницы на пустом месте внезапно появляется изображение, а все блоки резко двигаются вниз или разъезжается, чтобы освободить место под появившееся изображение. Такие подёргивания эстетически выглядят отталкивающее. Кажется, что страница «скачет» во время загрузки.

Также они нагружают процессор устройства, потому что браузер пользователя заново пересчитывает всю структуру страницы и позиционирование элементов.

Чтобы исправить это, укажите размер картинки в атрибутах width и height. Так, браузер узнает пропорции изображения ещё до загрузки самого файла. А нужный, максимальный размер по каждой из сторон задайте с помощью CSS свойств. Если вы используете тег <picture>, то аттрибуты width и height нужно задавать для <source>.

<img src="./img.jpeg" width="600"  height="600" />

<picture>
    <source width="600"  height="600"  srcset="./img.jpeg" media="(max-width: 10024px)" />
    <img />
</picture>

Большая статья (анг.) по теме скачущих изображений.

Интерактивный пример:

Демонстрация

PHP код

Открыть демонстрацию Скачать код примера

<?php
if(isset($_GET['photo'])) {
    usleep(500000);
    header('Content-Type: image/jpeg');
    echo file_get_contents('photo.jpg');
    die;
}
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            img {
                max-width: 300px;
                height: auto;
            }
            .btn {
                color: #000;
                display: inline-block;
                margin-bottom: 5px;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        Режим:
        <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./image_jumping.php">IMG без width и height</a>
        <a class="btn <?=$mode === 'img_with' ? 'active' : ''?>" href="./image_jumping.php?mode=img_with">IMG с width и height</a>
        <a class="btn <?=$mode === 'picture_without' ? 'active' : ''?>" href="./image_jumping.php?mode=picture_without">PICTURE без width и height</a>
        <a class="btn <?=$mode === 'picture_with' ? 'active' : ''?>" href="./image_jumping.php?mode=picture_with">PICTURE с width и height</a>
        <?php
        switch($mode) {
            case 'img_with':?>
                <h1>Заголовок страницы</h1>
                <img src="./image_jumping.php?photo=true&t=<?=microtime(true)?>" width="600"  height="600" />
                <h2>Это подзаголовок останется на месте</h2>
                <p>Этот текст также останется на месте после загрузки картинки, которое происходит через пол секунды.</p>
            <?php
                break;
            case 'picture_without':?>
                <h1>Заголовок страницы</h1>
                <picture>
                    <source media="(max-width: 10024px)" srcset="./image_jumping.php?photo=true&t=<?=microtime(true)?>" />
                    <img />
                </picture>
                <h2>Это подзаголовок резко сдвинется</h2>
                <p>Этот текст также резко сдвинется после загрузки картинки, которое происходит через пол секунды.</p>
            <?php
                break;
            case 'picture_with':?>
                <h1>Заголовок страницы</h1>
                <picture>
                    <source media="(max-width: 10024px)" width="600"  height="600"  srcset="./image_jumping.php?photo=true&t=<?=microtime(true)?>" />
                    <img />
                </picture>
                <h2>Это подзаголовок останется на месте</h2>
                <p>Этот текст также останется на месте после загрузки картинки, которое происходит через пол секунды.</p>
            <?php
                break;
            default:?>
                <h1>Заголовок страницы</h1>
                <img src="./image_jumping.php?photo=true&t=<?=microtime(true)?>" />
                <h2>Это подзаголовок резко сдвинется</h2>
                <p>Этот текст также резко сдвинется после загрузки картинки, которое происходит через пол секунды.</p>
            <?php
                break;
        }
        ?>
    </body>
</html>

ПРО подписка для работы с сервисом

Подробнее о тарифах