Create Backup Images
for GAP HTML5 Banners
Prepare PSD Files
Prepare PSD Files
BEFORE WE BEGIN
Let’s remind ourselves what backup images are and why they are necessary to provide with any HTML5 banners.
Backup images are a static picture (JPG) of the final frame of the HTML5 banner animation and they do exactly what they say on the tin – they are a backup up, or a “Plan B” for instances where the website would not be able to serve your animated HTML5 banners. For example, if a user is using a version of internet explorer that is several years out of date, that browser might not have the appropriate updates installed to display your ad properly. In those cases, the ad server will recognize that the end user does not meet the necessary criteria for viewing an animated HTML5 banner and will serve a back up image instead.
Although there are no metrics that indicate how often backup images are served instead of animated HTML5 banners, if your HTML5 Banners are coded properly and at a reasonably small file size, as GAP HTML5 banners are, ad servers will most likely serve the animated version of your banner in most instances. Even if the backup images are not served very often, media agencies will not accept HTML5 banners without them, so ensuring your backup images match the language, products etc of your animated banners is an important step in delivering your banners to your media agency.
IMPORTANT NOTICES
If you are a graphic designer, I would recommend skipping to the second section after the introduction, but if you are new or unfamiliar with photoshop I recommend your follow along all the way through.
I’m assuming that you’ve already watched the intro to the gap programme and the short explanation what’s included in your gap files video, if you haven’t had a chance to watch them yet there are links below to those videos or you can find them on the gap program website.
It is important that you have made all the necessary updates/changes to your HTML5 banners before creating your backup images. If you update the backup images but continue to make changes to the text or images in the HTML5 banners, there is a chance you will need to update the backup images again, so please be sure that your HTML5 banners are 100% signed off prior to updating your backup images
Most ad servers require backup images to be 40KB or less, which means you might find some pixelation when exporting your backup images. Luckily, as we discussed in the introduction, when your HTML5 banners are coded properly, it is unlikely that your backup image will be served very often; however, we will show you some inside tricks we use to compress the file size of our. Backup image without losing too much quality
BEFORE WE BEGIN
In this tutorial, I am going to teach you how to update the text/copy in the HTML5 banners provided in your GAP Packaged Files. In the first section I will explain how to use photoshop to update the text in the designs and in the second section I will explain how to export the new copy from photoshop to update the HTML5 banner builds.
If you are a graphic designer, I would recommend skipping to the second section after the introduction, but if you are new or unfamiliar with photoshop I recommend you follow along all the way through.
Let’s remind ourselves what backup images are and why they are necessary to provide with any HTML5 banners.
Backup images are a static picture (JPG) of the final frame of the HTML5 banner animation and they do exactly what they say on the tin – they are a backup up, or a “Plan B” for instances where the website would not be able to serve your animated HTML5 banners. For example, if a user is using a version of internet explorer that is several years out of date, that browser might not have the appropriate updates installed to display your ad properly. In those cases, the ad server will recognize that the end user does not meet the necessary criteria for viewing an animated HTML5 banner and will serve a back up image instead.
Although there are no metrics that indicate how often backup images are served instead of animated HTML5 banners, if your HTML5 Banners are coded properly and at a reasonably small file size, as GAP HTML5 banners are, ad servers will most likely serve the animated version of your banner in most instances. Even if the backup images are not served very often, media agencies will not accept HTML5 banners without them, so ensuring your backup images match the language, products etc of your animated banners is an important step in delivering your banners to your media agency.
IMPORTANT NOTICES
If you are a graphic designer, I would recommend skipping to the second section after the introduction, but if you are new or unfamiliar with photoshop I recommend your follow along all the way through.
I’m assuming that you’ve already watched the intro to the gap programme and the short explanation what’s included in your gap files video, if you haven’t had a chance to watch them yet there are links below to those videos or you can find them on the gap program website.
It is important that you have made all the necessary updates/changes to your HTML5 banners before creating your backup images. If you update the backup images but continue to make changes to the text or images in the HTML5 banners, there is a chance you will need to update the backup images again, so please be sure that your HTML5 banners are 100% signed off prior to updating your backup images
Most ad servers require backup images to be 40KB or less, which means you might find some pixelation when exporting your backup images. Luckily, as we discussed in the introduction, when your HTML5 banners are coded properly, it is unlikely that your backup image will be served very often; however, we will show you some inside tricks we use to compress the file size of our. Backup image without losing too much quality
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: Open Updated Photoshop Files
- Open Updated Photoshop files
- Designs should have the correct language & products for your market. If you have not yet updated the text & images, please complete those tutorials first (links below)
- If you have the appropriate fonts installed, you should be able to open the PSD normally. If not, you will receive a warning that describes what fonts you are missing. SINCE YOU ARE NOT UPDATING ANY TEXT, these warnings can be ignored. If you would like to update the text and you want more direction on how to install fonts, please see our tutorial on

STEP 1: Open Updated Photoshop Files
- Open Updated Photoshop files
- Designs should have the correct language & products for your market. If you have not yet updated the text & images, please complete those tutorials first (links below)
- If you have the appropriate fonts installed, you should be able to open the PSD normally. If not, you will receive a warning that describes what fonts you are missing. SINCE YOU ARE NOT UPDATING ANY TEXT, these warnings can be ignored. If you would like to update the text and you want more direction on how to install fonts, please see our tutorial on

STEP 2, 3, 4, 5: Use the selection tool to isolate the final frame
- Make sure the “selection” tool is selected from the tool bar
- As always, you will see “artboards” with each banner frame and inside those artboards, you will find all the assets within that frame.
- At this stage, it is important to remember that the pixel size of the designs is double the pixel size of the HTML5 banners. So, for example, the designs labelled 300×600 might actually be 600×1200 pixels.
- This is called “retina” designs and it is an important feature in creating high resolution designs in HTML5.
- HOWEVER – backup images should never be supplied at retina size – that is, for a 300×600 banner, the backup image should be 300×600 pixels not 600×1200 retina size.
- We will show you how to reduce the size of the export JPG in the export section, so no need to make any adjustments to the artboard size at this stage.
- Locate the final frame for your first banner and select that folder
- Make sure no extra assets from other frames are visible at this stage. The endframe in the designs should exactly match the endframe that displays in your animated HTML5 banner
- Repeat steps for all banner sizes

STEP 2, 3, 4, 5: Use the selection tool to isolate the final frame
- Make sure the “selection” tool is selected from the tool bar
- As always, you will see “artboards” with each banner frame and inside those artboards, you will find all the assets within that frame.
- At this stage, it is important to remember that the pixel size of the designs is double the pixel size of the HTML5 banners. So, for example, the designs labelled 300×600 might actually be 600×1200 pixels.
- This is called “retina” designs and it is an important feature in creating high resolution designs in HTML5.
- HOWEVER – backup images should never be supplied at retina size – that is, for a 300×600 banner, the backup image should be 300×600 pixels not 600×1200 retina size.
- We will show you how to reduce the size of the export JPG in the export section, so no need to make any adjustments to the artboard size at this stage.
- Locate the final frame for your first banner and select that folder
- Make sure no extra assets from other frames are visible at this stage. The endframe in the designs should exactly match the endframe that displays in your animated HTML5 banner
- Repeat steps for all banner sizes

Part 2 Exporting Backups
Part 2 – Exporting Backups
STEP 1 & 2: Locate Backup Images
- Find the HTML5 Backup images in the GAP Files
-
- There is no need to delete or duplicate these backup files, as we will be saving over them in this process.
- Review the PSD files for each size and check that the endframe is the only asset displaying

STEP 1 & 2: Locate Backup Images
- Find the HTML5 Backup images in the GAP Files
-
- There is no need to delete or duplicate these backup files, as we will be saving over them in this process.
- Review the PSD files for each size and check that the endframe is the only asset displaying

STEP 3: Select ‘Save for Web’
Select “Save for web” under
FILE > EXPORT > Save for Web (Legacy)

STEP 3: Select Save for Web
Select “Save for web” under
FILE > EXPORT > Save for Web (Legacy)

STEP 4,5,6: Export the Image with Correct Settings
- select the jpg format from the drop down menu.
- Set the image size to 50%
- designs labelled 300×600 might actually be 600×1200 pixels (retina). HOWEVER – backup images should never be supplied at retina size – that is, for a 300×600 banner, the backup image should be 300×600 pixels not 600×1200 retina size
- Adjust the quality so that the file image size will be under 40kb. You can see the final export size in the bottom left hand corner

STEP 4, 5, 6: Export the Image with Correct Settings
- select the jpg format from the drop down menu.
- Set the image size to 50% so that the image exported is NOT retina sized
- Adjust the quality so that the file image size will be under 40kb. You can see the final export size in the bottom left hand corner

Select JPG Format
- JPGs are the most efficient way of keeping file size low while keeping quality high.
- Be sure that the file you export includes the .jpg extension. This should be added automatically by your computer
- It is possible to accidentally save a .png file with a .jpg extension; however this will cause an error. To avoid this problem, always triple check that your export setting is set to JPG
Check the Pixel Size
- GAP designs labelled 300×600 are actually be 600×1200 pixels (retina). While this is appropriate for HTML5 banner assets, it is not appropriate for backup images.
- backup images should never be supplied at retina size
- So, for a 300×600 banner, the backup image should be 300×600 pixels not 600×1200 retina size
Check the File Size
- Most ad servers require backup images to be 40KB or less, which means you might find some pixelation when exporting your backup images.
- Luckily, as we discussed in the introduction, when your HTML5 banners are coded properly, it is unlikely that your backup image will be served very often
IMPORTANT TO NOTE: Backup Images must be saved at less than 40K or your HTML5 banners will be rejected by your media agency
STEP 7: Replace Backup Image in HTML5 files
- Hit save and navigate to the backup image you want to update and replace
- Repeat steps 4-7 for all banner sizes.

STEP 7: Replace Backup Image in HTML5 Files
Hit save and navigate to the backup image you want to update and replace
Repeat steps 4-7 for all banner sizes.

IMPORTANT TO NOTE: A quick reminder that HTML5 banners need to be properly packaged prior to providing to your media agency for trafficking. Please see our Tutorials on how to package your animated HTML5 banners for delivery here
Why Choose The Bannermen






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.