AMPHTML uses different technology than HTML5 and that's the reason why the way of building these type of ads differs a bit. AMPHTML files will always be heavier than HTML5 files and to get the best results and avoid any undesired behaviour, we have gathered some best practices and important information to take into account.
Using Custom Fonts
At this moment custom fonts are not supported by AMPHTML for Google Ads. When using custom fonts for AMP, the index.html file contains a “screenshot” per text element in your ads. Those screenshots work actually as images and therefore, it might result in heavy files and your ads exceeding the maximum file size you need.
There are two options to resolve this and reduce the size of your AMP ads:
You can replace the custom font with a Google font. Google will then support the font you are using and no embedded screenshots will be needed.
If your ads contain multiple text elements, you can remove some from your ads. Removing text elements means less “screenshots” embedded in the index.html file and will help to reduce its size.
Using .SVG elements
Even if .SVG elements are supported by AMPHTML and Google we highly recommend to avoid using this file type. On many occasions, the usage of .svg files trigger errors while trying to upload your creatives in Google. The error shown in Google ads “Your HTML file isn't a valid AMPHTML ads document." for example, directly affects .svg files.
To troubleshoot this and avoid from happening again, replace all .svg from your ads in Bannerwise and replace them with .png or .jpg files. For more information about this specific error, check out this article.
Working with slides
If your ads contain slides and you use the same images in more than one slide, it is important to bear in mind how ads will behave.
Have you ever experienced that after downloading your AMPHTML ads, images were overlapping each other? This is because in Bannerwise, the layer order of images is always based on the slide images are placed in first.
To avoid this from happening again, we highly recommend building the ads using one single slide in which all elements are present. This way, you can order the different layers in the timeline and make sure all your images display as expected.
We hope the information in this article was useful to achieve your goal. If there is anything else we can help you with and you couldn't find it in our help center, don't hesitate to contact us by chat.