Optimising content for Retina displays using HTML5 canvas

The stunning new Retina display from Apple takes detail and clarity across screens to the next level.  Apple’s latest iPad, iPhone and MacBook Pro comes with a Retina display, with content displayed at a whopping 220 pixels per inch!

Crisp, crystal-clear screens is great news for iPad owners, and for web developers it creates a variety of new opportunities (and issues) if they are to deliver a better user-experience on high density screens.  A quick fix would be to include high resolution images and scale these down in HTML.  It is not ideal as it results in a host of problems such as processor-intensive downscaling and increasing bandwidth costs.  Additionally, downscaled images would simply take longer to load, which defeats the idea of displaying them on mobile devices, especially on those that do not even have Retina displays.

Alternative methods include serving images using server side rewrite rules, query strings or data meta-attributes although HTML5 features the canvas element which was originally introduced by Apple in 2004.  HTML5 canvas would not solve the problem for digital photography, but it is a great alternative for vector graphics.

Vector graphics could be easily exported as HTML5 canvas and, once the JavaScript code is generated, with a little tweaking it could be used anywhere on the page.  To achieve crisp and sharp outlines we would need to match the device pixel ratio with canvas scale using window.devicePixelRatio.

Retina display - PNG comparison to HTML5 Canvas

Our sample PNG file (above) was 14.28KB and the HTML5 canvas JavaScript code was 13.13KB minified and 3.49KB compressed, a potential 75% saving in file size whilst delivering the best user-experience on high density screens.  To quote Apple, that’s ‘clearly remarkable’!

Back to top

Contact us, we'd love to hear from you.

  • Business enquiry
  • General enquiry
  • Press
  • Careers
  • Support
Google Maps

Email this page to a friend.

× Engine Creative Squideo Player

Engine Creative Showreels

TV Commercials




Digital Projects