Too high-quality images without using compression

When saving JPEG and WebP images, you can specify the compression ratio from 1 to 100. The lower the compression ratio, the less the resulting file weighs. At the same time, quality is partially lost.

Pinched images with a quality of less than 70 have obvious visual defects, which is why their use is undesirable, as they look ugly and cheapen the design of the site.

But too high-quality images are also bad, as they weigh a lot, which slows down page loading.

Use a compression ratio of 90 for your JPEG and WebP images.

Demonstration of the difference in page loading time when using images with 100 and 90 quality:

Demonstration

PHP code

Open a demo Download the example code

<?php
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                font-size: 20px
            }
            .product-grid img {
                width: 100%;
            }
            .product-grid .product {
                position: relative;
            }
            .product-grid .time {
                position: absolute;
                left: 5px;
                top: 5px;
                background-color: #fff;
                padding: 1px 4px;
            }
            .btn {
                color: #000;
                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>
            // Функция, которая добавляет на изображение время окончания загрузки
            function endLoading(el) {
                var time = performance.now()/1000;
                el.parentNode.insertAdjacentHTML("beforeend", '<div class="time">'+time+' с</div>');
            }
            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="./too_high_quality.php">Картинки 90 качество</a> <a class="btn <?=$mode === '100' ? 'active' : ''?>" href="./too_high_quality.php?mode=100">Картинки 100 качество</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<?php for($i = 0; $i < 50;++$i) { ?>
<div class="product">
    <img src="./<?=$mode === '100' ? 'photo-100.jpg' : 'photo-90.jpg'?>?t=<?=microtime(true)+$i?>" /><br />
    Товар 1<br />
    1000 руб.
</div>
<?php } ?>
        </div>
    </body>
</html>

Any comments or additions? Send us an email admin@site-alarm.com or in telegram channel.

Check your website