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.

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


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...



Aktuell auf der Startseite von Golem.de
Star Wars
Holiday Special jetzt in 4K mit 60 fps

Eine bessere Story bekommt der legendär schlechte Film dadurch leider nicht. Bis heute lieben ihn einige Fans aber vor allem wegen seiner Absurdität.

Star Wars: Holiday Special jetzt in 4K mit 60 fps
Artikel
  1. Lohn und Gehalt: OpenAI-Entwickler verdienen bis zu 800.000 US-Dollar im Jahr
    Lohn und Gehalt
    OpenAI-Entwickler verdienen bis zu 800.000 US-Dollar im Jahr

    Die Firma hinter Chat-GPT zahlt im Vergleich zu Unternehmen wie Nvidia besonders gut. Erfahrene Forscher und Entwickler auf dem Gebiet sind Mangelware.

  2. Software-Probleme: Elektrischer Chevy Blazer mit Verkaufsstopp belegt
    Software-Probleme
    Elektrischer Chevy Blazer mit Verkaufsstopp belegt

    Chevrolet hat einen Verkaufsstopp für sein neues Elektro-SUV Blazer verhängt, weil die Besitzer zahlreiche Softwareprobleme gemeldet haben.

  3. USA: Vertikale Agri-Photovoltaik lässt weiterhin Feldnutzung zu
    USA
    Vertikale Agri-Photovoltaik lässt weiterhin Feldnutzung zu

    Das US-Solarunternehmen iSun und der deutschen Agrivoltaik-Firma Next2Sun bauen in den USA eine Solaranlage mit vertikal aufgestellten Solarmodulen.

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
    • Daily Deals • Crucial P5 Plus 2 TB mit Kühlkörper 114,99€ • Crucial Pro 32 GB DDR5-5600 79,99€ • Logitech G915 TKL LIGHTSYNC RGB 125,11€ • Anthem PC 0,99€ • Wochenendknaller bei MediaMarkt • MindStar: Patriot Viper VENOM 64 GB DDR5-6000 159€, XFX RX 7900 XT Speedster MERC 310 Black 789€ [Werbung]
    •  /