Как правильно делать спрайты под ретину?

Здравствуйте. Не могу сообразить, как делать правильно спрайты под ретину.
Гулпом генерирую 2 файла спрайтов. Один с обычными иконками, второй с в 2 раза большими. Потом задаю блоку такие стили:
.block:before{content: ''; width: 10px; height: 16px; position: absolute; top: 0; left: -20px; background: url("../images/sprite.png") no-repeat -104px -18px;}
И потом стили для ретины:
media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 192dpi) {
.block:before{
background: url("../images/sprite2@x.png") -196px -33px;
}
}
Но получается, что картинка под ретину не масштабируется. Прописываю background-size: 10px 16px; и картинка спрайта под ретину вся масштабируется, а не нужная иконка.
Как победить напасть? Заранее спасибо