<table> statt <img>?

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.