Методы и приемы по улучшению фоновых изображений на Retina дисплеях

Методы и приемы по улучшению фоновых изображений на Retina дисплеях

От автора: хотя в спецификации HTML5 и присутствуют Retina/HiDPI экраны в сочетании с медиа запросами и srcset, изображения, загруженные через CSS, не считаются достижением: не существует полного эквивалента srcset или sizes на CSS, чтобы поместить на фон страницы изображение с оптимальным разрешением.

Все это очень иронично, учитывая, что массивные фоновые изображения высокого разрешения, скорее всего, сильнее нагружают сеть и увеличивают время загрузки в отличие от инлайновых изображений.

Метод 1: избежать проблемы вовсе с помощью SVG

Принимая во внимание качество идеального фонового изображения – низкая контрастность, преимущественно большие объекты, а не мелкие детали, маленький размер файла и гибкость в масштабировании – во многих случаях SVG может стать идеальным решением, даже если оригинальное изображение является фотографией. К примеру, возьмем следующее изображение:

Сохранив его в большом разрешении (около 1000х650 пикселей) с качеством JPEG 25%, мы получим файл размером 17Кб (сжатый GZIP), что уже неплохо. Но если открыть изображение в Adobe Illustrator и воспользоваться инструментами Быстрая Трассировка и Расширение, потом экспортировать очищенный результат в SVG, на выходе уже будет 1.7Кб: 10% от оригинального JPEG, еще и в формате невосприимчивом к изменениям разрешения.

body {
    margin: 0;
    background-image: url(birds-on-wire.svg);
    background-size: cover;
}

У SVG есть свои преимущества:

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

SVG можно накладывать повторно на фон, создавая впечатление «бесшовного» бесконечного изображения (пример по ссылке).

SVG имеет маленький вес, так что его можно напрямую подключить в CSS через DataURI строку, сохранив HTTP запрос и потенциально ускорив загрузку страницы.

Метод 2: Увеличь изображение и снизь качество до нуля

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

Да, я сказал до 0%. Может звучать, как бред сумасшедшего – и такой способ не всегда работает – но растровое изображение с достаточно большим разрешением (> 1200px в ширину) может достойно выглядеть и при нулевом качестве: поблагодарить можно Dave Rupert, он первый отважился попробовать данный метод.

Основной недостаток это «один размер подходит всем»: предположение, что для всех экранов можно обойтись лишь highDPI изображениями, тем самым принуждая устройства загружать излишний контент. Лучшим решением было бы загружать растровое изображение под размер экрана пользователя; это можно сделать с помощью @media query.

Метод 3: Используйте Медиа Запросы

Сперва, для загрузки обычного фонового изображения без Retina экранов вам понадобится следующий код:

body {
    background-image: url("eagle-eye-panorama.jpg");
    background-size: cover;
}

Затем добавьте медиа запросы, загружающие изображения с большим разрешением для Retina экранов:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min-moz-device-pixel-ratio: 1.5),
 only screen and (min-resolution: 240dpi) {
 body {
 background-image: url("eagle-eye-panorama-2x.jpg");
 }
}

Заключение

Существует множество способов использовать большие фоновые изображения, которые будут оставаться четкими на всех экранах, имея при этом минимальный вес: как всегда, идеальное решения приходит со временем (определите рамки производительности для каждой страницы, перед тем как начать) во время исследований и тестирования.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree