Using HTML5 Banners instead of GIFs

**nowagering** · 19 March 2018, 10:20 am

Hi all, this isn't specifically related to Wordpress, but couldn't find a better category.

I've been struggling with the new HTML5 banners for a while, as typically I've always used GIFs, either self-hosted or direct links to the backends.

However, with the growing number of affiliate programs using HTML5 banners I think it's time to start adopting this approach.

My issue is that I have always auto-generated deals around the website, with the code reading from one config file/database where the various operators and their links, banners, attributes etc are stored, so I only have to change settings in one place, and the changes automatically appear around the site.

This is easy with GIFs, because you can just enter the URL to the image (whether internal or external) and the website code will spit it out in an `<img>` tag.

But, with HTML5 banners, this isn't possible as they are served either by a `<script>` or an `<iframe>`.

How do you manage HTML5 banners?

Also, how do you get them to respond to changes in the viewport size i.e. get them to be mobile responsive?

**nowagering** · 22 March 2018, 6:42 am

Nobody using HTML5 banners?

**PROFRBcom** · 22 March 2018, 2:22 pm

Might it be easier to screenshot the various images on the html 5 banner, create your own gif, and continue as you were doing before with the seemingly quick and simple config file set up?

**nowagering** · 23 March 2018, 9:18 am

Hi, thanks for your reply, yeah I agree that would probably be simpler, but custom banner creation for UK markets is "outlawed" by most operators now, due to regulation and compliance

Do you use HTML5 banners? How "mobile responsive" are they? And is it easy enough to spit the <script> or <iframe> out into your page template and respect the size/positioning of the containing element (div etc)?

**Breakout Affiliates** · 29 March 2018, 8:17 pm

To my memory HTML5 even without CSS does scale very well with mobile screens, you might have to write a two different page orientations/styles for a large screen(desktop) and a small one (mobile) device and it should scale boundaries and margins for you

**vmguide** · 17 April 2018, 4:16 am

It's a tricky question which I think should be investigated further by advertisers since it would be in their interest that their banners are responsive.
It is posible to scale iframes responsively, but in most cases the content in the iframe have fixed widths with unique css classes that can't be modified in a dynamic way.
My solution so far, has been to replace the banners as the viewport gets smaller. In our case I use 3 different sizes (three different code snippets) that will display on different screen sizes. This required a fair bit of coding to achieve but works pretty good. We are not using any automated service though.

**CasinPop** · 24 April 2018, 10:16 am

GIF works everywhere and normally has better conversion since its still used as fallbacks.

**wonderpunter** · 25 April 2018, 4:58 am

256 colour gifs? gifs are too heavy for too little .. best go html5

**nowagering** · 30 May 2018, 4:48 am

Originally Posted by vmguide

It's a tricky question which I think should be investigated further by advertisers since it would be in their interest that their banners are responsive.
It is posible to scale iframes responsively, but in most cases the content in the iframe have fixed widths with unique css classes that can't be modified in a dynamic way.
My solution so far, has been to replace the banners as the viewport gets smaller. In our case I use 3 different sizes (three different code snippets) that will display on different screen sizes. This required a fair bit of coding to achieve but works pretty good. We are not using any automated service though.

Hi @vmguide - are you using different sized GIF banners, or HTML5 banners?

I've been considering using `srcset` (aka Responsive Images) but obviously these will still only work with images, not HTML5 banners.

With more HTML5 banners becoming available, and some programmes not providing GIF banners, i'm sure there must be some benefits in HTML5 banners (somewhere)!

**allfreechips** · 30 May 2018, 11:12 am

I just make the operators generate a gif.. was coding for HTML5 but its a disaster to start including outside code into any site, I store all images locally on all sites.

**Cash Bonus** · 30 May 2018, 5:26 pm

It would be much easier to just use gifs over HTML5 banners. Those people who are not very good at coding will prefer to go with gifs over HTML5 banners instead.

**Former Member 14** · 31 May 2018, 8:02 am

You could use Base64 encoding

As an example, if I was to use my logo at SpinCitySlots.com

The Base64 coding would be:

Code:

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

Want proof...sure... copy the above code to a Base64 decoder, such as: https://codebeautify.org/base64-to-image-converter

Will convert it back to the (logo) *.png

Edit:
You can either add Base64 inline, or use it in CSS. Either way, it's far quicker/faster than pulling multiple images. Hence, page load speeds are greatly increased

**nowagering** · 2 July 2018, 9:05 am

Originally Posted by AussieDave

You could use Base64 encoding

Edit:
You can either add Base64 inline, or use it in CSS. Either way, it's far quicker/faster than pulling multiple images. Hence, page load speeds are greatly increased

Are you sure about that? Inlining base64 images will bloat the size of the page, which can't be cached, whereas images can. I think you'll find that subsequent requests will be much much slower as all the base64 is downloaded again. With images, after the first request, all images will be cached in the browser and so subsequent requests will be much smaller & faster.

**Former Member 14** · 2 July 2018, 9:51 am

Originally Posted by nowagering

Are you sure about that? Inlining base64 images will bloat the size of the page, which can't be cached, whereas images can. I think you'll find that subsequent requests will be much much slower as all the base64 is downloaded again. With images, after the first request, all images will be cached in the browser and so subsequent requests will be much smaller & faster.

You were concerned about iframes and scripts being used to serve html5 images.

Sure, any additional coding will increase the size of said page. However, compared to serving multiple images (and lets face it most programs don't optimize their images), so it's not uncommon for each image to 70Kb+. The code for a single base64 image ain't going to be 70Kb. But for argument sake if it was, it would be processed a damn side quicker, on the 1'st page load.

IDK about your site(s), I can only say what happens on mine. Generally, I see (mobile) punters landing on a page, clicking the call to actions on that page, and visiting the casinos. While I get people visiting other pages, the general modus operandi I see from mobile traffic is the aforementioned. While all my sites are mobile optimized, I find PC user are more likely to visit multiple pages, than their mobile counterparts, who, and reiterating seem to visit 1 page and either visit a casino(s) on that page, or leave.

Hence, subsequent pages loads and cached images are a moot point.

Maybe you could look at using AMP (Accelerated Mobile Pages) if that's not being used already.

**nowagering** · 2 July 2018, 11:35 am

Originally Posted by AussieDave

You were concerned about iframes and scripts being used to serve html5 images.

Sure, any additional coding will increase the size of said page. However, compared to serving multiple images (and lets face it most programs don't optimize their images), so it's not uncommon for each image to 70Kb+. The code for a single base64 image ain't going to be 70Kb. But for argument sake if it was, it would be processed a damn side quicker, on the 1'st page load.

Yeh fair enough, it will render quicker, but are you really seeing base64 smaller than the original image? Every time i've converted an image to base64 its ended up larger (saving the resulting base64 to a txt file then viewing the size of the txt file).

Originally Posted by AussieDave

You were concerned about iframes and scripts being used to serve html5 images.

IDK about your site(s), I can only say what happens on mine. Generally, I see (mobile) punters landing on a page, clicking the call to actions on that page, and visiting the casinos. While I get people visiting other pages, the general modus operandi I see from mobile traffic is the aforementioned. While all my sites are mobile optimized, I find PC user are more likely to visit multiple pages, than their mobile counterparts, who, and reiterating seem to visit 1 page and either visit a casino(s) on that page, or leave.

Hence, subsequent pages loads and cached images are a moot point.

Interesting, I guess it makes sense for you then.

Have briefly looked into AMP before, but parked it for some reason. Thanks for reminding me

Thread: Using HTML5 Banners instead of GIFs

LinkBack

Thread Tools

Search Thread

Display

Using HTML5 Banners instead of GIFs

The Following 2 Users Say Thank You to Breakout Affiliates For This Useful Post:

Tags for this Thread

Posting Permissions