Double Density Guidelines

You can serve double density versions of creative to devices that have high-resolution displays, such as mobile phones and 4K monitors. Standard-resolution creative may look pixelated and blurry when displayed on a high-resolution screen, so it is highly encouraged to provide double density creative whenever possible.

  • Double density creative may run on both high-resolution and standard-resolution devices.
  • Higher file size specs are given for double density creative.

Density refers to how many pixels appear within a given area; size, or creative dimensions, is the physical space available for display on the screen. A double density screen will have twice as many pixels within a given area.

Standard density is a 320x50 image displayed dimensionally as 320x50 on the screen.

Double density is a 640x100 image displayed dimensionally as 320x50 on the page.

What this means in the real world

On a standard-resolution (1x density) screen:

Both standard and double density creative look clear:

Standard: Double Density:


On a high-resolution (2x density) screen:

Standard creatives looks blurry, while double density creative look very clear:

Standard: Double Density:
  • Most modern phones and tablets use high-resolution screens.
  • As more users view content on mobile devices, double density creative is necessary to give users an optimal ad experience.

What about HTML5?

HTML5 creative can be built for double density too. In an HTML5 creative built for double density, all images are twice as large dimensionally, but are sized down to their proper display dimensions in the HTML markup or CSS.

In the following example code snippet from a 300x250 creative, every image is dimensionally twice as large as its physical size on the screen:

<img class="ad-background" src="http://ad-server.com/image/background-600x500.jpg" width="300" height="250" />
<img class="ad-button" src="http://ad-server.com/image/button-100x100.png" width="50" height="50" />
<img class="ad-car-image" src="http://ad-server.com/image/car-200x150.gif" width="100" height="75" />

Whether you define dimensions in the HTML or CSS, they should always equate to the actual display dimensions on the screen. Only the images themselves should be twice as large dimensionally. It's a good rule of thumb to check your creative in the browser to be sure all images are being displayed to the correct size.