Port80 folks are always quite interested in the dreaded 404 error, not because we are particularly error-prone nor because we really love to criticize mistakes. Likely, it is just that we have some sort of fascination with that worker animated GIF continually finishing up his “under construction” Web site:
BTW, if you want to relive the pre-millennium golden age of Web design, go find your own animated GIFs like the ones here at http://www.animatedgif.net/underconstruction/construction.shtml.
Anyway, back to the point of this post -- there actually are 404 errors that you won't necessarily see in regular Web pages! They live in many pages that we would consider to be working, 200 OK-style. You might be skeptical, but, believe us, they are there. These hidden mistakes are tough to spot -- we only saw them because we use all sorts of interesting network monitoring tools, but the end-user likely won't see them. The issue: in (X)HTML tabled oriented Web page design, lots of invisible GIFs, often called spacer GIFs or shim GIFs, are used to prop open tables and add buffer space to the layout. The GIF images are usually just 1 pixel by 1 pixel transparent images which are stretched to the desired size, like so:
Now, let's say for whatever reason, the spacer GIF is not uploaded. You make a typo someplace, etc., break the reference, and then what? Well, actually, probably… nothing, and your user may never know. The reason being is that the browser will use a broken image GIF in its place and, depending on the size of these shims, it may not even show up on screen.
For example, below you see an image showing three browsers' displays of a non-existent spacer GIF. The top image is a real graphic, the one below is a 404. The way each browser displays a broken image varies. In IE, the icon appears 6 pixels from the left and top of the space reserved for the image, while in Firefox it's 3 pixels. Opera does not seem to have an equivalent feature:
On top of this, IE does not start to display the broken image icon until the missing GIF is set to be at least 15 pixels wide, while in Firefox the icon is withheld until the image width is set to a minimum of 24 px.:
The final grab shows the broken GIF images in context, and you'll see in one table versus the next that it isn't obvious there is a broken image, depending on size and such:
Another mystery of this whole thing is that, when we tried a few Web quality assurance programs that include link checking, they didn't report the broken spacer GIFs.
In closing, you might wonder why care about unseen 404s? Well, that's yet another mystery that remains unsolved (but we are on the case).
- Port80