Abo
  • Services:

Webhack

Javascript und CSS per PNG packen

Um möglichst viel Javascript- und CSS-Code in 10 KByte unterzubringen, setzt Entwickler Alex Le auf einen Trick: Er verpackt Javascript und CSS in einer PNG-Datei und nutzt die entsprechenden Kompressionsroutinen des Browsers.

Artikel veröffentlicht am ,
Webhack: Javascript und CSS per PNG packen

Für seinen Beitrag im Rahmen des Wettbewerbs 10K Apart griff Le eine Idee von Jacob Seidelin alias Nihilogic auf: Dieser hatte 2008 gezeigt, wie sich Javascript mit Hilfe einer PNG-Grafik packen lässt. So gelang es ihm damals, ein kleines in Javascript realisiertes und direkt im Browser ablaufendes Super-Mario-Spiel von 14 auf 8 KByte zu komprimieren. Die Größe der Javascript-Bibliothek Prototype konnte er so von 123 KByte auf 30 KByte reduzieren.

Stellenmarkt
  1. ETAS GmbH, Stuttgart
  2. ELAXY GmbH, Stuttgart, Jever, Puchheim bei München

Dabei wird aus dem Javascript- und CSS-Code eine PNG-Datei erzeugt. Dazu wird jedem ASCII-Zeichen ein Wert zwischen 0 und 255 zugeordnet und ein Pixel mit entsprechender Farbe erzeugt. So entsteht ein Bild, das augenscheinlich nur Rauschen enthält.

Um die so gepackten Daten im Browser zu entpacken, wird das Bild in ein Canvas-Objekt gezeichnet. Der Browser entpackt dabei die Daten automatisch, so dass der Code wieder im Klartext zur Verfügung steht und aus dem Canvas-Objekt ausgelesen werden kann.

Die Technik griff Le auf, um eine möglichst komplexe Demo in 10 KByte Code unterzubringen. Sämtlicher HTML-, Javascript- und CSS-Code sowie das notwendige HTML dürfen für den Wettbewerb zusammen nur 10.240 Byte umfassen und müssen komplett im Browser laufen, ohne Rückgriff auf einen Server.

So entstand ein Build-Script, das sämtliche Javascript- und CSS-Dateien mit Hilfe des YUI-Compressors minifiziert, in einen einzelnen String umwandelt und diesen anschließend in ein PNG-Bild umwandelt.

Den durch den Trick gewonnenen Platz innerhalb der 10-KByte-Grenze nutzte Le, um seinen Githubfinder zu implementieren, sein eigentlicher Wettbewerbsbeitrag. Mit der Applikation im Stil von Apples Finder lassen sich Git-Repositories erkunden.

Relevant ist der Trick allerdings in erster Linie für entsprechende Wettbewerbe, um mit allen für einen Wettbewerbsbeitrag notwendige Dateien unter dem gesetzten Limit zu bleiben und den Aufwand einer eigenen Routine zum Entpacken zu sparen.



Anzeige
Top-Angebote
  1. (nur bis Montag 9 Uhr)
  2. für 134,98€/176,98€ (Bestpreise!)
  3. (u. a. Mass Effect: Andromeda PS4/XBO für 15€, Mission Impossible 1-5 Box 14,99€ und Acer...
  4. 93,95€ (Bestpreis!)

fr.member 17. Sep 2010

wohl kaum... kkrieger ist auf basis des werkkzeug3 entstanden. der typ, wie du ihn...

Dr Wissen 26. Aug 2010

Bitte die AJAX-Software neu starten

keule1234 24. Aug 2010

JavaScript ist turing vollständig - im Prinzip kann man damit alles erdenkliche machen...

0X00140E 24. Aug 2010

Also in svg kann man javascript einbetten, ich frage mich was wohl gefährlicher ist...

2.null 23. Aug 2010

Wo kann man das ganze herunterladen? Was braucht man alles um die PNG's zu erstellen?


Folgen Sie uns
       


Street Fighter 30th Anniversary Collection - Live

Die Spezialmanöver Ha-Do-Ken und Sho-Ryu-Ken sind tief in den Gehirnen von Beat'em-up-Fans verankert. Im Livestream holt sie Golem.de-Redakteur Michael Wieczorek hervor und wird versuchen, sie mit dem neuen Arcade Stick von Lioncast für die Konsole umzusetzen.

Street Fighter 30th Anniversary Collection - Live Video aufrufen
Sun to Liquid: Wie mit Sonnenlicht sauberes Kerosin erzeugt wird
Sun to Liquid
Wie mit Sonnenlicht sauberes Kerosin erzeugt wird

Wasser, Kohlendioxid und Sonnenlicht ergeben: Treibstoff. In Spanien wird eine Anlage in Betrieb genommen, in der mit Hilfe von Sonnenlicht eine Vorstufe für synthetisches Kerosin erzeugt oder Wasserstoff gewonnen wird. Ein Projektverantwortlicher vom DLR hat uns erklärt, warum die Forschung an Brennstoffen trotz Energiewende sinnvoll ist.
Ein Bericht von Werner Pluta

  1. Deep Sea Mining Deep Green holte Manganknollen vom Meeresgrund
  2. Klimaschutz Unter der Erde ist das Kohlendioxid gut aufgehoben
  3. Physik Maserlicht aus Diamant

Anthem angespielt: Action in fremder Welt und Abkühlung im Wasserfall
Anthem angespielt
Action in fremder Welt und Abkühlung im Wasserfall

E3 2018 Eine interessante Welt, schicke Grafik und ein erstaunlich gutes Fluggefühl: Golem.de hat das Actionrollenspiel Anthem von Bioware ausprobiert.

  1. Dying Light 2 Stadtentwicklung mit Schwung
  2. E3 2018 Eindrücke, Analysen und Zuschauerfragen
  3. Control Remedy Entertainment mit übersinnlichen Räumen

Hacker: Was ist eigentlich ein Exploit?
Hacker
Was ist eigentlich ein Exploit?

In Hollywoodfilmen haben Hacker mit Sturmmasken ein ganzes Arsenal von Zero-Day-Exploits, und auch sonst scheinen die kleinen Programme mehr und mehr als zentraler Begriff der IT-Sicherheit verstanden zu werden. Der Hacker Thomas Dullien hingegen versucht sich an einem theoretischen Modell eines Exploits.
Von Hauke Gierow

  1. IoT Foscam beseitigt Exploit-Kette in Kameras
  2. Project Capillary Google verschlüsselt Pushbenachrichtigungen Ende-zu-Ende
  3. My Heritage DNA-Dienst bestätigt Datenleck von 92 Millionen Accounts

    •  /