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. Fachgruppenleitung Informations- und Kommunikationstechnologien (w/m/d)
    Bundesinstitut für Risikobewertung, Berlin
  2. Developer (w/m/d) PIM- / BMEcat-Systeme
    Keller & Kalmbach GmbH, Unterschleißheim
Detailsuche

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


Aktuell auf der Startseite von Golem.de
Hubble
Uralttechnik ohne Ersatz versagt im Orbit

Das Hubble-Teleskop ist außer Betrieb. Die Speicherbänke aus den 1980er Jahren lassen sich nicht mit der CPU von 1974 ansprechen, die auf einer Platine zusammengelötet wurde.
Von Frank Wunderlich-Pfeiffer

Hubble: Uralttechnik ohne Ersatz versagt im Orbit
Artikel
  1. Batteriezellfabrik: Porsche will Hochleistungsakkus mit Silizium-Anoden bauen
    Batteriezellfabrik
    Porsche will Hochleistungsakkus mit Silizium-Anoden bauen

    Akkus für nur 1.000 Elektroautos im Jahr will Porsche mit der neuen Tochterfirma Cellforce bauen. Vor allem für den Motorsport.

  2. Pornografie: Hostprovider soll Xhamster sperren
    Pornografie
    Hostprovider soll Xhamster sperren

    Medienwächter haben den Hostprovider von Xhamster ausfindig gemacht. Dieser soll das Pornoportal für deutsche Nutzer sperren.

  3. SSDs und Monitore zum Knallerpreis beim Amazon Prime Day
     
    SSDs und Monitore zum Knallerpreis beim Amazon Prime Day

    Wer auf der Suche nach neuer Hardware ist, sollte den Prime Day von Amazon nutzen. Hier warten Rabatte auf alle möglichen Artikel.
    Ausgewählte Angebote des E-Commerce-Teams

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
       


Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Schnäppchen • Amazon Prime Day • SSDs (u. a. Crucial MX500 1TB 75,04€) • Gaming-Monitore • RAM von Crucial • Fire TV Stick 4K 28,99€/Lite 18,99€ • Bosch Professional • Dualsense + Pulse 3D Headset 139,99€ • Gaming-Chairs von Razer uvm. • HyperX Cloud II 51,29€ • iPhone 12 128GB 769€ • TV OLED & QLED [Werbung]
    •  /