>
An overabundance of small pictures

Lessons

An overabundance of small pictures

To download a file, the browser spends time on service operations: establishing a connection, sending a request, receiving a response, closing a connection. This time is constant and does not depend on the speed of the Internet connection. For example, with a very fast Internet connection, it will take 1 millisecond to download the contents of the file, and up to 100 for service operations. The execution time of service operations depends on the network latency — ping, and not on the speed of the Internet connection.

To speed up the site, programmers group many small icons into one large file. This is usually a CSS or HTML file. This is done using data url technology.

Here are examples of the data url of a 1-by-1 pixel PNG image.

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

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

You can convert any file to data url. [Conversion service](https://datauri.ai /) files.

Below is an example of how the download speed changes if the icons are not uploaded as a separate file, but transferred to HTML code as a data url.

Demonstration
PHP code
HTML code
Open a demoDownload the example code
<?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=1788348200.7017.0" />
        <img src="./icon-64.png?t=1788348200.7017.1" />
        <img src="./icon-64.png?t=1788348200.7017.2" />
        <img src="./icon-64.png?t=1788348200.7017.3" />
        <img src="./icon-64.png?t=1788348200.7017.4" />
        <img src="./icon-64.png?t=1788348200.7017.5" />
        <img src="./icon-64.png?t=1788348200.7017.6" />
        <img src="./icon-64.png?t=1788348200.7017.7" />
        <img src="./icon-64.png?t=1788348200.7017.8" />
        <img src="./icon-64.png?t=1788348200.7017.9" />
        <img src="./icon-64.png?t=1788348200.7017.10" />
        <img src="./icon-64.png?t=1788348200.7017.11" />
        <img src="./icon-64.png?t=1788348200.7017.12" />
        <img src="./icon-64.png?t=1788348200.7017.13" />
        <img src="./icon-64.png?t=1788348200.7017.14" />
        <img src="./icon-64.png?t=1788348200.7017.15" />
        <img src="./icon-64.png?t=1788348200.7017.16" />
        <img src="./icon-64.png?t=1788348200.7017.17" />
        <img src="./icon-64.png?t=1788348200.7017.18" />
        <img src="./icon-64.png?t=1788348200.7017.19" />
        <img src="./icon-64.png?t=1788348200.7017.20" />
        <img src="./icon-64.png?t=1788348200.7017.21" />
        <img src="./icon-64.png?t=1788348200.7017.22" />
        <img src="./icon-64.png?t=1788348200.7017.23" />
        <img src="./icon-64.png?t=1788348200.7017.24" />
        <img src="./icon-64.png?t=1788348200.7017.25" />
        <img src="./icon-64.png?t=1788348200.7017.26" />
        <img src="./icon-64.png?t=1788348200.7017.27" />
        <img src="./icon-64.png?t=1788348200.7017.28" />
        <img src="./icon-64.png?t=1788348200.7017.29" />
        <img src="./icon-64.png?t=1788348200.7017.30" />
        <img src="./icon-64.png?t=1788348200.7017.31" />
        <img src="./icon-64.png?t=1788348200.7017.32" />
        <img src="./icon-64.png?t=1788348200.7017.33" />
        <img src="./icon-64.png?t=1788348200.7017.34" />
        <img src="./icon-64.png?t=1788348200.7017.35" />
        <img src="./icon-64.png?t=1788348200.7017.36" />
        <img src="./icon-64.png?t=1788348200.7017.37" />
        <img src="./icon-64.png?t=1788348200.7017.38" />
        <img src="./icon-64.png?t=1788348200.7017.39" />
        <img src="./icon-64.png?t=1788348200.7017.40" />
        <img src="./icon-64.png?t=1788348200.7017.41" />
        <img src="./icon-64.png?t=1788348200.7017.42" />
        <img src="./icon-64.png?t=1788348200.7017.43" />
        <img src="./icon-64.png?t=1788348200.7017.44" />
        <img src="./icon-64.png?t=1788348200.7017.45" />
        <img src="./icon-64.png?t=1788348200.7017.46" />
        <img src="./icon-64.png?t=1788348200.7017.47" />
        <img src="./icon-64.png?t=1788348200.7018.48" />
        <img src="./icon-64.png?t=1788348200.7018.49" />
        <img src="./icon-64.png?t=1788348200.7018.50" />
        <img src="./icon-64.png?t=1788348200.7018.51" />
        <img src="./icon-64.png?t=1788348200.7018.52" />
        <img src="./icon-64.png?t=1788348200.7018.53" />
        <img src="./icon-64.png?t=1788348200.7018.54" />
        <img src="./icon-64.png?t=1788348200.7018.55" />
        <img src="./icon-64.png?t=1788348200.7018.56" />
        <img src="./icon-64.png?t=1788348200.7018.57" />
        <img src="./icon-64.png?t=1788348200.7018.58" />
        <img src="./icon-64.png?t=1788348200.7018.59" />
        <img src="./icon-64.png?t=1788348200.7018.60" />
        <img src="./icon-64.png?t=1788348200.7018.61" />
        <img src="./icon-64.png?t=1788348200.7018.62" />
        <img src="./icon-64.png?t=1788348200.7018.63" />
        <img src="./icon-64.png?t=1788348200.7018.64" />
        <img src="./icon-64.png?t=1788348200.7018.65" />
        <img src="./icon-64.png?t=1788348200.7018.66" />
        <img src="./icon-64.png?t=1788348200.7018.67" />
        <img src="./icon-64.png?t=1788348200.7018.68" />
        <img src="./icon-64.png?t=1788348200.7018.69" />
        <img src="./icon-64.png?t=1788348200.7018.70" />
        <img src="./icon-64.png?t=1788348200.7018.71" />
        <img src="./icon-64.png?t=1788348200.7018.72" />
        <img src="./icon-64.png?t=1788348200.7018.73" />
        <img src="./icon-64.png?t=1788348200.7018.74" />
        <img src="./icon-64.png?t=1788348200.7018.75" />
        <img src="./icon-64.png?t=1788348200.7018.76" />
        <img src="./icon-64.png?t=1788348200.7018.77" />
        <img src="./icon-64.png?t=1788348200.7018.78" />
        <img src="./icon-64.png?t=1788348200.7018.79" />
        <img src="./icon-64.png?t=1788348200.7018.80" />
        <img src="./icon-64.png?t=1788348200.7018.81" />
        <img src="./icon-64.png?t=1788348200.7018.82" />
        <img src="./icon-64.png?t=1788348200.7018.83" />
        <img src="./icon-64.png?t=1788348200.7018.84" />
        <img src="./icon-64.png?t=1788348200.7018.85" />
        <img src="./icon-64.png?t=1788348200.7018.86" />
        <img src="./icon-64.png?t=1788348200.7018.87" />
        <img src="./icon-64.png?t=1788348200.7018.88" />
        <img src="./icon-64.png?t=1788348200.7018.89" />
        <img src="./icon-64.png?t=1788348200.7018.90" />
        <img src="./icon-64.png?t=1788348200.7018.91" />
        <img src="./icon-64.png?t=1788348200.7018.92" />
        <img src="./icon-64.png?t=1788348200.7018.93" />
        <img src="./icon-64.png?t=1788348200.7018.94" />
        <img src="./icon-64.png?t=1788348200.7018.95" />
        <img src="./icon-64.png?t=1788348200.7018.96" />
        <img src="./icon-64.png?t=1788348200.7018.97" />
        <img src="./icon-64.png?t=1788348200.7018.98" />
        <img src="./icon-64.png?t=1788348200.7018.99" />
    </body>
</html>

Tariff plans for working with the service

One-time verification

pages by 10 day
6.6₽ per page
For 1 site
990₽ / one-time
Tools available:
Select

Subscription

pages by 30 day
3.18₽ per page
Any website
1590₽ / month
Tools available:
Select

Additional pages

For an active subscription
spend during the year
Any website
*0.3 - 3₽ / 1 page

Additional pages for the Subscription plan.

Adding funds via your merchant profile.

*The price depends on the active subscription. The more expensive the tariff, the cheaper the additional pages.

x

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree