Previously, I’d staked out four key areas currently plaguing modern advertising within the HTML5 ecosystem:
Image compression- Fonts
- JavaScript libraries
- Streaming
It appears that using the <canvas> element, “image compression” may be knocked off the list.
Using Base64 strings, it is possible to write images directly to the canvas. What does this mean? Much like our beloved ad.swf 40kb file, it is perhaps possible to generate ad.js with compressed image data baked into the JavaScript.
ad.js then simply creates the <canvas> HTML element and uses context.drawImage(base64String, 0, 0); to display the image within the browser—all within one file.
With very brief testing, a 20kb JPEG file was converted to a Base64 string that weighs almost an equivalent 22kb.
Ad hoc browser testing reveals the image is displayed on all modern browsers, as well as IE8 with the help of FlashCanvas. IE7 and IE6 did not properly display; FlashCanvas looks to not support these lower browsers.
File weight is a still a big concern once it becomes to time to start adding logic to ad.js, but it’s a very exciting start.
