Исходный размер картинки и размер области её отображения

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

Благодаря повышению чёткости в 2 раза, блюдо смотрится аппетитнее и дороже.

У 4к мониторов и мобильных устройств каждому пикселю на странице, соответствуют несколько пикселей экрана. Соотношение пикселей страницы и экранных пикселей называется device pixel ratio или DRP. Например, разрешение телефона Samsung Galaxy S20 3200×1440, а размер страницы у него 800×360. Его DPR равен 4.

Благодаря коэффициенту DPR, задаваемому производителями смартфона/планшета, кнопка размером в 40 пикселей на всех экранах будет примерно с подушечку пальца.

Для экранов высокого разрешения рекомендуем использовать картинки с DPR равным 2. Некоторые телефоны способны отображать картинки с коэффициентом и 3, и 4 DPR. Но если использовать изображения, оптимизированный для такого DPR, то исходные файлы картинок будут слишком крупные и это замедлит загрузку страницы. Изображения с двойной точностью (DPR равный 2) — идеальный компромисс.

Наш сервис генерирует HTML код для отображения нужных размером картинок под каждый экран. По аналогии он подготавливает и CSS код.

Мы тестируем страницу на экране 414 пикселей. Но смартфоны бывают размером от 360 пикселей до 430. Разумеется, делать изображение под каждый размер экрана — нецелесообразно, поэтому мы подобрали оптимальный размер для нашего сервиса проверки в 414 пикселей на основании статистики. Количество смартфонов с экраном больше 414 пикселей составляет около 5%.

Подходящий размер картинок важен по следующим причинам:

Пользователи 4К мониторов видят качественные картинки. А это самая платёжеспособная аудитория.
Сокращение размера изображений ускоряют загрузку страницы.

Читайте так же:

База всех разрешений экранов https://yesviz.com/viewport/. Информация о вашем экране https://www.mydevice.io/.

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

PHP код

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

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 20px;
            }
            .el {
                width: 200px;
            }
            .normal {
                width: 200px;
                height: 200px;
            }
            .blur {
                width: 200px;
                height: 200px;
                filter: blur(1px);
            }
            .horizontal {
                width: 200px;
                height: 100px;
            }
            .vertical {
                width: 100px;
                height: 200px;
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        <h1>Пример различных деформаций изображений</h1>
        <div class="grid">
            <div class="el">
                <div class="title">Нормальный</div>
                <img src="./banana.jpg" class="normal"/>
            </div>
            <div class="el">
                <div class="title">Низкое качество</div>
                <img src="./banana.jpg" class="blur" />
            </div>
            <div class="el">
                <div class="title">Растянуто в ширину</div>
                <img src="./banana.jpg" class="horizontal" />
            </div>
            <div class="el">
                <div class="title">Растянуто в высоту</div>
                <img src="./banana.jpg" class="vertical" />
            </div>
        </div>
    </body>
</html>

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

ПРО подписка

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

1 580 ₽

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

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