Retina - оптимизация изображений под Web Kit.

Отрисовка текста, теней, градиентов производится Safari без какого либо вмешательства в HTML разметку вне зависимости от разрешения экрана.

С изображениями не все обстоит так безоблачно. С появлением Retina дисплеев, Safari и другие Web Kit (Google Chrome) браузеры стали поддерживать расширения для таблиц стилей с поддержкой резолюции изображений. Можно было-бы просто всегда загружать увеличенные изображения, но это привело-бы к излишнему трафику, и не принесло бы никаких диведендов на устройствах без поддержки Retina. В итоге для полноценной поддержки Retina необходимо создать пару изображений, одно высокого разрешения для Retina дисплеев, другое обычное для стандартных дисплеев.

Предоставление изображений с помощью наборов

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

.headerR {
    background: -webkit-image-set( url(images/img.jpg)    1x,
                                   url(images/img_2x.jpg) 2x);

    height: 150px; /* Высота в CSS пикселях */
    width: 800px; /* Ширина в CSS пикселях */
}

Safari автоматически загрузит изображение, исходя из того на каком дисплее оно будет отображаться. -webkit-image-set принимает в параметре 1x изображение для стандартного дисплея, а в параметре 2x для Retina диспея.

Параметры width и height указывают размеры в CSS системе измерения и будет отображаться правильно на обоих типах. Если вы одновременно используете два дисплея, один стандартный, другой Retina, Safari автоматически подгрузит изображение с необходимым разрешением, исходя из глубины разрешения используемого дисплея для отображения.

Внимание! Большой ложкой дегтя является то, что наборы изображений не работают с тегом img

Предоставление изображений с помощью javaScript

function loadImages() {
    var header = document.querySelector('headerR');
    if(window.devicePixelRatio >= 2) {
        header.style.background = 'url(images/img_2x.jpg)';
    }
    else {
        header.style.background = 'url(images/img.jpg)';
    }
}

В приведенном примере проверяется глубина разрешения дисплея и в зависимости от этого загружается соответствующее изображение.

Retina и спрайты

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

.spritesheet {
    background-image: url(images/spritesheet.png);
    background-size: 324px 88px;
    height: 22px;
    width: 27px;
}

Здесь поскольку background-position указывает размер в CSS единицах измерения, загружаемый лист со спрайтами будет правильно отображаться на обоих видах дисплеев.

 
homeЗаметили ошибкукарта сайта 
   Made on a Mac