Как создать легкие фоновые рисунки для Retina экранов с помощью функции image-set

Как создать легкие фоновые рисунки для Retina экранов с помощью функции image-set

От автора: относительно экранов с высоким DPI обычные изображения довольно хорошо работают в HTML5 и CSS. Поддержка тега picture и атрибутов srcset и sizes также довольно обширна. Однако фоновых изображений для ретина дисплеев прогресс не коснулся. Такие фоновые изображения зачастую очень большие (как в пикселях, так и по весу), и это негативно на них сказывается. На протяжении довольно долгого времени нам был доступен промежуточный метод решения данной проблемы, но сейчас появился способ куда лучше.

@media решения

Возьмем обычное изображение с разрешением 72DPI automobile.jpg и его версию с высоким разрешением automobile-2x.jpg. Между двумя изображениями можно переключаться в рамках одного элемента body:

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

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    body {
        background-image: url("automobile-2x.jpg");
    }
}

Функция image-set

Есть более краткий и эффективный метод – функция image-set. Значение на данный момент поддерживается только в Webkit браузерах, для него необходимо прописывать вендорные префиксы:

body {
    background-image: url("automobile.jpg");
    background-image: -webkit-image-set(url("automobile.jpg") 1x, url("automobile-2x.jpg") 2x );
    background-size: cover;
}

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

Заключение

Функция image-set() – перспективный, но требующий тщательной проработки метод установки фоновых изображений для ретина дисплеев. Можно использовать обычные медиа запросы для поддержки во всех браузерах, а можно взять функцию image-set() и прописать фолбэк, который будет отвечать за показ изображений с обычным разрешением в браузерах без поддержки данной функции.

Источник: 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