Retina and performance
There is a lot going on with „omg omg, they said my website isn’t ready for retina”. Some people heard this word and now they are freaking out. And some of them don’t even know what it is.
Retina is just a brand name of Apple display with high pixel density. In short – it means that we need to serve images 2 times bigger (high res) so they won’t be blurred on retina like displays. We can find such displays not only in Apple products, but also in Google Nexus, Samsung Galaxy and so on. They are not called retina, but they do the same. This reminds me of samsung commercial. More and more devices will be using it, so it’s important to be prepared. I think.
The web is now filled with tips how to make your website retina ready. Some of them will briefly tell you about disadvantages (very briefly). There is one, big disadvantage. Performance. Now, with responsive web desing, high pixel density displays, we think about performance a lot less (or more, it depends on dev). But still it’s more important for our website to look good, than work good.
Mobile first
In responsive web design, there is this mobile first approach. Why? One of the reason is because more and more users uses their mobile device to access internet. What exactly mobile mean for me? Device with less „computing power”, usually with slower internet connection (we don’t have wifi access all the time) and mobile internet that is slower after downloading some amount of data. We need to remember that when we prepare our website to be retina ready.
No matter which solution you choose it will affect performance. Bigger images mean larger file size. And when designing for mobile it’s all about size. I can imagine a user that is happy to wait for those sharp, super cool images that are eating his transfer. NOT!
But why focusing on mobile?
You might ask, why the hell i talk so much about mobile, when this topic is about retina. Well, let see current list of devices with higher pixel density. You can also check full list on wikipedia. We are interested with devices with pixel-ratio minimum 2. Hmm, let see, smartphone, tablet, smartphone, smartphone, smartphone, […]. Shocking! Most (almost all) of them are mobile devices! So bare in mind – when you make your site „retina ready”, you make it not so ready for mobile devices.
So what now?
I’m not saying we shouldn’t do anything. The look is important too. Just don’t make absolutely everything 2 times bigger cause it will impact your users in a bad way. For icons use vectors rather than bitmaps, like Font Awesome. Use CSS Effects. Some stuff, like gradients, rounded corners, shadows, can be reproduced in the CSS – you don’t need images for that. But all of this should be consider at the very beginning, before we even start to design a website. What if you want to adjust existing website to retina. In short I would say:
- yae – for preparing @2x set sprites
- nay – for serving <img /> with double size or swapping them with some JS (the only exception would be a logo, as it’s usually not very big, and it is most important image on website)
- the big nay – for serving backgrounds with double size. Did you know that even if you use CSS media query min-device-pixel-ratio your users might download that background twice? First one for non-retina and second for retina. Backgrounds have usually large file size by themselves. I’m referring here to “full screen photo backgrounds” which are lately very trendy and not old fashion patterns ;o)
Be smart about it. Your users will thank you for that. Whatever you decide don’t forget to optimize your website. The performance part of post “The MUST when launching a website” should help you with that.