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.
Demo Codepen Demo Download .zip
In this tutorial, I am going to show you how to implement the Retina Sprites.
HTML Markup
CSS Markup
What exactly did we do?
We created a large image say with a canvas of 800px and added all the images in it. We then go into the CSS element where we are including our background image and tell it to resize the image by half, that is 400px using this code: background-size: 400px;
Benefits:
- With this method, you just have to serve the single image on the retina and no-retina devices, that makes it one request which is great for performance. If performance is not your top priority then you should re-think about the way you code.
- You don’t have to worry about creating two different image sizes so that’s less hassle for you.
- Compress the final Sprite image with TinyPng.com and it will reduce the file size by 60% – 75%. In this particular demo, my sprite image size was 36kb, after optimizing it, it got down to 13kb. That’s 63% less than the original image size! If that does not make you excited, I don’t know what will!
Back to you:
Now, I want to hear from you. What are your thoughts on using this method? What method do you use to include retina images when developing a website? I’m looking forward to hearing your thoughts in the comment section below.
