Submit a request
 
PRODUCT
Privacy Policy |  AAS Advertising Policy | Terms of Use
Cookie Preference
✖

Amazon Ad Server will be sunset in Q4 2024, please visit this page (AAS offboarding information) for offboarding support resources and sunset FAQs. Details shared on that page represent the most up to date information in the Help Center, if you find disparate information in other resources please default to the information in the AAS offboarding information page accordingly.

Please note that on October 1, 2024, the ability to create new campaigns, placements and tag managers was disabled.

Follow
Last Update:
  viewable by end users
  editable by agents

Overview

Retina displays have a higher pixel density compared to regular displays (twice the width and height). To achieve a Retina-type visual quality, you can assign an image asset that is twice the size (2x image) to a regular (1x) placement (for example, 600x1200px image to a 300x600px placement).

However, you can create a standalone HTML workspace if a custom script needs to be appended to an ad, and it can only be done on HTML ads.

The Amazon Ad Server (AAS)-friendly retina template contains the necessary click-tracking code (including the click-through API); you add the image assets to be made into a workspace.

Template: 300x250_retina_template.zip

Procedure

  1. In the template, delete the two existing example images under the Images folder.

  2. For your assets, use image editing software to shrink the source, 2x asset to half the size.

    The result is two assets, a 600x500 “main 2x”, and a 300x250, which is used as the default image.

    Note

    Note: To build our ad as a standard banner, both image assets must be under 300 KB total.

    RetinaDisplay1.png

  3. Copy these two images into the Images folder of the template.

  4. Edit the index.html file and make sure our <img> definition specifies the 2x image:

    Note

    Note: The file extension is important. Verify that the <img> definition and the main image have the exact same file name and extension.

    RetinaDisplay2.png

  5. Save the index.html file.

  6. Zip and upload the template to AAS as any other workspace.

  7. While creating an ad, assign the workspace as usual, but for the default image, select the 300x250 asset in the images folder:

    RetinaDisplay3.png
    RetinaDisplay4.png

  8. Save the ad.

The HTML ad includes a 600x500 image used as a main asset (set to 300x250 through our CSS code), and a 300x250 asset assigned as a default image (setting our ad's dimensions to 300x250). You can preview and inspect your ad to verify that the dimensions are correct, and that the 2x image (600x500) is being served into a 300x250 div, making this a retina ad:

RetinaDisplay5.png

Editing a template to achieve a different dimension

Although the most commonly used Retina ad has dimensions of 300x250, you can modify the template as required to create virtually any dimension.

Procedure

  1. In the styles folder, open the style.css file.

  2. Edit the width and height settings for the following elements:

    • #ad

    • #banner

    • #banner img

RetinaDisplay6.png

Set these values to match the intended placements' dimensions. The default image must match these values; the main image (retina) assets can be 2x (or 3x) larger.

Note

Note: Since an additional default asset adds to the total K-weight, it may be difficult to keep larger assets under 300 KB and retain their visual quality. If your assets are large, we recommend you build a rich media banner ad. For more information, See About rich media banner.

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments