Избыточно крупные картинки

Область, в которой отображается изображение на странице, имеет разный размер на разных экранах. Например, если картинка занимает всю ширину страницы, то её размер будет от 360 пикселей на мобильном устройстве, до 3840 пикселей для монитора Ultra-HD.

Мы оптимизируем изображение под следующие экраны:

Ultra-HD - 3840×2160 пикселей.
Full-HD - 1920×1080 пикселей.
HD - 1376×768 пикселей.
Телефон вертикально - 414×896 пикселей.
Телефон горизонтально - 896×414 пикселей.
Планшет вертикально - 768×1024 пикселей.
Планшет горизонтально - 1024×768 пикселей.

Мобильные устройства имеют ширину от 360 до 424 пикселя. Мы выбрали ширину 414, как стандарт, потому что она больше 95% устройств. То есть, оптимизировав картинки под неё, они будут иметь максимальное качество на 95% экранов, а на всех остальных снижение качества будет не более 2.5%.

Также мобильные устройства и 2K и Ultra-HD экраны имеют параметр Device Pixel Ratio или DPR. Это значит, что 1 номинальному пикселю сайта, соответствует от 2 до 4.5 реальных пикселей экрана. Например, на Full-HD мониторе и Ultra-HD все блоки сайта имеют одинаковые пропорции. Но у Ultra-HD экрана каждому пикселю сайта соответствуют 2 пикселя экрана. Поэтому для Ultra-HD экранов лучше использовать в 2 раза более качественные изображения, чтобы они выглядели представительней и дороже.

У мобильных устройств DPR может доходить до 4.5. Такие устройства могут отображать крупные изображения с высокой точностью. Но тогда придётся загружать очень тяжеловесные картинки, которые будут замедлять загрузку сайта, а повышенное качество не будет сильно влиять на восприятие сайта пользователем. Поэтому для мобильных устройств рекомендуем ориентировать на DPR равным 2.

Вот код, который использует картинку нужного размера в зависимости от размера экрана:

<picture>
    <source media="(max-width: 430px)" srcset="/revision/image-1204x814.png#300x300" />
    <source media="(max-width: 768px)" srcset="/revision/image-1204x814.png#300x300" />
    <source media="(max-width: 900px)" srcset="/revision/image-1204x814.png#300x300" />
    <source media="(max-width: 1024px)" srcset="/revision/image-1204x814.png#300x300" />
    <source media="(max-width: 1378px)" srcset="/revision/image-1204x814.png#150x150" />
    <source media="(min-width: 1378px)" srcset="/revision/image-1204x814.png#150x150, /revision/image-1204x814.png#300x300 2x" />
    <img srcset="/revision/image-1204x814.png" />
</picture>

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

ПРО подписка

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

1 580 ₽

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

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