Retina, or high pixel density, displays are no longer new. They are on all the major and mainstream mobile devices, as well as Apple’s flagship MacBook Pro laptops. While Apple may have coined the term “retina” to differentiate between their lower resolution devices/displays, it is probably the term I will use when referring to displays with a pixel density of 200ppi or better (ppi stands for “pixels per inch”). This is mainly because people are familiar with the term “retina” and what it means, and I have a ton of Apple gear. 😉
I feel kind of redundant talking about the technical details of what the differences are between regular (non-retina) displays and retina displays because there are so many posts out there that already do a good job of this.
The quick and easy explanation, for Apple’s devices anyway, is that retina displays essentially have four (4) times as many pixels as their non-retina counterparts. One (1) regular pixel becomes four (4) pixels on a retina display.
They use these extra pixels not for creating more screen “real-estate”, but rather making things look sharper. They do his by scaling things that are displayed. As an example, the 15″ MacBook Pro retina’s resolution is 2880×1800, but is scaled (by default) to act like it is 1440×900.
So, for the iPhone, the original iPhone’s display has a resolution of 320×480 and the retina version in that display’s form factor (the iPhone 4 & 4S… keep in mind they changed the screen dimensions starting with the iPhone 5) is 640×960. This is each dimension’s pixel count multiplied by two, but keep in mind that means each pixel equates to four (4) pixels when this happens. This post by Smashing Magazine does a good job of explaining this.
Why am I even writing this post?? Well, recently I bought a 15″ MacBook Pro with a retina display. Before I bought it I didn’t think it would be that big of a deal. I had seen them, my friends have had them, and I had checked them out… but it is not until it is yours and you are doing all of the things that you do on a computer that make it more intimate and you “get it“. Then, as you use various applications and visit different web sites, it becomes PAINFULLY clear when something is NOT “retina capable”. At first I thought the non-retina graphics were worse than my non-retina laptop… until I compared them side-by-side and realized it is not worse… it is just so much more dramatic when it is side-by-side on a web page comparing retina capable content and non-retina content within centimeters of each other. As an easy example, text (unless it is an actual bitmap image) is pretty much always retina capable because fonts are vector based and not bitmaps. So if you visit a web page with bitmap based images (this includes bmp, jpg, png, gif, etc.) that are not configured to be 2x images scaled down for retina displays and those images are next to the perfect looking text, it becomes very obvious.
This is also true on an iPad or iPhone that has a retina display, however it is not as painful because those devices are already doing some scaling of the web pages and images so you are not scrolling all over the place to see the content. Where it becomes very obvious is if you run a native iOS application who’s graphics were not designed for a retina display. This is almost impossible to find anymore, but there are some out there.
So this brings up the other reason I started looking into this more, which is the fact that I created (with some serious help from ThinkUp, LLC) a native iOS application and noticed some of the graphics I have are not retina capable and it is noticeable. Unfortunately I was not the one who created those graphics, so I don’t have the originals that I can scale as needed. I will be getting them from the correct person though, so I should be able to fix those very quickly.
At any rate, since this has been bugging me on other web sites I visit with my retina MacBook Pro, I figured I better make darn sure my own web site was fully retina capable. So I visited a bunch of web posts that talk about how to do it and started experimenting on my own. I bought a full Adobe Creative Cloud subscription so I would have all of those applications to use in building both web and application assets. They are good (even great) tools, but I don’t necessarily think they are the “best” hands down. I had purchased other OS X native applications that were allowing me to get the job done, but since I am also collaborating with others and sharing assets, AND those other people always seem to have Adobe applications, it just made sense to switch over to Adobe. Of course, now I have to figure out how to do everything I need in those apps… but maybe that’s another post. 😉
This post by Daan Jobsis (you’ll need to translate the page for english) does an awesome job of showing the various ways you can solve the issue and, in some cases, wind up with images that are retina capable but even smaller than the non-retina images! I suppose part of the reason I brought up the fact that I am using the Adobe Creative Cloud suite is because I have not been able to figure out how to apply varying levels of compression on PNG files. I have done varying levels of compression on JPG files, but in order to have transparencies in most of the images I am using, it requires using PNG files. So far I only see one (1) compression option in Photoshop, and it doesn’t seem to reduce the size of the image file much at all. But, in Daan’s post he mentions the fact that you can use higher compression on the larger dimension files because the compression artifacts are not as noticeable once you scale them down to what their 72ppi dimensions would be. I am hopeful that I can figure out a way to use this method and only maintain one set of image assets for my web site… even if I may have to maintain both versions for my iOS application/s.
Other posts talk about using SVG files (Scalable Vector Graphics) for things where that works, so I will start to look into that as an option since those do NOT require maintaining two files. There is more limited browser support, but I think it is only IE8 and earlier that wouldn’t be supported. I would be surprised if anyone visiting my site was using anything earlier than IE9 on a Windows PC, but I suppose only time (and stats) will tell. It looks like Michaël Chaize wrote a great article on exporting SVGs from Illustrator CC, so I will spend some time going through that and testing.
As always, my web design and my app design is “as time permits”. With a full-time job and 5 kids, time doesn’t permit often. 😉