Слишком качественные картинки без использования сжатия

При сохранении изображений форматов JPEG и WebP можно указать степень сжатия от 1 до 100. Чем меньше степень сжатия, тем меньше весит получаемый файл. При этом частично теряется качество.

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

Но и слишком качественные изображения тоже плохи, так как весят очень много, что замедляет загрузку страницы.

Используйте степень сжатия 90 для ваших JPEG и WebP изображений.

Демонстрация разницы во времени загрузки страницы при использовании изображений с качеством 100 и 90:

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

PHP код

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

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

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

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса