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. Versicherungskammer Bayern, Saarbrücken, München
  2. Haufe Group, Stuttgart

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
Blu-ray-Angebote
  1. (u. a. John Wick, Sicario, Deepwater Horizon, Die große Asterix Edition, Die Tribute von Panem)

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
       


Amazons Kindle Paperwhite (2018) - Hands on

Amazons neue Version des Kindle Paperwhite steckt in einem wasserdichten Gehäuse. Außerdem unterstützt der E-Book-Reader Audible-Hörbücher und hat mehr Speicher bekommen. Das neue Modell ist zum Preis von 120 Euro zu haben.

Amazons Kindle Paperwhite (2018) - Hands on Video aufrufen
Augmented Reality: Das AR-Fabrikgelände aus dem Smartphone
Augmented Reality
Das AR-Fabrikgelände aus dem Smartphone

Derzeit ist viel von einer Augmented Reality Cloud die Rede. Golem.de hat mit dem Berliner Startup Visualix über den Stand der Technik und künftige Projekte für Unternehmenskunden gesprochen - und darüber, was die Neuerungen für Pokémon Go bedeuten könnten.
Ein Interview von Achim Fehrenbach

  1. Jarvish Motorradhelm bringt Alexa in den Kopf
  2. Patentantrag Apple plant Augmented-Reality in der Windschutzscheibe
  3. Magic Leap Lumin OS Erste Bilder des Betriebssystems für Augmented Reality

Neuer Echo Dot im Test: Amazon kann doch gute Mini-Lautsprecher bauen
Neuer Echo Dot im Test
Amazon kann doch gute Mini-Lautsprecher bauen

Echo Dot steht bisher für muffigen, schlechten Klang. Mit dem neuen Modell zeigt Amazon, dass es doch gute smarte Mini-Lautsprecher mit dem Alexa-Sprachassistenten bauen kann, die sogar gegen die Konkurrenz von Google ankommen.
Ein Test von Ingo Pakalski


    Mate 20 Pro im Hands on: Huawei bringt drei Brennweiten und mehr für 1.000 Euro
    Mate 20 Pro im Hands on
    Huawei bringt drei Brennweiten und mehr für 1.000 Euro

    Huawei hat mit dem Mate 20 Pro seine Dreifachkamera überarbeitet: Der monochrome Sensor ist einer Ultraweitwinkelkamera gewichen. Gleichzeitig bietet das Smartphone zahlreiche technische Extras wie einen Fingerabdrucksensor unter dem Display und einen sehr leistungsfähigen Schnelllader.
    Ein Hands on von Tobias Költzsch

    1. Keine Spionagepanik Regierung wird chinesische 5G-Ausrüster nicht ausschließen
    2. Watch GT Huawei bringt Smartwatch ohne Wear OS auf den Markt
    3. Ascend 910/310 Huaweis AI-Chips sollen Google und Nvidia schlagen

      •  /