Sneaky CSS and JavaScript Tricks Using HTML 5

By HTMLGoodies Staff

There are some sneaky tricks that can be accomplished using CSS, HTML 5's canvas tag, JavaScript and PNG images. An example would be the hack developed by Jacob Seidelin at Nihilogic.dk, who used PNG images to compress the HTML and JavaScript on a web page by up to 75%.

Seidelin created the hack, which has been used by other participants at the 10K An Event Apart competition, although some may debate the merits of using such a hack in the event. The idea is to compress the CSS and JavaScript code using a compression tool, encode it as a PNG graphic, extract the code from the image, such as when the image is loaded into a canvas element using the drawImage() method, and converting the data to a string.

By using Seidelin's method, you could save 75% of the file size, and in some cases, even beat the compression savings of those files compressed using Gzip. That said, it's usually easier and better to use the Gzip format.

View Full Article

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

Thanks for your registration, follow us on our social networks to keep up-to-date