<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.

Aus dem Portfolio: Webdesign für Birnbaum

Im Juli dieses Jahres suchte Gerrit van Aaken für seinen Studienfreund Ronald Scharf einen Webdesigner, der für den produzierten Kurzfilm “Birnbaum” eine ansprechende Website entwirft. Die Website sollte dabei möglichst barrierefrei sein, in (X)HTML und CSS umgesetzt sowie durch ein möglichst einfaches CMS angetrieben werden. Die Entscheidung ist im Laufe der Entwicklung hierbei auf WordPress gefallen.

Ich war für die komplette Umsetzung – von der Gestaltung, der Entwicklung und dem endgültigen Relaunch – zuständig. Das Design sollte sowohl zeitlos, funktionell wie auch durch Detailverliebtheit überzeugen. Durch ein fluides Layout sollte dafür gesorgt werden, dass die Website bei möglichst jeder Auflösung gut aussieht.

Im Laufe des Designprozesses ist die Wahl auf senkrechte Navigationspunkte gefallen. Das besondere dabei ist, dass der Inhaltsbereich – je nach ausgewähltem Menüpunkt – mitwandert. Eine Herausforderung war zudem die Unterbringung des News-Bereiches, da dieser sich von dem normalen Inhaltsbereich abheben sollte.

Dieser Entwurf enthielt schon alle wichtigen Elemente für die Website. Trotzdem wurden noch einige Änderungen an dem Design vorgenommen werden. Der Farbton sollte wärmer werden. Die Website sollte einen Header-Bereich mit einer passenden Bildwelt erhalten. Zudem wurden die Abstände der einzelnen Elemente verändert.

Nach dem erfolgreich das Screendesign abgeschlossen werden konnte, wurde das Design direkt als Template mit (X)HTML- und CSS-Dateien umgesetzt. Durch den wandernden Inhaltsbereich musste in WordPress für jeden Navigationspunkt ein eigenes, leicht verändertes Template erstellt werden.

Die Arbeiten wurden nach leichter Verzögerung Ende September abgeschlossen und die Seiten von Birnbaum konnten online gehen.

Weitere Informationen sind im Referenzbereich: Birnbaum zu finden.

Nie wieder verwackelte Fotos

Die meisten ambitionierten Fotografen kennen das Problem der unscharfen und verwackelten Fotos. Ein Hauptgrund für verwackelte Fotos sind unzureichende Lichtverhältnisse während der Aufnahme. Dem Fotografen standen bisher verschiedene Möglichkeiten zur Verfügung, den Effekt zu verhindern. Oft haben die einzelnen Methoden jedoch auch wieder ihre Nachteile. Hier muss der Fotograf je nach Situation die Vor- und Nachteile gegeneinander abwegen.

Den ganzen Beitrag lesen »