Package GAP HTML5 Files for Delivery

Package GAP HTML5 Banners
for Delivery

Package GAP HTML5 Banners for Delivery

BEFORE WE BEGIN

Let’s discuss what packaged files are and why they are important.

Although we have made localising your HTML5 banners a relatively simple process, HTML5 banners are quite technical and include a lot of moving parts. For this reason, your media agency will need your HTML5 files structured in a very specific way in order to be able to upload them to the correct servers.

IMPORTANT NOTICES

This is the final stage of the localisation process. You should only be packaging files after all language & product adjustments have been made AND APPROVED BY THE APPROPRIATE BRAND GUARDIANS AND MARKETING MANAGERS AT YOUR FIRM.

Although GAP files were pre-approved at the highest level by your central brand before you received them, there is no guarantee that the adjustments you made during the localization process will meet your brands standards. Before supplying any files to a media agency for public distribution, it is always important that you have any changes approved by the appropriate channels at your brand.

BEFORE WE BEGIN

Let’s discuss what packaged files are and why they are important.

Although we have made localising your HTML5 banners a relatively simple process, HTML5 banners are quite technical and include a lot of moving parts. For this reason, your media agency will need your HTML5 files structured in a very specific way in order to be able to upload them to the correct servers.

IMPORTANT NOTICES

This is the final stage of the localisation process. You should only be packaging files after all language & product adjustments have been made AND APPROVED BY THE APPROPRIATE BRAND GUARDIANS AND MARKETING MANAGERS AT YOUR FIRM.

Although GAP files were pre-approved at the highest level by your central brand before you received them, there is no guarantee that the adjustments you made during the localisation process will meet your brands standards. Before supplying any files to a media agency for public distribution, it is always important that you have any changes approved by the appropriate channels at your brand.

What You Will Need:

  • Packaged GAP Files
  • Access to photoshop -if you don’t have access to photoshop, please contact your TBM rep, and they can provide access to Figma files.
  • Wherever possible, we recommend that design updates, including copy/text changes, be done by a graphic designer

STEP 1: Gather you HTML 5 Files and have compression site open in your browser

  • First you want to gather all your approved HTML5 banners and backup images in a folder and name that folder appropriately.
    • We recommend naming the folder with the campaign name and the date for easy reference
    • This folder should NOT contain anything other than the HTML5 banners and backup. Images for those banners
  • As always, we recommend that you duplicate the folder you have been working in so far and delete the extra assets from that duplicated folder.
    • This way, if you accidentally make a mistake during packaging, you can easily return to your “working files” version and start again.
  • Make sure you have a compression site or app open in your browser, we recommend kraken.io or tinypng.com
kraken file delivery

STEP 1: Gather you HTML 5 Files and have compression site open in your browser

  • First you want to gather all your approved HTL5 banners and backup images in a folder and name that folder appropriately.
    • We recommend naming the folder with the campaign name and the date for easy reference
    • This folder should NOT contain anything other than the HTML5 banners and backup. Images for those banners
  • As always, we recommend that you duplicate the folder you have been working in so far and delete the extra assets from that duplicated folder.
    • This way, if you accidentally make a mistake during packaging, you can easily return to your “working files” version and start again.
  • Make sure you have a compression site or app open in your browser, we recommend kraken.io or tinypng.com
kraken file delivery

STEP 2: Upload the images to compression site & download zipped files

  • One banner size at a time, upload the banner assets to the compression website and download the compressed version of those assets
  • Replace the current banner assets with the newly compressed images you downloaded from your compression site
  • Repeat steps 3-4 for all banner sizes
    • If your backup images are bigger than 40KB, you will also want to run the compression app software against your backup images and replace them as well
downloading kraked files

STEP 2: Upload the images to compression site & download zipped files

  • One banner size at a time, upload the banner assets to the compression website and download the compressed version of those assets
  • Replace the current banner assets with the newly compressed images you downloaded from your compression site
  • Repeat steps 3-4 for all banner sizes
    • If your backup images are bigger than 40KB, you will also want to run the compression app software against your backup images and replace them as well
downloading kraked files

TBM is not responsible for the licensing of fonts – if you are unsure whether you have the appropriate online licensing to use a font, you should check with the brand.

STEP 3, 4: Replace Assets

Replace the current banner images with the newly compressed assets you downloaded from your compression site

replacing a file on mac

STEP 3, 4: Replace Assets

Replace the current banner images with the newly compressed assets you downloaded from your compression site

replacing a file on mac

Part 2 Zip Assets

Part 2 – Zip Assets

STEP 1 : Zip Banner Folders

  • Once you have compressed all your images, we need to zip each individual banner
  • You can do this by right clicking on the banner and selecting “compress”
  • You can leave the compressed and uncompressed banners in the folder – no need to delete the uncompressed files.
compressing a file on mac

STEP 1: Zip Banner Folders

  • Once you have compressed all your images, we need to zip each individual banner
  • You can do this by right clicking on the banner and selecting “compress”
  • You can leave the compressed and uncompressed banners in the folder – no need to delete the uncompressed files.
compressing a file on mac

STEP 2: Check the file size on each zipped banner folder

  • Select the zip banner folder for each banner size and ensure that the file size listed is below your maximum file size limit.
    • Most Ad Agencies require HTML5 banners to be supplied at 150KB-300KB.
    • Your media agency should be able to confirm what the maximum file size is for your media buy
  • Do not worry if your file size is lower than your maximum limits.
    • Banners with lower file size load quicker and tend to perform better than banners with higher file size, so it is slightly beneficial if you managed to produced high quality banners at a lower file size.
  • If you have compressed all your assets and your banners are still not below your maximum file size limit, you can review the Troubleshooting questions on the FAQ page on our website, or feel free to get in touch with your partnership program representative.
where to see the ZIP archive

STEP 2: Check the file size on each zipped banner folder

  • Select the zip banner folder for each banner size and ensure that the file size listed is below your maximum file size limit.
    • Most Ad Agencies require HTML5 banners to be supplied at 150KB-300KB.
    • Your media agency should be able to confirm what the maximum file size is for your media buy
  • Do not worry if your file size is lower than your maximum limits.
    • Banners with lower file size load quicker and tend to perform better than banners with higher file size, so it is slightly beneficial if you managed to produced high quality banners at a lower file size.
  • If you have compressed all your assets and your banners are still not below your maximum file size limit, you can review the Troubleshooting questions on the FAQ page, or feel free to get in touch with your partnership program representative.
where to see the ZIP archive

IMPORTANT TO NOTE: Most Ad Agencies require HTML5 banners to be supplied at 150KB-300KB. Your media agency should be able to confirm what the maximum file size is for your media buy. Media Agencies will reject banners that exceed file size limits.

STEP 3, 4: Check the pixel size & File size of your backup images

  • Select each banner and confirm that the size of you backup image matches the size of your banner. Example, 300×250 banner might contain some assets at retina size (600×500), but the backup image for that placement must be 300×250 pixels
    • Although GAP Program design files are provided at retina sizes (x2 required size), backup images must exactly match the pixel size of your media buy.
  • Check the file size on each backup image
    • Most Ad Agencies require backup images to be at 40KB
    • Select the zip banner folder for each banner size and ensure that the file size listed is below your maximum file size limit.
    • Do not worry if your file size is lower than 40KB. Images with lower file size load quicker and tend to perform better, so it is slightly beneficial if you managed to produced high quality backup images at a lower file size.
      • If you have compressed all your backup assets and your banners are still not below your maximum file size limit, you can review the Troubleshooting questions on our FAQ page, or feel free to get in touch with your partnership program representative.
where to see image dimensions on mac

STEP 3, 4: Check file size and pixel size on Backup Images

  • Select each banner and confirm that the size of you backup image matches the size of your banner. Example, 300×250 banner might contain some assets at retina size (600×500), but the backup image for that placement must be 300×250 pixels
    • Although GAP Program design files are provided at retina sizes (x2 required size), backup images must exactly match the pixel size of your media buy.
  • Check the file size on each backup image
    • Most Ad Agencies require backup images to be at 40KB
    • Select the zip banner folder for each banner size and ensure that the file size listed is below your maximum file size limit.
    • Do not worry if your file size is lower than 40KB. Images with lower file size load quicker and tend to perform better, so it is slightly beneficial if you managed to produced high quality backup images at a lower file size.
      • If you have compressed all your backup assets and your banners are still not below your maximum file size limit, you can review the Troubleshooting questions on the FAQ page, or feel free to get in touch with your partnership program representative.
where to see image dimensions on mac

STEP 5: Compress Main Folder for Delivery

  • Once you have confirmed that your banners & backup images are below the file size requirements for your media buy, you will need to zip the main folder that contains all the files
  • The file size of this folder is not important; however, you might find that your email server will not allow you to send an attachment of this size.
    • We recommend using a file transfer service such as wetransfer when you supply your files to the media agency.
compressing a file on mac

STEP 5: Compress Main Folder for Delivery

  • Once you have confirmed that your banners & backup images are below the file size requirements for your media buy, you will need to zip the main folder that contains all the files
  • The file size of this folder is not important; however, you might find that your email server will not allow you to send an attachment of this size.
    • We recommend using a file transfer service such as wetransfer when you supply your files to the media agency
compressing a file on mac

STEP 6: Send to Media Agency for Trafficking

Delivering final files to a media agency can be a daunting process and it is not uncommon for media agencies to reject files for reasons that could not be predicted ahead of time.

As a member of the TBM GAP Program, you have the benefit of free, 24hr technical support on all campaigns. If your media agency experiences any trouble with your packaged files, you can review our FAQ Page, or please feel free to get in touch with your TBM Partnership Rep and we are always available to help.

STEP 6: Send to Media Agency for Trafficking

Delivering final files to a media agency can be a daunting process and it is not uncommon for media agencies to reject files for reasons that could not be predicted ahead of time.

As a member of the TBM GAP Program, you have the benefit of free, 24hr technical support on all campaigns. If your media agency experiences any trouble with your packaged files, you can review the our FAQ Page, or please feel free to get in touch with your TBM Partnership Rep and we are always available to help.

IMPORTANT TO NOTE:

Although GAP files were pre-approved at the highest level by your central brand before you received them, there is no guarantee that the adjustments you made during the localisation process will meet your brands standards. Before supplying any files to a media agency for public distribution, it is always important that you have any changes approved by the appropriate channels at your brand.

Why Choose The Bannermen

we’re open 24 hours
no consultation fees
our experience delivers
we offer fixed prices
we focus on banners
we train your team

See some of our work

Johnnie Walker

Johnnie Walker our work Standard Media Adverts Exceptional and Unparalleled Johnnie Walker is one of those brands to whom we could pen a love letter. Their briefs range from elegant builds with subtle animation to chipper and quick frame transitions with bright colours, to builds that feature rich colours paired with smooth and captivating animation. [...]

Diet Coke

Diet Coke our work Standard Media Adverts Oh yes, we can What’s better than an animated banner ad? Probably nothing—except maybe a glittery animated banner ad! And that’s exactly the creative brief that Diet Coke came to us with. We were only too happy to help glitter-fy the screens of Diet Coke’s audience with these [...]

Heineken Social

Heineken Social UEFA Champions League our work Social Facebook Instagram Global campaign in 6 hours or less Heineken came to us in 2018 with some lofty social media goals as they wanted to make their brand synonymous with UEFA Champions League games. To do so, they proposed creating Instagram posts, Instagram Stories, YouTube videos, and [...]

Nike

Nike our work Rich Media Adverts Find your Unlimited Potential Nike approached us with a killer banner ad campaign concept—desktop-only video ads that featured various Nike athletes, almost no text aside from a tagline, and multiple product shots in action. Which is exactly what we created! Just try and tell us these aren’t the slickest [...]

Heineken Rich

Heineken our work Rich Media Adverts Raise a Heineken to Video & HTML5 Integration Heineken is one of our favourite brands to work with, both because they have such great creatives and because they have such high standards. For this rich media campaign, we were commissioned to seamlessly integrate HTML5 with video. A quick word [...]

Gatorade

Gatorade our work Standard Media Adverts Client Direct Gatorade is one of our most important direct-to-client relationships. While more and more companies are looking to in-house some or all of the production process, our professionalism and expertise really starts to shine. Deploying (on average) two or three campaigns a year, it was not financially viable [...]

EON

E.ON our work Rich Media Adverts Dynamic Media Programmatic Display Guardians of the Brand Galaxy E.ON is an international, privately owned energy supplier based in Essen, Germany, and has around 43,000 employees. As with any global powerhouse, E.ON delivers only the highest quality in everything they do, and digital display media is no exception. The [...]

McDonald’s Wraps

McDonald's Wraps our work Standard Media Adverts Campaign Consistency We know it feels like it's been a long time since McDonald's launched it's wraps, but when they did, we were right there with them! To get this campaign out the door, we produced a series of video and HTML5 units. This campaign was actually launched [...]

McDonald’s GTA

McDonald's GTA our work Rich Media Adverts Dynamic Media Parallax Plunge When McDonald's comes knocking at your door, you answer. So when we were brought in to help introduce the flavours of America to a British audience, we were thrilled! The beauty of these banners is found in their simplicity. As anyone who works with [...]

Destination BC

Destination BC our work Standard Media Ads Rich Media Ads Programmatic Ads Go Wilder Explore BC is an initiative to get BC residents to experience different aspects of their province during the fall, winter and spring months. It also includes a global ski campaign which help to advertise BC ski resorts, which account for almost [...]

Lotto Max

Lotto Max Millions our work Rich Media Adverts Dynamic Display Programmatic Display Retargeting Undercover This campaign for Lotto Max Millions was perhaps one of the most challenging projects we have undertaken. Take a minute to consider that every single banner you see on this page is in fact the exact same banner with minor adjustments [...]

Amazon Prime

Amazon Prime our work Standard Media Adverts Fall in Love with Amazon Prime This great set of banners was designed to accompany a campaign that saw shoppers falling in love not only with an Amazon product, but with the version of themselves who made the purchase. In the television spot associated with these banners, shoppers [...]

Evo

Evo our work Rich Media Adverts It's a BC Thing Evo is a carsharing service in the Greater Vancouver area, created by the British Columbia Automobile Association. When Evo approached us to re-create their visually stunning TV spot in HTML5 it was not a simple task because at the time, the digital sphere was undergoing [...]

Google Assistant

Google Assistant our work Standard Media Adverts The Tightest of Deadlines Working with an international powerhouse brand like Google is always exciting and this campaign for Google Assistant was nothing if not that. The biggest challenge facing our team on this project was the tight deadlines. The client had less than a week to produce [...]

Bulb

Bulb our work Standard Media Adverts Greener. Brighter. Better. Working with Bulb was simply electric! Pun intended! But seriously, getting this campaign in and out the door was a lot of fun. Firstly, Bulb has such an undeniably cool style and we were very excited to bring the hand drawing to life. As with most [...]

Get in touch

We’re ready to take your animations to the highest heights! From amped up illustrations to subtle, elegant pans and fades, we’re here to help make your animation dreams a reality.

Contact us