Static image, HTML5 or embed? Which one should I choose?
There’s a question our Support Team gets asked very frequently: “What are the best file formats for display ads?”. Given the wide range of possibilities available in Bannersnack, we understand the confusion.
When exporting the banner ads created in Bannersnack, users find themselves faced with the task of choosing the best file format for their work. They have to decide which one of the file formats is suitable, evaluate the possibility of getting an embed code, or maybe going for an AdTag custom code option. Now, this can seem complicated even for the most experienced users.
Therefore, to answer this questions for all of you, Bannersnack users, and solve this dilemma once and for all, we’ve written this comprehensive article. And, next time you’ll have to download a banner ad that you’ve created in Bannersnack, you’ll know right away which is the best type of file format to choose, whether to get the embed code or an AdTag code.
So, let’s go through them all:
Summary
Choosing the best file format for your display ads influences CTR
Downloadable file formats
A. Static file formats
1. JPG
JPG or JPEG is the most common image file type used across the world. People use it for websites, Social Media, banner ads and even for printing purposes.
Its name comes from the Joint Photographic Experts Group, who created the file type.
Advantages:
JPG is great for
- Images that employ a big number of colors
- When you need to use various image sizes. JPG comes in low, medium and high quality.
Disadvantages:
- The JPG file is considered a “lossy” one, which means that its quality decreases when you reduce its file size. Have a look at the examples below. See what happens when you reduce its file size? The image becomes pixelated and blurry.
2. PNG
PNG is another important image file format. It is considered a “lossless” format, meaning that you can edit the image without losing quality.
The name stands for Portable Network Graphics and the format is widely used in web design, but it is not compatible with print.
Advantages:
The PNG file format is great for:
- Images with transparent or semi-transparent backgrounds
- Small images like logos, graphic elements
- High-quality images, when size doesn’t matter
Disadvantages:
PNG files can:
- Get bigger in file size
3. GIF
GIF files are similar to PNG files, in terms of quality.
Advantages:
- GIF is great for small images that employ a small number of colors, such as icons.
Disadvantages:
- GIFs support only 256 colors which makes GIF not suited for certain types of images.
How to choose the best static file format
If you want to go for a static banner ad, you can either choose the JPG or PNG file format. Generally, JPG files are smaller than PNGs, and advertising networks usually have size restrictions. But Remember, Google Ads only accepts static ads smaller than 150KB.
However, Bannersnack download files are fully optimized to fit the standards. So you’ll see very insignificant size differences between JPG and PNG files.
Here are two files below, for you to better understand. The first one is a JPG file and it has a file size of 26.4 KB and the second one is a PNG file with a 28.8 file size.
B. Animated file formats
1.GIF
GIFs are most popular in their animated form. They can be found everywhere on the internet, from the cute animated GIFs in Facebook Messenger to the sophisticated corporate animated GIFs in emails. GIF is used also for banner ads in PPC campaigns.
Advantages:
- GIFs are the easiest files to make of all animated files.
Disadvantages:
- Animated GIF files can get quite heavy, due to the way a GIF plays the animation, frame by frame.
- GIFs can feature only 256 colors, which means GIF animations will not have the best image quality.
2. HTML5
After the death of Flash, when Google Display Network announced they stopped accepting Flash ads, HTML animated ads became the norm. Today, the fifth version of HTML, HTML5 is the internet’s most popular ad format. HTML5 utilizes CSS and Javascript and it allows the creation of incredible animation effects and transitions.
In Bannersnack, when you choose the HTML5 option you’ll get a .zip folder. Most people believe this folder needs unzipping. But, the truth is, Bannersnack exports you the exact type of file Google Ads asks you to upload. So, don’t unzip the HTML5 folder!
Advantages:
- HTML5 is an open web standard format file, which means that it is supported by all browsers and operating systems.
- HTML5 ads can be played everywhere as they require few resources and processing.
- HTML5 files require no additional plugins.
- Smaller size than GIF animated files.
- It allows the embedding of video, audio and rich media content.
Disadvantages:
- Whenever iOS, Android, or Windows add a change to their systems, HTML5 development tool must reflect or take into account the change and make the necessary adjustments in the code.
- The code language requires years of study. However, with tools like Bannersnack, you can create beautiful dynamic HTML5 ads, without coding skills, by simply using our drag & drop editor.
Here are few tips on how to reduce the file size for HTML5 banners:
- Use SVG elements instead of PNG or JPG.
- If you want to use JPG or PNG images, use low-size files. Optimize your images using a simple tool like Tinypng for compression. This tool allows compression up to 70% without losing image quality.
- Use a few images, when possible. For example, instead of using 5 images, use only 2-3 images.
- Reduce the size of your HTML, CSS and Javascript files. If you’re using Bannersnack to create HTML5 ads, minification is not necessary, as all files come compressed and optimized for advertising platforms.
- Reduce the amount of text or shapes in your banner.
Google Ads requirements for HTML5 ads
If you’re planning to run PPC campaigns using HTML5 ads, you should know that you need to meet a few requirements first.
The Google Display Network only allows you to run HTML5 ads if:
- You have a good history of policy compliance
- You have a good payment history
- Have more than US$1000 total lifetime spend.
3. AMP HTML
AMP stands for the Accelerated Mobile Pages project, which is an open-source initiative that aims to make the web better. This project enables the creation of websites and ads that are faster, beautiful, and high-performing across devices and distribution patterns.
AMP ads are faster, lighter and more secure ads. They provide a better user experience and increase engagement rates. AMP HTML ads are ads built using AMPHTML and use many of the smart components that make AMP pages fast.
Advantages:
- AMP HTML ads are 6x faster than regular ads
- Lighter ads lead to better ad experiences
- AMPHTML ads need to be validated before they’re served, eliminating the risk of malware and building trust in your brand.
- According to Google Ads, “AMPHTML ads can serve on both AMP pages (via the Ad Manager AMPHTML ad tag) and non-AMP pages (via the Google Publisher Tag). This includes both desktop and mobile web environments.”
Disadvantages:
- Some settings like the loop, blur effects, action URLs or embed items do not work. If you create your AMP HTML banner in Bannersnack, these settings will be ignored.
4. MP4
MPEG4 or MP4 is the most used video file format, and it’s actually considered the standard video format. This is because MP4 files combine exceptional quality, small size, multi-platform support, and streaming compatibility.
The file format was first developed by the Motion Picture Expert Group (MPEG), in 2001, a company that is also said to have set the standards in the video and audio data encoding industry. MP4 is actually the third version of the video file the company created, and it was released in 2004.
Advantages:
- MP4 files are suited for streaming on the internet.
- The MP4 format allows low loss compression, which means a user can store many MP4 files in one place.
- MP4 format can store audio, video data and other data such as object and scene description.
- MP4 files can be played on all media players available today.
Disadvantages:
- MP4 files are known to cause troubles when editing or updating. That is due mostly to copyrights. However, when you go to editing or updating your animated MP4 file (a file originally created in Bannersnack) with our online editor, there will be no such issues. But don’t try to edit/update in Bannersnack an MP4 file created elsewhere.
How to choose the best animated file format.
If you’re a complete beginner and plan to set up your first Google Ads campaign, go for an AMP animated ad. Forget GIFs. AMP HTML ads are the fastest, lighter and more secure ads.
With Google’s Mobile first update, the web is tending towards mobile optimization. That’s why Google Ads accept AMP ads without any other requirements, whereas they have very specific conditions for HTML5 ads.
AMP ads are highly optimized ads for mobile that offer a quick and qualitative user experience.
If you already have experience with Google ads, have crossed their $1000 threshold, have a good payment history, and you have complied with their policies, then you can upload HTML5 ads.
Although HTML5 ads are a bit slower than AMP ads, they include more animation effects and design settings.
C. Embed code
What is an embed code?
An embed code is a code that is generated by a third-party website for a media file. The code can be copied and pasted by a user into his website. In our case, the code is generated by Bannersnack.
Bannersnack offers the possibility to get an HTML embed code of your banner and paste it to your website, or to any other website, where you want your content to be shown.
You can get a specific embed code to paste it inlay of your page, on top of the page, as a centered pop-up or as a bottom overlay.
Advantages:
- With an embed code you skip the downloading and uploading part of the banner ad. Thus, you’ll save yourself some precious time.
Disadvantages:
- One drawback of the embed code is that the media file is hosted on the server of the website that generated it.
- The embed code can only cope with light to medium traffic from personal websites or smaller publications.
D. The AdTag code
With the ad serving add-on, you can export custom embed AdTags from Bannersnack and use on major advertising platforms like DFP, AdRoll, AppNexus, Sizmek, Simpli.fi and many more.
The AdTag code generated by Bannersnack will deliver an advanced HTML script or iframe designed to work on a specific Ad network.
Advantages:
- The AdTag has been built to withstand high volumes of traffic.
- It also supports live updates, so you can edit your banner and the AdTag will be automatically updated with your changes.
- In addition, you’ll have access to advanced analytics, being able to see the traffic statistics separately for each Ad network.
- Currently, Bannersnack supports 31 ad networks, but we plan on adding up to 150 integrations so you can serve the AdTag on as many Ad networks as possible.
Disadvantages:
- The ad serving feature is an extra component, which means that it will be charged additionally, on top of your current subscription, depending on usage.
To use AdTag custom codes, you must send a request and ask our team to enable this feature for you.
Google Ads recommendations
According to Google Ads, the recommended file formats for static display ads are:
Formats: GIF, JPG, PNG
Max. size: 150KB
Google Ads recommended file formats for animated ads
Formats: GIFs, HTML5
Animated GIF display ads specifications:
Length: Animation length must be 30 seconds or shorter.
Looping: Animations can be looped, but must stop after 30 seconds.
Speed: Animated GIF ads must be slower than 5 FPS.
Animated HTML5 display ads specifications:
HTML5 ads are not available for all advertisers. You need to submit a request to use HTML5 and Google Ads will check to see if you meet their requirements. If you’ve missed these requirements, go back to the HTML5 chapter above.
Choosing the best file format for your display ads can influence your conversion rate.
Because your final goal is conversion, be that getting people to sign up for your service or downloading your ebook, you need to have a strategic approach. Always work closely with the PPC team. There are things like audience and placement that you need to consider. These can consistently influence the final goal of your campaign.
1. Your brand and audience
There’s no general rule regarding what type of format works best for a brand. You have to test your ads to see how your audience reacts to your ads.
Run tests every year, multiple times a year. Run tests with static and animated ads. Check the analytics reports to see how your audience reacts.
What worked last year may not come out great this year. Your brand is constantly changing. Your audience is changing also. Also, take into account that new people are joining your group of audience every year.
So, when choosing the file format, you must first understand your audience and test to see how they react to various formats.
2. The placement
A. Decide which website is suited for your display ad campaign.
Google Ads allows advertisers to choose specific sites to run their ads. It is important for you to study the websites you want your ad to run on before launching your campaign. Knowing the websites, you’ll know how to craft your banners and make them blend perfectly on that location while standing out.
3. In-page location increases your chances to get clicks.
Google Ads also allows advertisers to choose the exact location on a web page where they want their ads to appear.
Ideally, you should strive for an above-the-fold position. That’s the place that gets the most attention. Whatever goes below-the-fold might get unnoticed.
Conclusion
Choosing the best file format for your display ads, understanding your audience and identifying the best placements for your ads can increase click-through-rates (CTR), conversion rate (CR) and your return on value (ROI).
Running a display ad campaign should be a teamwork. Designers should collaborate closely with the PPC team, analyze analytics reports (impressions volume, CTR, conversion rate) and make amendments accordingly.
Successful banner ad campaigns are never the result of guessing or good luck, but the effect of thoroughly strategic planning and testing.
Illustration by Anita Molnar