Sample markup for the tutorial on Retina Sprites at http://ahmedkaludi.com/retina-sprites/

Retina Sprites Css markup

    .candy ul{
        list-style-type: none
    }
    .candy ul li{
        display: inline;
        list-style-type: none
    }
    .candy .candyicons a{
        background: url(http://ahmedkaludi.com/wp-content/uploads/2016/06/retina-sprite-optimized.png) no-repeat;
        /* Original Image size was 36kb. After optimizing it with TinyPng, the size went down to 12kb */
        background-size: 400px;
        padding: 65px 65px 65px 65px;
        display: inline-block;
        margin: 1.2%;
    }
    .candy .youtube a{
        background-position: 0 0;
    }
    .candy .twitter a{
        background-position:0 -135px;
    }
    .candy .instagram a{
        background-position: -147px -135px;
    }
    .candy .snapchat a{
        background-position: 0px -271px;
    }
    .candy .facebook a{
        background-position: -148px -271px;
    }
    .candy .medium a{
        background-position: -147px 0; 
    }