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

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.