compressing HTML

Compressing HTML and removing white space save a lot of file size.
I use to do it by hand but last week I tried an HTML compressor.
I found that it remove quote on attribute value and this shave a lot of weight too.

Unfortunately it create loads of validation error. So after testing I find out that

colour attributes (#cccccc), URL, dimensions in % and in-line style have to be quoted.

Colours have to be quoted to work in Firefox, I couldn't test a complete range of email client at the moment but will keep everybody posted.

I shaved 2 KBS on a file compressed by hand by removing the quote that could be removed.

it look like this at the end:

<table border=0 cellspacing=0 cellpadding=0 width="100%" bgcolor="#7b0002" id=center></table>

Anybody with similar experience?

zapatoche, 7 years ago

After testing I can confirm than using unquoted colour attribute such as bgcolor=cccccc instead of bgcolor="#cccccc" works in email clients as well as internet explorer and webkit based browser (tested on chrome). Firefox is the only one not to display the bgcolor unless it is quoted and prefixed with #. but unquoted bgcolor=#cccccc fail validation.

zapatoche, 7 years ago

I tried to find a good tool to compress HTML instead to have to do it manually or have t work on file where all the code is already on one line. You get use to it but it is tiring for the eye.

I downloaded a HTML compressor but it makes a big mess of the file which doesn't validate any more.

Today I tossed around with Regular Expression for the firs time in my life, trying to fix the output of the compressor.

and i wrote this:




I was going to give up when i thought i could work the other way around, take my original file and trim it with Regex.

A bit of playing around later and i found out that


does the trick pretty well. I work on E-editor which is a TextMate port on windows.
It works fine with it but fail to do the job in Dreamweaver.
Sorry about that.

Maybe one as a little trick that one could share as well.

zapatoche, 7 years ago

this regular expression


didn't work in Dreaweaver.

this one



the only annoying thing really is that  textMate does the replace in one shot and Dreamweaver does it line by line so if you want to revert you have to go through a few undos

I know I know all of this might sound geeky :)

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free