Поймите следующее, если вы просто подмените картинку, то эффект будет как у вас, увеличение в 2 раза.
Ваша же задача сделать так, чтобы ваша х2 картинка, занимала визуально ровно ту же область что и раньше.
Этого эффекта очень легко добиться для тегов IMG просто прописав ширину, например width: 100px; и всё, ретина картинка встанет как надо.
Для фоновых же изображений, все не так просто, нужно использовать background-size
В вашем случае нужно написать что-то вроде:
&--yt {
background: url('../img/yt-x2.png');
background-size: 50% 50%;
}
