Ответ 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.