Самый простой способ сделать ваши изображения «сетчаткой» (и оптимизировать их для дисплеев retina) - это определить их значения width и height как только половину исходного файла. Вот пример изображения, использующего только половину исходной высоты и ширины:
<style>
img {
height: 250px;
width: 250px;
}
</style>
<img src="coolPic500x500.jpg" alt = "Самая прекрасная картина" /> Установите width и height тега img на половину их исходных значений. В этом случае исходная height и исходная width составляют 200 пикселей.