Kaum zu glauben: Ein Bild als JavaScript in einer HTML-Datei:
Das Zeichen des minikino.de ist eine einfache strichcode-basierte Grafik. Irgendwann wollte ich diese mal als Tabelle direkt in ein HTML-Dokument einfügen, um nicht immer eine extra Bilddatei mitladen zu müssen. Weil der Aufbau so einer Tabelle ganz schön viel Speicher frisst und eine Änderung ziemlich unübersichtlich ist, habe ich das Ganze als JavaScript umschrieben, dem ich für jede Tabellenzeile nur noch die Hintergrundfarbe der jeweiligen Tabellen-Felder übergeben brauchte. Diese kompakte Zeichenkette besteht aus Hexadezimal-Zahlen von 0-f für die Grauwerte 0-15 . Das sparte mir 90% Speicherplatz, den ich dann sogleich mit einem kleinen Foto füllen wollte, denn die neue Technik machte alles viel flexibler. Also habe ich noch ein Script zum wandeln von 16-Farb-Targa-Bitmaps in so eine HTML-Datei geschrieben. Hier ist es!
|
|
|
Und so kannst auch Du mit Hilfe von Photoshop™ Grafiken in Deine HTML-Dateien direkt einbinden:
Also erstmal was Grundsätzliches: Erstens ist diese Version beschränkt auf 16 Graustufen. Zweitens dauert das sog. parsen einer Tabelle auch so seine Zeit, deshalb sollten die Bilder nicht zu gross sein. Dieses Bild von mir hat z.B. eine Größe von 35*50 Pixel, also 1750 TableDatas. 64*64 sollte das Bild besser nicht überschreiten, obwohl 255*255 möglich sind. Außerdem wird für jeden Bildpunkt ein ganzes Byte + 14 je Bildzeile übertragen. Also völlig unkomprimiert. Ein Bild von z.B. 320*240 Pixeln hätte dann gut 80KB und würden mehr als 12 Sekunden zum runterladen dauern (bei 56kbit/s), ganz zu schweigen vom parsen. 4KB sind also o.k. und 16 Graustufen reichen für eine Grafik völlig aus, für ein Foto eigentlich auch, außerdem kann man die Tabelle j a auch vergrößern...
So nun aber los: Öffne Dein Bild mit RGB-Farbe bzw. 256 Graustufen. Ändere nun den Modus in Indizierte Farben und nutze dabei eine eigene Farbtabelle. Die bekommst Du hier, oder Du bastelst selbst eine. Die 16 Graustufen definierst Du als Hexadezimal-Werte und zwar 000000, 111111, ..., FFFFFF. Die erste Farbe sollte Schwarz, die 16te Weiß sein. Eine Vorschau zeigt Dir das auf 16 Graustufen herabgesetzte Bild. Durch Dither-ing kannst Du allzu harte Farbverläufe etwas kaschieren. Diffusion brachte bei mir die besten Ergebnisse. Das so erzeugte Bild speicherst Du als Targa Image (*.TGA) ab.
Diese Datei öffnest Du nun in MS Notepad™ oder ähnlichen Texteditor, markierst den gesammten Text (mit Strg+A) und fügst ihn hier mit Strg+V ein. Drück dann auf Erstellen
Lass Dir dann den Quelltext anzeigen um Deine HTML-Seite noch zu verfeinern und unter Deinem Namen abzuspeichern, bzw. um Dir die Script-Bereiche in Deine eigene HTML-Datei zu kopieren. Viel Erfolg!