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

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

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

@media решения

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

Функция image-set

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Заключение

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

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

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree