Is this a web page or an image?

The file you linked is a polyglot – a combination of languages. It can be read and understood as both an image and an HTML file. It’s a simple trick. If you look at the HTML source you can see this at the top:

ÿØÿà

A quick Google shows this looks like a JPEG header. What the creator does is store the HTML in JPEG metadata, and the JPEG image data in a html comment. Pretty nifty but not magic.

To hide the JPEG header he uses CSS rules to hide the body and show only some elements:

body { visibility: hidden; }
.n { visibility: visible; position: absolute; ...... }

Also note that it isn’t valid HTML, for example because the comment to hide the image data is not closed, but that browsers still happily accept and render it.

Leave a Comment