by 
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.
If you are looking for more details, check out this wikipedia page on PPI and this one on Retina Display, and there are countless others.
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.
There is another method that intrigues me, but it still would require maintaining two sets of image files for each asset (or maybe only maintaining two files for those images that are significantly larger in the @2x size). That would be to use retina.js. Retina.js is a javascript that will essentially parse through your html code and if it sees any images it will look for a file with the same name and “@2x” at the end of the name. This is the method that Apple mandates for their application development and it seems that the industry is following suit with this naming convention. For example, if you had an image named “picture.png”, then it would look for “[email protected]” in the same directory and use that. Aside from you having to manage two image files per asset, this method also means that the browser will have additional HTTP requests to pull the higher-res images. If you are on a mobile device using a cellular data plan, this can add kilobytes of additional data usage per page… which adds up. The nice thing about this method is that the script is at the bottom of the page, and if the lower-res images are a lot smaller in size, images will show up faster, and then get better in quality. I am uncertain whether or not this script has the intelligence to figure out if the @2x images are actually needed and only use them if the screen is >200ppi. It would be even cooler if it could determine the type of network connection and not pull the larger files if it is over cellular, but that may be asking too much.
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. 😉
