<table> statt <img>?

Achtung: Dieser Beitrag ist schon etwas älter.
Es kann sein, dass sein Inhalt nicht mehr aktuell ist, Links veraltet sind oder dass auch niemand mehr auf neue Kommentare antwortet.

In unserem schönen Mediengestalter-Klassen-Forum (Seite ist leider passwortgeschützt. Daher kein Link) hat jemand die Frage aufgeworfen, warum man nicht einfach eine Grafik auf die einzelnen Pixel aufsplittet und diese anschließend wieder in einer Tabelle zusammenbaut. Eine ganze Website würde man ja schließlich auch in einzelne Grafikelemente auseinander schneiden und im Editor quasi wieder zusammensetzen.

Wie wäre es wenn man die Grafiken in 1px große quadrate sliced, und dan statt dem Bild was geladen werden muss, von jedem Pixel den HEX, RGB oder sonstewas Farbwert nimmt und den dann als Hintergrundfarbe im jeweiligen pixel-feld der Tabelle angibt.

Das dies eine ungeheure große Menge an Code gibt im Gegensatz zu einer Grafik gibt, brauche ich wohl nicht zu erwähnen. Doch wie groß ist diese Unterschied genau? (Achtung jetzt folgt viel Theorie und Mathematik!)

In einer stink normalen RGB-Grafik werden die einzelnen Farben mittels drei Werten (Rot, Grün und Blau) angegeben. Also, beispielsweise: 255|255|255 für weiß. Danach kommt der nächste Pixel und so weiter. Meine Beispielgrafik (ein zwinkerndes Smiley) hat eine Größe von 15×15 Pixel und besteht somit aus 225 unterschiedlichen Pixeln. Jeder Pixel wird dabei mit 24 Bit angegeben. Bei einem unterkomprimierten Bild kommen wir damit auf 5400 Bit. Umgerechnet sind dies ungefähr 0,66 KByte.

Würde ich jetzt diese Grafik rein in einer Tabelle darstellen wollen, hätte ich erst einmal folgenden “Grundcode” pro Pixel.

Eine Bildzeile würde praktisch so aussehen:

Da ich jetzt keine Lust habe, 255 Tabellenzellen anzulegen und mit dem passenden Farbwerten zu belegen, machen wir die Berechnung des Speicherplatzes einmal theoretisch.

Bei einer ASCII-Codierung benötigen wir pro Zeichen 7 Bit. Pro Pixel benötigen wir 50 Textzeichen was einen ungefähren Speicherplatzbedarf von 43,75 Byte pro Pixel ausmacht. Eine Bildzeile benötigt somit 656,25 Byte. Das wiederum x 15 Bildzeilen ergibt einen Speicherplatzverbrauch von 9843,75 Byte (9,61 KByte.)

Also statt 0,66 KByte für die Grafik benötigen wir 9,61 KByte für die Tabelle (sollte ich mich nicht verrechnet haben ;-)). Das ist ein Unterschied von sage und schreibe ca. 1456 Prozent. In Ladezeiten ausgedrückt, würde es wie folgt aussehen: Die Grafik benötigt bei einem 56K-Modem ca. 0 Sekunden und die “Tabellen-Grafik” braucht ca. 2 Sekunden.

Da die meisten Websites recht viele Grafiken einsetzen, würde dies noch eine deutlich höhere Codemenge ausmachen. Und selbe wenn, die Tabellenmethode vom Speicherplatz und den Ladezeiten geringer ausfallen würde, würde eine Zugänglichkeit bei einem solchen Tabellengerüst absolut nicht mehr gewährleistet sein.

Im Moment fällt mir nur ein Vorteil ein, der durch eine solche Darstellung entsteht: Eine Grafik lässt sich nicht mehr so einfach über “Speichern unter…” auf die eigene Festplatte kopieren. Die Erfindung des Screenshots macht diesen Vorteil aber gleich wieder wett.

Fazit: Es gibt also absolut keinen Grund eine Grafik als Tabelle darzustellen.

Abonniere den RSS-Feed für weitere Webdesign Tutorials und Artikel.

Bisher 6 Kommentare

thomas d. 02 Nov 06

hehe nice one…

fands auf jeden fall auch ne interessante fragestelltung von martin :)

greetz, thomas

MAMs 04 Nov 06

Die Breite und Höhe der Zellen kann man per css festlegen. Somit würde 225 x ” height=”1px” width=”1px”” entfallen.
Das Fazit bleibt aber gleich :-)

VisualBlog - das VisualOrgasm-Weblog 05 Nov 06

Interessante HTML-Idee: Tabelle mit Farbwerten statt Image…

Auf dem Blog von Christian Beier fand ich einen interessanten Gedankengang zum Thema HTML. Im ersten Moment erscheint die Idee total abwegig, doch dann denkt man: warum eigentlich nicht.
“Wie wäre es wenn man die Grafiken in 1px große quadrate …

Forchheim 05 Nov 06

ASCII-Codierung benötigen wir pro Zeichen 7 Bit.

Das war vorgestern als wir noch Telegraphen hatten. Pro Zeichen werden 8 Bit = 1 Byte (erweiterter ASCII-Code des Compuerzeitalters) verbraucht. ;-)

Christian Beier 05 Nov 06

Ich habe mich bei der Berechnung frecherweise auf den einfachen ASCII-Code beschränkt. Das zusätzliche Bit macht das Ergebnis natürlich noch deutlicher.

milki 05 Nov 06

Hatte das auch mal zu Netscape4-Zeiten ausprobiert – und ab ‘ner gewissen Breite+Höhe war der erwartungsgemäß abgeschmiert ;-)

Schreibe einen Kommentar