By: Richard Read – Bayshore Solutions Web Development Team

Moore’s law states that the number of transistors that can be fit onto a chip will double every 18 months resulting in periodic increases in computing power.  While computers are getting incrementally faster all of the time, computer display technology has not kept pace.  There are a new crop of ultra high resolution screens coming to market that promise displays in which individual pixels are indistinguishable to the naked eye.  The standard for computer monitor pixel density has been 72 PPI (pixels per inch) since the 90’s.  Apple has started rolling out iPads and MacBook Pros with their Retina display technology at 220 PPI and higher, offering photo realistic imagery.  High resolution Android and Windows devices are right around the corner.

Web sites have historically been optimized to run lean and mean over low bandwidth connections.  70% of an average web page’s downloadable content is image-based.  Designers have come up with techniques to optimize image file size, one of which is lowering the resolution to 72 DPI (dots per inch).  This is the limit that most computer monitors can render.  Anything higher is just wasted bandwidth.  Printed marketing collateral is created at 600 DPI, or higher, which frequently divides design maintenance between print and web.

Updating web sites to use high definition graphics is a proposition worth examining.  High resolution images that require 4 times the internet bandwidth as standard web optimized images could mean higher server bills.  The additional payload will increase initial page load times, especially over mobile internet connections.  Fortunately, modern browsers have advanced caching strategies so that the end-user only pays the penalty for downloading the larger images the first time you browse to any given HD-optimized page.
Websites that are heavily text based will look great in HD optimized browsers like Apple’s Safari, and soon Google Chrome, without any additional work.

hdweb_blog

 

 

Web development teams are creating various techniques for a website to adapt to the ability to support both standard definition displays and HD displays to provide the optimal user experience.  One interesting technique downloads standard resolution images first, and then uses Javascript to detect whether the display is capable of rendering high DPI images.  If so, it requests the high-res images to be downloaded as well, and applies a cross fade transition to “fade in” the cleaner, crisper image.  The effect is practically unnoticeable to the untrained eye.  It gives the illusion of fast page load time at the expense of the added bandwidth cost of downloading two copies of the image.  We are still in the early days of this new display technology and there are no clear standards for implementing cross-platform, cross-browser high resolution graphics.

Faster internet speeds and 4G mobile connections are providing the conduit for making HD websites a reality.  Keep in mind that there’s a good chance that executives making buying decision in the B2B world probably already have some of these high end, high resolution devices.  If you want your web site to look its best, I’d encourage you to inquire about upgrading to HD.

Recomended Posts