I always go an extra mile to improve the website performance. @2x method works great for the retina but it kills the performance because it increases the requests and requires the images to be loaded individually.One new way that I found recently is to use CSS Sprites. Recently I was working with a big client and they had ‘Performance’ as one of their requirements. I created a new method which uses the traditional CSS Sprites but supports Retina screens at the same time. I was skeptical at first but then I did some tests to make sure that it is perfectly compatible with all the browsers and devices. In this tutorial, I am going to show you how to implement the Retina Sprites. HTML Markup <div class="candy"> <ul> <li class="candyicons facebook"><a href="#"></a></li> <li class="candyicons instagram"><a href="#"></a></li> <li class="candyicons medium"><a href="#"></a></li> <li class="candyicons snapchat"><a href="#"></a></li> <li class="candyicons twitter"><a href="#"></a></li>
Share This