Размытые изображения

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

Хорошие фотографии в магазинах одежды - залог успешных продаж.

Подходящее разрешение картинки зависит от размера отображаемой области и DPR экрана. Например, если на Full-HD мониторе картинка отображается в области 300×400 пикселей, то для Ultra-HD монитора нужно использовать картинку в 2 раза больше. Несмотря на то, что сайт на обоих экранах отображается одинаково, Ultra-HD имеет DPR равным 2. То есть, на каждому номинальному пикселю соответствует 2 реальных пикселя монитора.

На мобильных устройствах номинальный размер страницы может быть 360 пикселей, а реальное разрешение экрана — 1080 пикселей. Что соответствует DPR равным 3.

Экраны мобильных устройств могут иметь разрешение от 360 до 424 пикселей и DPR от 2 до 4.5. То есть, некоторые мобильные устройства могут отобразить картинку размером 424×4.5=1908 пикселей. Но такая картинка будет очень тяжеловесной и сильно замедлит загрузку страницы.

Мы рекомендуем ориентироваться на размер экрана 414 пикселей и DPR 2. Такой размер экрана больше чем 95% экранов устройств телефонов, а DPR — оптимальный компромисс между качеством картинки и скоростью загрузки сайта. Мы оптимизируем изображение под следующие экраны:

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

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

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

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

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