Retina display goodness… ruined by low res images on the web

Retina Display

Retina Display

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.


image credit to Smashing Magazine

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 “picture@2x.png” 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. 😉

I Couldn’t Agree More!

Not too long ago, Kelly Olivier created a blog post for the Nutanix web site about his experience first as a customer, Nutanix’s FIRST customer in fact, and then as an employee of the company. Kelly and I started around the same time and we were at new hire training together, so that’s when I got to know him. While I was never a direct Nutanix customer before coming to work for them, I still share many of his experiences and opinions.

It was January 2011 in Palo Alto, CA, and I was helping host a training-type event for VMware SEs. I was still fairly new as a VMware employee respectively, so “helping” may be a bit of a stretch. At any rate, Nutanix was one of the, very, select vendors that we brought in to present to everyone. Since my group was completely focused on VMware View (now VMware Horizon View), otherwise known as VDI (Virtual Desktop Infrastructure), and because Nutanix was causing some disruption in the traditional 3-tier infrastructure market particularly around solving VDI workloads, it made sense that they made the short list.

I had not been introduced to them before this, so the presentation by Dheeraj Pandey and Mohit Aron was my first glimpse at their solution. I have to admit, when they talked about the type of resiliency they had even though they were using local storage, I called bullshit (to one of my co-workers anyway). My co-worker actually had a Nutanix “block” in his home lab and confirmed that their claims were true. I had (and still have) loads of respect for this co-worker and so my interest was piqued and I started to not only pay more attention during that specific presentation, but also past that day.

Fast forward to January 2013 when things at VMware got a little sketchy from an employment perspective. My great friend and previous co-worker (not the same person already mentioned) had already left VMware and started working for Nutanix. When I told him I was starting to look around, he let me know that there was an opening for the Philadelphia area (where I live), and this also meant I wouldn’t have to travel all around the globe like my job required at VMware. So, long story short, I interviewed and was offered a job at Nutanix in March of 2013 and I couldn’t possibly be happier ever since that day.

The Nutanix Virtual Computing Platform stands up to not only its claims, but also the competition. And things are starting to really heat up in the competition space as Nutanix is no longer that small startup ankle-biter that the big companies used to think we were. They are starting to feel the pain in their pocketbook as they lose business to us and can’t wrangle it back from us. You see, almost 100% of the time a Nutanix first time customer will buy more and more Nutanix as they realize the “sales pitch” is not just smoke and mirrors and they really can trust it to run their Tier 1 applications, etc.

It is wonderful to be back in sales again, but better yet is not ever having to lie about capabilities and how I feel about the product. Nutanix is not a silver-bullet that is the perfect solution for every need, and thankfully the executives of the company KNOW that! They don’t ever expect their employees to lie or make false statements to try and win business. I have always taken this approach in sales roles I have held in my working career, but my “conscience” was not always well received by all employers, and in some cases I had to find an exit because I was being asked to do things I didn’t agree with (none of my more recent companies, thank goodness).

Nutanix is having explosive growth not only in sales/revenue, but also in company size! I believe I was employee #163 or somewhere around that when I was hired, and we just went over 500 current employees! So Nutanix has more than doubled in size in just 1 year.

I can’t wait to see what the future holds!!