Designing for High-Resolution Displays

In the past few years, there’s been a major push forward in the quality of displays on mobile phones, tablets, and some desktop computers. To achieve this quality, the manufacturers build displays that pack more pixels in the same space as the older displays. For instance, when Apple went from the original iPad to the iPad 2, the screens were still physically the same size – but the number of pixels, or “dots,” that are used to create what you see on the screen were made smaller. This enabled Apple to put more of those dots in the same space, making what’s displayed look crisper. Apple calls these high-resolution displays, “Retina Displays.” Another term in the industry is HiDPI.

The Problem
However, there is a bit of a problem with the HiDPI displays. If the content on a web page were displayed at 100% on these new displays, they would be difficult to read and use, because they would be half the displayed size as the same content on the older displays. To counter this, the phones and other devices scale up the content to match the dimensions of the older devices. Things like type created in HTML, and vector graphics, handle this with no issues; because they are built with lines and fills, rather than pixels. However, when that 300x250 ad mentioned earlier is scaled up, it has to “guess” what the larger image should look like. This invariably creates images that look blurry or fuzzy.

The Solution
How do we get around this problem? The solution is building your ad unit at least 1.5x larger than you would normally. So, our medium rectangle (300x250) ad would become a 450x375 pixels ad. To really take advantage of these crisp displays, you want to build your medium rectangle ad at 200%, or 600x500 pixels. We then take you ad and use the web page to scale this down, which avoids the fuzzy look (see examples).

scaling-bad
100% scaled up on a hi-res display. Notice the blurry text and images.
scaling-good
150% scaled up on a hi-res display. While it looks better than the 100% ad, it’s still not as crisp as it could be on a HiDPI display. If you are viewing this on a standard display, it may be difficult to tell any difference between 150% and 200%.
scaling-best
200% on a HiDPI display. If you are viewing this on a device with a Retina/HiDPI display, the differences between 100% and 200% are glaringly obvious, but even viewing on a standard display gives an idea of the problem.

One Thing to Remember…
There is a downside to using the larger graphics: file weight. Naturally, the bigger you make the ad, the bigger its weight (in kilobytes) is going to be. In some cases, we allow you to save these types of ads at a higher weight, but the increase is modest.

When to Push Ahead and Go HiDPI
Our hi-res smart phones have created a bit of a Catch-22. We need hi-res graphics that will look good on these displays, but because the graphics are likely being pulled over a capped mobile connection, we have to keep the file size down. Your best bet is to make a decision on a case-by-case basis:

  • If you really need the image to look sharp, go big, but simplify your design. Cut down the amount of text, refrain from over-sharpening photos, and avoid using large gradient areas or even subtle background patterns – all culprits of hard-to-compress ads.
  • If you’re not sure if your ad needs to be built larger, try building it at 100%, then open your compressed jpg or gif file and resize it to 200%. Some ads don’t lose much clarity when scaled up; while others simply don’t hold up.
  • If your ad design uses text that must stay crisp, consider building it with HTML 5. Type rendered with HTML 5 scales up with no degradation, although your font choices will be more limited.

If you choose to move forward with HiDPI ads, we accept ads at three sizes: 100%, 150%, and 200%. These dimensions are listed on the spec page of each ad unit in the kit.

Flash is exempt
You will find that none of the high-resolution specifications include details for Flash ads. The reason for this is that our ad server only supports Flash Player 10.1 and lower. High-resolution abilities are only enabled for Flash Player 11.2 and higher. Once our ad server changes to accept the newer format, we will update this page, and our ad specs, to reflect this.

While it may seem that this is a lot of work, the payoff is worth it when you see your ad in hi-res glory on one of the new displays. If you have questions or need a template, don’t hesitate to contact us.