Сегодня, с появлением новых экранов, появилось желание показывать сайты на экранах retina, используя специальные картинки retina html.

Как видит человек обычные картинки на retina дисплее в html?


Слева изображение на обычных экранах, справа — на retina. Условно говоря, слева изображение на iMac, справа на iMac Retina.

Но это не так важно, важно просто понимать, что на Retina картинки отображаются чуть более размытыми, чем шрифты.

Какие есть способы решения задачи оптимизации картинки retina html?

Решение 1: CSS media-query картинки Retina HTML

Существует специальный идентификатор для media query на CSS3, который позволяет определить Retina или не Retina. И в случае, если Retina, подменять все возможные картинки на в 2 раза большие (с тем же размером).

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

Решение 2: подмена картинки Retina HTML на Javascript

Есть и другой способ, который будет обрабатываться на javascript. У устройств с devicePixelRatio (то есть Retina) большим, чем 1, есть такое свойство в DOM объекте Window.

Попробуем это применить на практике картинки Retina HTML:

$(document).ready(function(){

    if (window.devicePixelRatio > 1) {

        var lowresImages = $('img');

 

        lowresImages.each(function(i) {

            var lowres = $(this).attr('src');

            var highres = lowres.replace(".", "@2x.");

            $(this).attr('src', highres);

        });

    }

});

Решение 3: использование SVG картинки Retina HTML

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

Применим это на практике картинки Retina HTML:

.image {

    background-image: url(example.svg);

    background-size: 150px 200px;

    height: 150px;

    width: 200px;

}

Если знаете какие-нибудь ещё способы решения, пишите в комментарии.