< Back
A photo with the types of display ads: flash, HTML5 and GIF ads

Display Advertising: A comparison of HTML5 and GIF ads

Date Posted: November 29, 2017Reading time: 6 minutes

by Jessica Shortt

 

The Beginning of Display Advertising

Online advertising began in the early 1990s. AT&T purchased the very first display ad in 1994, and 44% of people who saw it clicked on it. At the time, it was just something fun users could engage with. By clicking through, users were rewarded with a website and video, which playfully imagined the future of the internet.

An example of a display ad that reads "Have you ever clicked your mouse right here? You will"

Consider this the beginning of online advertising. And since this first banner ad launched in 1994, the ability to target different audiences based on region, personal interests, and many other factors, has become quite popular. This allows ads to be more purposeful in both their creation and delivery. However, in the 23 years since the first banner ad was posted, the average clickthrough rate has dropped from 44% to roughly 0.06%.

The Death of Flash

Flash was introduced in 1996, and was the preferred way to build ads (and websites) for decades before Steve Jobs penned an open letter announcing that Apple would not play flash-based ads in Safari or on their iPhones or iPads, partly because of proprietary software and the need for an additional plugin. This letter, on top of the multitude of security holes and weakening trust in Flash, was what ultimately led to its demise. This soon lead to Chrome announcing that they were going to stop playing Flash ads, with Mozilla following soon after. Amazon also announced they would no longer be playing Flash ads, and Google Display Network, an advertising network that reaches 90% of internet users worldwide, stopped accepting Flash ads at the end of last year. Today, Flash is thoroughly retired in any usable sense.

In the same span of time, HTML had grown up and gone through five different iterations, with HTML5 allowing a structure that could be used for animating alongside CSS3. This opened a new world of native web transitions and animations, and before long, HTML had begun to close the gap Flash left behind, utilizing CSS and JavaScript. This brings us to the two most popular display formats in the advertising community today: GIFs and HTML5.

HTML5 vs GIF Ads

Think of an HTML5 ad as a tiny little website inside a container. It loads like an ad, but it has multiple files of code and images under the hood, usually with JavaScript or CSS controlling the animations or text fading in and out, or loading images. HTML5 is an open web standard, which means it’s supported by every browser on every operating system, and JavaScript plugins are easy and efficient to use alongside them. This results in an ad that is efficient, requiring fewer computer resources and processing power, and no external plugins — unlike Flash. It can also be played on desktop, mobile, or tablet without much tweaking.

A GIF ad is a series of frames with a set of instructions, looping through each predetermined frame, and became popular because of their efficiency. They used a form of image compression called LZW compression, which when it was published in 1984, was quite an advanced algorithm for its time. That’s because it allowed large images to be downloaded in a short period of time with a slow bandwidth. Soon, when basic animation support was added to GIFs, coupled with lossless compression, they became extremely useful for displaying logos and a series of icons with around 10 frames.

File Size

Because of the difference in the way HTML5 ads and GIFS play, there can be a significant difference in the file size for the exact same animation. Because a GIF has to re-render every single pixel on the image during the playtime and redraw the entire scene, it’s costly to have more colours because it is, in the most basic terms, a lot of separate pictures being shown in succession. Each GIF frame can end up around 78kB, so the more frames you have in an animation, the larger the file size. It’s possible to achieve a GIF with a low file size, but most of the time you’re surrendering colours to do that. With an HTML5 ad, the transitions take a small piece of the whole picture and move it across the scene without having to redraw many pixels. The only thing being redrawn is the moving element.

Most ad servers now have a limit of around 150-300kB for display ads, but keeping the file size under those limits can be tricky. HTML5 ads can be more complicated, complete with more animations and colours at a smaller size than a GIF displaying the exact same content. HTML5 ads also allow for more eye-catching advertisements, very similar to the freedom that Flash used to allow. With only 256 supported colours, GIFs have a more limited colour palette than HTML5 ads. Compression is an issue for both formats, but HTML5 tends to handle it better than GIFs, which tend to lose even more of their already limited colour palette with compression.

Image Clarity

In the current climate of high dpi (retina) screens, GIFs can fall flat and look scaled up, or pixelated because they’re built to the one size they’re intended to display at. HTML5 ads are also built to this size, but since they are comprised of multiple files, these files can be retina-compatible, which usually means doubling the width/height and scaling down, so they look crisp regardless of the screen. GIFs are also not interactive, which means the most you can do with one is click on it. HTML5 ads support the ability for user interaction and can even detect a user’s location or local time and dynamically display that within the ad.

Cost

It’s difficult to not include cost as a point of interest because it is important. GIFs are known for being cheaper to make, and there’s usually someone on every team who already knows how to make a GIF. They may always win out over HTML5 ads in this category because there’s a higher learning curve with HTML5. Luckily, drag and drop interfaces are being created like Hype 3 and Google Web Designer to help make HTML5 easier, and hopefully, we’ll see more in the future to close the gap between HTML5 and GIFs in terms of creation cost. 

Personal Preference

Though I may be biased as a web developer, I believe that HTML5 ads should be used in almost all cases, as it is constantly improving and changing alongside the rest of the web. There are also JavaScript libraries that make using these new features even easier, like GSAP using TweenLite, for example. The cases in which HTML5 shouldn’t be used? When ads have minimal text or are perhaps small, simple mobile ads.

There are upsides and downsides to both, and in the end, it depends on what the client sees as most important for their use — whether it’s simple text or an interactive ad with advanced animation. It’s dependent on a lot of factors, but with the way GIFs are slowly being phased out, HTML5 ads could very well take their place. Just like it did with Flash.

Bonus Fact: Since GIFs are becoming outdated and inefficient, a new looping format, GIFV format was released to slowly replace them. But don’t be fooled by the name, as they aren’t really GIFs — they’re actually HTML5 videos.

 


 

This is a photo of Jessica Shortt, a Web Designer and Developer at Trampoline.

Jessica Shortt is a Web Designer and Developer at Trampoline. Need help creating display ads for an upcoming campaign? She’d be happy to help! Reach out to [email protected].