Using HTML to display an image in a strange way

[Nik Coughin]

Hi,

Please, no lectures about why this is a bad idea. It's not intended to be
used on the net at large, I did it as a programming exercise and a bit of
fun.

What I've done is write a utility that takes an image and turns it into html
without referring to an external file or using the data:uri or anything like
that.

To get a better idea of what I'm on about, have at look at the source of
this page:

http://www.nrkn.com/temp/testImage.php

The page is ~150k but I have gzip enabled so it should only be about 10k to
download.

Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
missing required attributes for starters.

Can anyone think of a better tag that I can use? It would be good to have
it as concise as possible. I considered using <hr> tags and changing them
to display: inline; but it doesn't seem to work.

--
"Come to think of it, there are already a million monkeys on a million
typewriters, and the Usenet is NOTHING like Shakespeare!" - Blair Houghton
-=-=-=-=-=-=-=-=-=-=-=-
http://www.nrkn.com/
-=-=-=-=-=-=-=-=-=-=-=-

 

[Andrew Urquhart]

*Nik Coughin* wrote in alt.html:
[snip]

http://www.nrkn.com/temp/testImage.php [snip]
Can anyone think of a better tag that I can use? It would be good to have
it as concise as possible. I considered using <hr> tags and changing them
to display: inline; but it doesn't seem to work.

Run-length encoding in markup, v. interesting! I'd use divs personally -
semantically neutral and it really saves on alt text...

If you have javascript enabled you can see an example of arrays of
'pixel's using divs and background colours at:
http://andrewu.co.uk/tools/colourpicker/
When the page loads, submit the form with the default value shown; the
coloured divs make up the rainbow hue-bar and the light versus
saturation square below it.

 

[Spartanicus]

Please, no lectures about why this is a bad idea. It's not intended to be
used on the net at large, I did it as a programming exercise and a bit of
fun.
[...]

Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
missing required attributes for starters.

Why are you worried about public DTD conformance if it's a bit of fun
not intended to be used on the net?

 

[Nik Coughin]

*Nik Coughin* wrote in alt.html:
[snip]

http://www.nrkn.com/temp/testImage.php [snip]
Can anyone think of a better tag that I can use? It would be good
to have it as concise as possible. I considered using <hr> tags and
changing them to display: inline; but it doesn't seem to work.

Run-length encoding in markup, v. interesting!

I used RLE because the generated files are quite big (though interestingly,
the html is around the same size as the PNG source images I was using once
gzipped!) and it makes sense to have as few elements as possible on the page
for rendering speed. The other thing I may do at some point is find the
most common color in the image, set it as the background for the whole
image, and not draw those elements (maybe by using a margin-right on the
element before it). I may also look for adjacent pixels of similar color
and make them the same color to make the RLE more efficient. I think maybe
have a "compression" value to determine how similar the pixels have to be
before they are merged.

I'd use divs personally - semantically neutral and it really saves on alt
text...

Can't get divs to work unfortunately

If I have...

<style type="text/css">
div
{
display: inline;
height: 1px;
width: 1px;
}
</style>

<div style="background: #f00"></div>

....then I get a 1px wide by 19px high red div. If I set font-size: 0; for
the div I get a 1px wide by 2px high.

*Sigh*.

Would be good if I could style something that isn't a container. Damn it,
<hr> would be perfect if I could get it to display 1px by 1px and inline.

This...

<style type="text/css">
hr
{
border: 0;
height: 1px;
width: 1px;
text-align: left;
display: inline;
}
</style>

<hr style="color:#f00;"><hr style="color:#f00;"><hr style="color:#f00;"><hr
style="color:#f00;">

....draws four 1px by 1px hrs, but each is on a new line despite the display:
inline, and there is vertical space between them.

The reason I want my elements inline is to avoid having to use any kind of
margins or positioning, as this will further bloat the code.

If you have javascript enabled you can see an example of arrays of
'pixel's using divs and background colours at:
http://andrewu.co.uk/tools/colourpicker/
When the page loads, submit the form with the default value shown; the
coloured divs make up the rainbow hue-bar and the light versus
saturation square below it.

I like that a lot!

 

[Nik Coughin]

Please, no lectures about why this is a bad idea. It's not intended
to be used on the net at large, I did it as a programming exercise
and a bit of fun.
[...]

Now, using <img> the way that I currently am is a gross abuse of
HTML. I'm missing required attributes for starters.

Why are you worried about public DTD conformance if it's a bit of fun
not intended to be used on the net?

Perfectionism. OCD. Whatever you want to call it

 

[Andrew Urquhart]

*Nik Coughin* wrote in alt.html:

Can't get divs to work unfortunately
If I have...
<style type="text/css">
div {
display: inline;
height: 1px;
width: 1px;
}
</style>
<div style="background: #f00"></div>
...then I get a 1px wide by 19px high red div. If I set font-size: 0; for
the div I get a 1px wide by 2px high.
*Sigh*.

Regarding the colour picker: For the lightness vs. saturation square
each 'pixel' is a div with class 'tile' and inline style
background-colour. All 'pixels' live inside a div of fixed width - it's
just wide enough to accommodate a row length. This fixed-width div
itself lives within a div with class 'colourSquare'. That's it (if that
helps).

Getting it to work was a bit of trial and error due to unexpected
effects in IE5+ and Mozilla; Opera7 was no problem at all (Win2K, other
browsers not tested)

http://andrewu.co.uk/css/colourpicker.css
[snip]
..colourSquare {
clear: both;
margin: 0 0 10px 0;
padding: 0;
line-height: 1px;
font-size: 1px;
cursor: crosshair;
}
..tile {
width: 3px;
height: 3px;
float: left;
/* Peek-a-boo? */
position: relative;
}
[snip]

 

[Jim Higson]

*Nik Coughin* wrote in alt.html:

Regarding the colour picker: For the lightness vs. saturation square
each 'pixel' is a div with class 'tile' and inline style
background-colour. All 'pixels' live inside a div of fixed width - it's
just wide enough to accommodate a row length. This fixed-width div
itself lives within a div with class 'colourSquare'. That's it (if that
helps).

Getting it to work was a bit of trial and error due to unexpected
effects in IE5+ and Mozilla; Opera7 was no problem at all (Win2K, other
browsers not tested)

Konq works fine (if a little slow) - tribute to it's standards compliance
that it works without testing.

 

[Nik Coughin]

*Nik Coughin* wrote in alt.html:

[snip helpful css example]

Thanks Andrew. I now have it working with divs. Unfortunately, the RLE
doesn't work in Mozilla because you can't actually apply a width to inline
elements. IE and Opera both let you get away with doing it anyway, but
Mozilla doesn't (and rightly so).

But... an img is an inline element, and yet you can apply a width to it.
What's with that?

Tricksy is it.

 

[Toby Inkster]

Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
missing required attributes for starters.

Keep with <img> and add in alt="" and src="". <img> is arguably the most
semantically correct element to use.

You need to keep working on it though -- if you take the page out of
quirks mode it falls apart!

 

[Spartanicus]

doesn't work in Mozilla because you can't actually apply a width to inline
elements. IE and Opera both let you get away with doing it anyway

Quirks mode only for Opera.

But... an img is an inline element, and yet you can apply a width to it.

Applies to: all elements but non-replaced inline elements, table rows,
and row groups

Img is a replaced inline element.

 

[Andrew Urquhart]

*Jim Higson* wrote in alt.html:

Konq works fine (if a little slow)

Thanks for testing.

 

[Andrew Urquhart]

*Toby Inkster* wrote in alt.html:

Keep with <img> and add in alt="" and src="". <img> is arguably the most
semantically correct element to use.

In the event that this technique did escape and end up in a general WWW
environment, I'd prefer to see it implemented in divs (or spans) than
imgs. The reason being that certain text browsers indicate that an image
is still present despite setting null-string alt.

For example in Opera's text browser emulation mode the rendering looks
something akin to a *very* large histogram! Omitting the alt attribute
causes a similar effect in Lynx using square brackets. Fortunately JAWS
for Windows on top of IE doesn't seem to have this problem - reading 385
"image"s aloud would be somewhat of a hindrance!

As div/span are generic there is no implied presentation for browsers,
short perhaps of a newline after div elements in visual useragents.
Certainly tests in those 2 text browsers with divs generates a page with
no clues to the presence of the presentational RLE markup.

 

[Nik Coughin]

Quirks mode only for Opera.


Applies to: all elements but non-replaced inline elements, table rows,
and row groups

Img is a replaced inline element.

Ah, thanks.

 

[Nik Coughin]

In the event that this technique did escape and end up in a general
WWW environment,

Not likely. There are no real advantages to it. The code is massive and
bloated and probably not much fun for the poor old browser to have to
render. The only good thing about it is that it doesn't reference an
external image, and there are other ways of doing this (though not
cross-browser). It has definitely been an interesting exercise however, and
I'll probably play with it some more on the weekend.

Anyone interested in having a look at the Delphi source or Windows binary
for the utility drop me a line:

nrkn
(a t) nrkn
d o t
com

 

[Nick Theodorakis]

Hi,

Please, no lectures about why this is a bad idea. It's not intended to be
used on the net at large, I did it as a programming exercise and a bit of
fun.

What I've done is write a utility that takes an image and turns it into html
without referring to an external file or using the data:uri or anything like
that.

To get a better idea of what I'm on about, have at look at the source of
this page:

http://www.nrkn.com/temp/testImage.php

The page is ~150k but I have gzip enabled so it should only be about 10k to
download.

Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
missing required attributes for starters.

Can anyone think of a better tag that I can use? It would be good to have
it as concise as possible. I considered using <hr> tags and changing them
to display: inline; but it doesn't seem to work.

I did something similar a year or so ago by styling empty <div>s. You
can see a couple of examples at:

<http://theodorakis.net/cssart.html>

NIck

 

[Leif K-Brooks]

What I've done is write a utility that takes an image and turns it into html
without referring to an external file or using the data:uri or anything like
that.

Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
missing required attributes for starters.

Can anyone think of a better tag that I can use?

One (really evil) method would be to use table cells. With a proper
algorithm, you could even make the file size reasonable by using colspan
and rowspan.

 

[Toby Inkster]

http://www.nrkn.com/temp/testImage.php

I'm surprised no-one has posted this already, but about a year ago
everyone was thoroughly impressed with this:
http://www.designdetector.com/tips/3DBorderDemo2.html

A large CSS picture of a house done in just 15,219 bytes.

 

[Leif K-Brooks]

I'm surprised no-one has posted this already, but about a year ago
everyone was thoroughly impressed with this:
http://www.designdetector.com/tips/3DBorderDemo2.html

A large CSS picture of a house done in just 15,219 bytes.

Definitely neat, but it's more of a vector image, whereas the OP is
talking about raster images. Also, I don't think it would be very easy
(or even possible?) to create an automated converter from SVG or some
other format; you'd need to program an editor specifically designed for
CSS slants, or just do it by hand.