Pixels vs. Bandwidth: Tumult Hype documents and Retina displays (iPhones, iPads, and the Retina Macbook Pro)

Note: This article was written when the new iPads with retina screens emerged onto the scene. It has been updated to reflect Tumult Hype 2.5’s new retina image support. Here are a few tips for producing high resolution Tumult Hype documents:

Use High Resolution Images

Tumult Hype 2.5 supports retina images, which means that you can drop a 1000px x 1000px image into your scene, and trust that it will look great as long as you don’t use it at a resolution higher than 500px x 500px in your document.

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. To provide the best visual experience, your visitor will need to download higher DPI (and higher file size) graphics.

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 to ensure that they look great on all devices.

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

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.

Automate the creation of your image assets

If you have made high resolution images for your retina-targeted Hype document, you can easily drop them into your Tumult Hype document:

  1. Create your retina-sized image assets with this naming format: image.jpg & [email protected] (Prepend @2x to the extension of the double resolution image).
  2. Add them to your retina-Hype document.
  3. Tumult Hype creates an image group. When one of those images is used, the correct version will be loaded by retina and non-retina devices.
  4. That’s it.

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.

,

Made for you in San Francisco.