Images when loading cause a sharp change in the structure of the page

Sometimes, during page loading, an image suddenly appears in an empty place, and all the blocks move down sharply or move apart to make room for the image that appears. Such twitches aesthetically look repulsive. It seems that the page "jumps" during loading.

They also load the device's processor, because the user's browser recalculates the entire page structure and positioning of elements.

To fix this, specify the image size in the width and height attributes. So, the browser learns the proportions of the image even before downloading the file itself. And set the desired maximum size on each side using CSS properties. If you use the <picture> tag, then the width and height attributes must be set for <source>.

&lt;img src=&quot;./img.jpeg&quot; width=&quot;600&quot;  height=&quot;600&quot; /&gt;

&lt;picture&gt;
    &lt;source width=&quot;600&quot;  height=&quot;600&quot;  srcset=&quot;./img.jpeg&quot; media=&quot;(max-width: 10024px)&quot; /&gt;
    &lt;img /&gt;
&lt;/picture&gt;

[Great article (eng.)](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again /) on the topic of jumping images.

Interactive example:

Demonstration

PHP code

Open a demo Download the example code

<?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>

PRO subscription for working with the service

Learn more about pricing plans