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

Изображения моего сайта выглядят размытыми для пользователей с сетчатыми дисплеями. (Например, на Retina MacBook Pro).

Как обслуживать изображения с высоким разрешением для посетителей с сетчатыми дисплеями, но изображения стандартного размера для всех остальных, сохраняя при этом изображение одинакового видимого размера?

ОТВЕТЫ

Ответ 1

В своем HTML создайте <div> так:

<div class="ninjas-image"></div>

И в вашем CSS добавьте:

.ninjas-image {
  background-image: url('ninja-devices.png');
  width: 410px;
  height: 450px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .ninjas-image {
    background-image: url('[email protected]');
    background-size: 410px 450px;
  }
}

Магия здесь содержится в запросе CSS @media. У нас есть изображение с двойным размером ([email protected]), которое мы добавляем в устройство, когда устройство сообщает о соотношении пикселей устройства 1,5 (144 dpi) или более. Выполнение этого способа позволяет вам сэкономить на пропускной способности, предоставляя оригинальное, меньшие изображения для устройств без сетчатки, и, конечно же, он отлично смотрится на сетчатых устройствах.

Примечание:

Этот ответ был обновлен в 2016 году, чтобы отразить наилучшую практику. min-device-pixel-ratio не попал в стандарт. Вместо этого в стандарт был добавлен min-resolution, но рабочий стол и мобильный Safari не поддерживают его на момент написания, (таким образом, резерв -webkit-min-device-pixel-ratio). Вы можете проверить последнюю информацию по адресу: http://caniuse.com/#feat=css-media-resolution.

Ответ 2

Мы использовали следующее для обработки нескольких случаев, когда отношение равно 1,5 или выше - это учитывает больше устройств и браузеров:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {

У нас есть весь сайт Retina enabled: http://www.embraceware.com/