• IT-Karriere:
  • 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. Klinikum der Universität München, Großhadern
  2. Verwaltungs-Berufsgenossenschaft VBG gesetzliche Unfallversicherung, Hamburg

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Anzeige
Hardware-Angebote
  1. täglich neue Deals bei Alternate.de
  2. (reduzierte Überstände, Restposten & Co.)

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
       


Wo bleiben die E-Flugzeuge? (Interview mit Rolf Henke vom DLR)

Wir haben den Bereichsvorstand Luftfahrt beim DLR gefragt, was Alternativen zum herkömmlichen Flugzeug so kompliziert macht.

Wo bleiben die E-Flugzeuge? (Interview mit Rolf Henke vom DLR) Video aufrufen
Alternatives Android im Test: /e/ will Google ersetzen
Alternatives Android im Test
/e/ will Google ersetzen

Wie Google, nur mit Privatsphäre - /e/ verbindet ein alternatives Android mit Cloudfunktionen und einer Suchmaschine.
Ein Test von Moritz Tremmel


    Schenker Via 14 im Test: Leipziger Langläufer-Laptop
    Schenker Via 14 im Test
    Leipziger Langläufer-Laptop

    Dank 73-Wattstunden-Akku hält das 14-Zoll-Ultrabook von Schenker trotz fast komplett aufrüstbarer Hardware lange durch.
    Ein Test von Marc Sauter

    1. XMG Neo 15 (E20) Schenker erhöht Akkukapazität um 50 Prozent
    2. XMG Apex 15 Schenker packt 16C-Ryzen in Notebook
    3. XMG Fusion 15 Schenkers Gaming-Laptop soll 10 Stunden durchhalten

    Coronavirus: Spiele statt Schule
    Coronavirus
    Spiele statt Schule

    Wer wegen des Coronavirus mit Kindern zu Hause ist, braucht einen spannenden Zeitvertreib. Unser Autor - selbst Vater - findet: Computerspiele können ein sinnvolles Angebot sein. Vorausgesetzt, man wählt die richtigen.
    Von Rainer Sigl

    1. CCC "Contact Tracing als Risikotechnologie"
    2. Coronapandemie Robert Koch-Institut sammelt Gesundheitsdaten von Sportuhren
    3. Google Chrome rollt Regeln für Same-Site-Cookies vorerst zurück

      •  /