Pixels vs. Bandwidth: Tumult Hype documents and Retina displays (The New iPad & Retina Macbook Pro)

By on March 17, 2012 in Tutorial

The iPads arriving today across the world bring out amazing details in websites. Graphics and text are stunning on the 2048 x 1536 resolution screen, and this is great for the web and for Tumult Hype users. If you want to optimize your Tumult Hype animation for the new high resolution display we have a few words of advice:

Consider the tradeoff: bandwidth vs. high resolution images

In our tests, standard 72 DPI JPEG images have noticeable artifacts if you look closely, but they don’t look bad. A double resolution image looks amazing.  As you may know, the iPad 3rd gen sports 264 PPI (Pixels Per Inch) display, up from 132 PPI in the iPad 1 & 2. This screenshot shows the difference between a standard and retina-ready image at full size. Read this excellent article from Bjango for more details on what exactly PPI is.

Most Tumult Hype documents created using standard image creation practices will look fine on the new iPad. If you want to provide the best visual experience, your visitor will need to download higher DPI (and higher file size) graphics. Tumult Hype documents preload images so this will increase the time before your visitors can view your site.

A retina-ready graphic contains four times as many pixels, and equates to ≈ 30% more time downloading. With multiple retina images, this means more bandwidth per page.

Retina optimized images take approximately 30% longer to load

That being said, a couple extra seconds may not make a huge difference, but a document with many images will negatively impact your visitors’ experience. Re-export images like your logo and small UI elements used across your site.

Note: If you’re creating a Hype animation for use within an iOS app or as an iBooks Author Widget and the resources are stored on the device, you should use only retina-ready graphics.

Use SVG graphics or Glyphs

A vector will scale up infinitely, no matter the resolution of your target device. These graphics are also very small in file size, so they’re perfect for any display. You can drag a SVG graphic directly into Hype.

Text renders beautifully on the new iPad. A character that would normally have about 100 pixels devoted to it will now be shown far crisper. Take advantage of this: “→”. Instead of creating an arrow graphic, why not use the arrow character? Using HTML character entities from will shave bytes off your document, and ensure that your content scales up correctly. Here are a couple resources.

Icon-based fonts are a great way to create pixel-free graphics. Check out Font Awesome. For information on using fonts with Tumult Hype, please see this article.

Create a high resolution alternate version of your document

If you choose to create a high resolution version of your document, don’t force non-retina viewers to download all those extra pixels. Add this script to the head of your exported document to send retina devices to a page built for them:

<script type="text/javascript">   if( window.devicePixelRatio >= 2 ){   window.location.replace("http://site.com/retina.html");} </script>

Add this script to the <head>…</head> of your exported .html file. Here is the full document code.

In that high-resolution version, you’ll be adding images at double size. So if you have a 400 x 400 pixel area for an image, you’ll need to add a 800×800 pixel version of that image into Hype, then manually resize it down to half that size. It would be wise to host these images on your site first, and then add their image source to the inner HTML of a box. That way, your Hype document will not download images before showing your project — images will load when the scene they are on is visited.  To add an image source to a box:

  1. Create a box and select it (you may want to remove the blue background and border on that box which is created by default)
  2. Click Edit > Edit Inner HTML
  3. Add the image src code, which looks like this: <img src=”http://site.com/image.jpg” width=”400″ height=”400″ alt=”My Image”>
  4. Done!

Automate the creation of your image assets

If you have made high resolution images for your retina-targeted Hype document, you can drop your images into the free Mac app called Unretiner to quickly generate images for the non-retina version. Here’s the workflow for that:

  1. Create your retina-sized image assets with this naming format: image@2x.jpg. (Prepend @2x to the extension).
  2. Add them to your retina-Hype document and export your document to a folder.
  3. Drop your resources folder into Unretiner, and export the reduced version to a folder.
  4. Duplicate your Tumult Hype document and replace your retina-sizes graphics with your newly generated files. Select an image, go to the element inspector, and select the replacement file Unretiner created. (Note: Unretiner changes the file name of your image@2x.jpg image to the name image.jpg and reduces the size by 50%.)

For more tips on creating a Tumult Hype document for mobile devices, read our guide.

For more information on the new iPad’s display properties, read this article by Display Mate.

If you’re curious about how the new iPad Mini fits into this, see this post at QuirksBlog.

Zebra image via Jon Barbero.

,