/ /
Переизбыток маленьких картинок

Уроки

Переизбыток маленьких картинок

Чтобы загрузить файл, браузер тратит время на служебные операции: установка соединения, отправка запроса, получение ответа, закрытие соединения. Это время постоянно и не зависит от скорости интернет соединения. Например, при очень быстром интернет соединении на загрузку содержимого файла уйдёт  1 миллисекунда, а на служебные операции до 100. Время выполнения служебных операций зависит от сетевой задержки — пинга, а не от скорости интернет соединения.

Чтобы ускорить сайт, программисты группируют множество маленьких иконок в один большой файл. Обычно это CSS или HTML файл. Делается это с помощью data url технологии.

Вот примеры data url картинки в формате PNG размером 1 на 1 пиксель.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P4DwQACfsD/Z8fLAAAAAAASUVORK5CYII=">

.element {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P4DwQACfsD/Z8fLAAAAAAASUVORK5CYII=)
}

Конвертировать в data url можно любой файл. Сервис для конвертации файлов.

Ниже пример того, как меняется скорость загрузки, если иконки загружать не отдельным файлом, а перенести их в HTML код, как data url.

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?php
$mode = $_GET['mode'] ?? '';
$base64 = 'data:image/png;base64,'.base64_encode(file_get_contents('icon-64.png'));
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .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>
        <script>
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./icons_count.php">Иконки файлами</a> <a class="btn <?=$mode === '64' ? 'active' : ''?>" href="./icons_count.php?mode=64">Иконки base64</a>
        <br />
        <p>На странице 100 иконок.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
<?php for($i = 0; $i < 100;++$i) { ?>
        <img src="<?=$mode === '64' ? $base64 : './icon-64.png?t='.microtime(true).'.'.$i ?>" />
<?php } ?>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .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>
        <script>
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn active" href="./icons_count.php">Иконки файлами</a> <a class="btn " href="./icons_count.php?mode=64">Иконки base64</a>
        <br />
        <p>На странице 100 иконок.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <img src="./icon-64.png?t=1783201175.9182.0" />
        <img src="./icon-64.png?t=1783201175.9182.1" />
        <img src="./icon-64.png?t=1783201175.9182.2" />
        <img src="./icon-64.png?t=1783201175.9182.3" />
        <img src="./icon-64.png?t=1783201175.9182.4" />
        <img src="./icon-64.png?t=1783201175.9182.5" />
        <img src="./icon-64.png?t=1783201175.9182.6" />
        <img src="./icon-64.png?t=1783201175.9182.7" />
        <img src="./icon-64.png?t=1783201175.9182.8" />
        <img src="./icon-64.png?t=1783201175.9182.9" />
        <img src="./icon-64.png?t=1783201175.9182.10" />
        <img src="./icon-64.png?t=1783201175.9182.11" />
        <img src="./icon-64.png?t=1783201175.9182.12" />
        <img src="./icon-64.png?t=1783201175.9182.13" />
        <img src="./icon-64.png?t=1783201175.9182.14" />
        <img src="./icon-64.png?t=1783201175.9182.15" />
        <img src="./icon-64.png?t=1783201175.9182.16" />
        <img src="./icon-64.png?t=1783201175.9182.17" />
        <img src="./icon-64.png?t=1783201175.9182.18" />
        <img src="./icon-64.png?t=1783201175.9182.19" />
        <img src="./icon-64.png?t=1783201175.9182.20" />
        <img src="./icon-64.png?t=1783201175.9182.21" />
        <img src="./icon-64.png?t=1783201175.9182.22" />
        <img src="./icon-64.png?t=1783201175.9182.23" />
        <img src="./icon-64.png?t=1783201175.9182.24" />
        <img src="./icon-64.png?t=1783201175.9182.25" />
        <img src="./icon-64.png?t=1783201175.9182.26" />
        <img src="./icon-64.png?t=1783201175.9182.27" />
        <img src="./icon-64.png?t=1783201175.9182.28" />
        <img src="./icon-64.png?t=1783201175.9182.29" />
        <img src="./icon-64.png?t=1783201175.9182.30" />
        <img src="./icon-64.png?t=1783201175.9182.31" />
        <img src="./icon-64.png?t=1783201175.9182.32" />
        <img src="./icon-64.png?t=1783201175.9182.33" />
        <img src="./icon-64.png?t=1783201175.9182.34" />
        <img src="./icon-64.png?t=1783201175.9182.35" />
        <img src="./icon-64.png?t=1783201175.9182.36" />
        <img src="./icon-64.png?t=1783201175.9182.37" />
        <img src="./icon-64.png?t=1783201175.9182.38" />
        <img src="./icon-64.png?t=1783201175.9182.39" />
        <img src="./icon-64.png?t=1783201175.9182.40" />
        <img src="./icon-64.png?t=1783201175.9182.41" />
        <img src="./icon-64.png?t=1783201175.9182.42" />
        <img src="./icon-64.png?t=1783201175.9182.43" />
        <img src="./icon-64.png?t=1783201175.9182.44" />
        <img src="./icon-64.png?t=1783201175.9182.45" />
        <img src="./icon-64.png?t=1783201175.9182.46" />
        <img src="./icon-64.png?t=1783201175.9182.47" />
        <img src="./icon-64.png?t=1783201175.9182.48" />
        <img src="./icon-64.png?t=1783201175.9182.49" />
        <img src="./icon-64.png?t=1783201175.9182.50" />
        <img src="./icon-64.png?t=1783201175.9182.51" />
        <img src="./icon-64.png?t=1783201175.9182.52" />
        <img src="./icon-64.png?t=1783201175.9182.53" />
        <img src="./icon-64.png?t=1783201175.9182.54" />
        <img src="./icon-64.png?t=1783201175.9182.55" />
        <img src="./icon-64.png?t=1783201175.9182.56" />
        <img src="./icon-64.png?t=1783201175.9182.57" />
        <img src="./icon-64.png?t=1783201175.9182.58" />
        <img src="./icon-64.png?t=1783201175.9182.59" />
        <img src="./icon-64.png?t=1783201175.9182.60" />
        <img src="./icon-64.png?t=1783201175.9182.61" />
        <img src="./icon-64.png?t=1783201175.9182.62" />
        <img src="./icon-64.png?t=1783201175.9182.63" />
        <img src="./icon-64.png?t=1783201175.9182.64" />
        <img src="./icon-64.png?t=1783201175.9182.65" />
        <img src="./icon-64.png?t=1783201175.9182.66" />
        <img src="./icon-64.png?t=1783201175.9182.67" />
        <img src="./icon-64.png?t=1783201175.9182.68" />
        <img src="./icon-64.png?t=1783201175.9182.69" />
        <img src="./icon-64.png?t=1783201175.9182.70" />
        <img src="./icon-64.png?t=1783201175.9182.71" />
        <img src="./icon-64.png?t=1783201175.9182.72" />
        <img src="./icon-64.png?t=1783201175.9182.73" />
        <img src="./icon-64.png?t=1783201175.9182.74" />
        <img src="./icon-64.png?t=1783201175.9182.75" />
        <img src="./icon-64.png?t=1783201175.9182.76" />
        <img src="./icon-64.png?t=1783201175.9182.77" />
        <img src="./icon-64.png?t=1783201175.9182.78" />
        <img src="./icon-64.png?t=1783201175.9182.79" />
        <img src="./icon-64.png?t=1783201175.9182.80" />
        <img src="./icon-64.png?t=1783201175.9182.81" />
        <img src="./icon-64.png?t=1783201175.9182.82" />
        <img src="./icon-64.png?t=1783201175.9182.83" />
        <img src="./icon-64.png?t=1783201175.9182.84" />
        <img src="./icon-64.png?t=1783201175.9182.85" />
        <img src="./icon-64.png?t=1783201175.9182.86" />
        <img src="./icon-64.png?t=1783201175.9182.87" />
        <img src="./icon-64.png?t=1783201175.9182.88" />
        <img src="./icon-64.png?t=1783201175.9182.89" />
        <img src="./icon-64.png?t=1783201175.9182.90" />
        <img src="./icon-64.png?t=1783201175.9182.91" />
        <img src="./icon-64.png?t=1783201175.9182.92" />
        <img src="./icon-64.png?t=1783201175.9182.93" />
        <img src="./icon-64.png?t=1783201175.9182.94" />
        <img src="./icon-64.png?t=1783201175.9182.95" />
        <img src="./icon-64.png?t=1783201175.9182.96" />
        <img src="./icon-64.png?t=1783201175.9182.97" />
        <img src="./icon-64.png?t=1783201175.9182.98" />
        <img src="./icon-64.png?t=1783201175.9182.99" />
    </body>
</html>

Тарифные планы для работы с сервисом

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

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Соглашаюсь