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

Уроки

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

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

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

У 4к мониторов и мобильных устройств каждому пикселю на странице, соответствуют несколько пикселей экрана. Соотношение пикселей страны и экранных пикселей называется device pixel ratio или DRP.

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

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

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

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

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

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

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

◀  Использование HTTP2 Использование технологии спрайтов  ▶
Проверьте ваш сайт

Это бесплатно и займёт от 7 до 45 секунд

x

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