If you’ve got a blurry logo on your website, then chances are your logo ain’t retina friendly. Are the images on your website/blog retina friendly?
If the answer is no, then this post is for you. It’s not too late to change that. And if you don’t have a website, it’s not too late to get one either! :). Feel free to check out my post on keeping your website design visually clean and user friendly in my post 5 UX Tips for a Clean Website.
Retina screens have been around for a few years now. With the onset of Apple iPads and more PC products being released with screens that are 2x the pixel density, it was inevitable that we would need to update our routine and save for retina screens when it comes to images on our websites and blogs.
This is especially important for people whose websites rely heavily on images, which is most of us these days – let’s be honest. With the internet booming with so much content, we’ve all developed A.D.D. on varying levels. And if you’re a web designer or blogger by profession, having pixelated images on your sites just won’t fly.
What is retina display?
Textbook Google definition – Retina Display is a marketing term developed by Apple to refer to devices and monitors that have a high resolution and pixel density – roughly 300 or more pixels per inch – that a person is unable to discern the individual pixels at a normal viewing distance.
Sitepoint describes this very well. I couldn’t have put it better myself.
“Retina” is Apple’s brand name for double-density screens but other manufacturers are creating similar displays. The technology is used in recent iPhones, iPads, MacBook Pros and other high-end devices.
For example, the MacBook Pro 15″ has a resolution of 2880 × 1800 or 220 pixels per inch. At this scale, most people are unable to notice individual pixels at typical viewing distances — applications and websites would be too small to use.
How to save for retina?
A regular, non-retina screen would display beautiful images at @1x. This is also how you would define your image sizes in the CSS code. @2x simply means, double the pixel size. Retina screens show two pixels for every one on non-retina screens. This is why the screens appear more crisp and clean.
Simply put, save your logo and images @2x the size for a crisp beautiful visual.
I prefer saving my logo as an .svg and images as .png as they are less lossy than a .jpg and load quicker due to less size. But the rule seems to be .jpg for pixel images and .png for vectors.
Here is an example of an image at a regular size of 498 x 334 and 996 x 668 respectively. If you are view this on a retina screen (most likely yes), you will notice the difference.
Why you should make your website logo and images retina friendly?
Everyone has a website. But not everyone has a quality website. Things like this might seem miniscule to you, but it’s these little details that make a lasting impression and stick as good experiences. There’s just too much competition out there. So always put your best foot forward. It’s worth it.
Keep in mind, that all images for web should be at a consistent 72dpi, or dots per inch. We aren’t changing the dpi, just doubling the size of the image.
Conclusion
Ensure your site looks great on a retina screen. And if there is a hint of blurry in the visuals, be proactive in replacing those images – make your website logo retina friendly. Give your customers the best visual experience they deserve.
