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

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

Конструкторы сайтов вроде Tilda не оптимизируют размер картинок. Отображаемая область этих 4 картинок 275×275 пикселей, а исходное файл 960×1280 пикселей.

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

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>

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

Подробнее о тарифах