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. DevOps System Engineer (w/m/d)
    DENIC eG, Frankfurt am Main
  2. IT Support/1st Line Support (m/w/d)
    Olenex Edible Oils GmbH, Brake, Hamburg
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.

Golem Akademie
  1. LDAP Identitätsmanagement Fundamentals: virtueller Drei-Tage-Workshop
    18.-20.07.2022, Virtuell
  2. Cinema 4D Grundlagen: virtueller Drei-Tage-Workshop
    04.-06.07.2022, Virtuell
Weitere IT-Trainings

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
Strange New Worlds Folge 1 bis 3
Star Trek - The Latest Generation

Strange New Worlds kehrt zu episodenhaften Geschichten zurück und will damit Star-Trek-Fans alter Schule abholen. Das gelingt mit Bravour. Achtung, Spoiler!
Eine Rezension von Oliver Nickel

Strange New Worlds Folge 1 bis 3: Star Trek - The Latest Generation
Artikel
  1. LTE-Patent: Ford droht Verkaufs- und Produktionsverbot in Deutschland
    LTE-Patent
    Ford droht Verkaufs- und Produktionsverbot in Deutschland

    Ford fehlen Mobilfunk-Patentlizenzen, weshalb das Landgericht München eine drastische Entscheidung gefällt hat. Autos droht sogar die Vernichtung.

  2. Flowcamper: Elektro-Wohnmobil Frieda Volt auf VW-Basis vorgestellt
    Flowcamper
    Elektro-Wohnmobil Frieda Volt auf VW-Basis vorgestellt

    Das elektrische Wohnmobil Frieda Volt basiert auf einem umgebauten Volkswagen T5 oder T6 und ist mit einem 72-kWh-Akku ausgerüstet.

  3. Cariad: Aufsichtsrat greift bei VWs Softwareentwicklung durch
    Cariad
    Aufsichtsrat greift bei VWs Softwareentwicklung durch

    Die Sorge um die Volkswagen-Softwarefirma Cariad hat den Aufsichtsrat veranlasst, ein überarbeitetes Konzept für die ehrgeizigen Pläne vorzulegen.

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 • Borderlands 3 gratis • CW: Top-Rabatte auf PC-Komponenten • Inno3D RTX 3070 614€ • Crucial P5 Plus 2 TB 229,99€ • Preis-Tipp: Kingston NV1 2 TB 129,90€ • AVM FRITZ!Repeater 1200 AX 69€ • MindStar (u. a. Palit RTX 3050 339€) • MMOGA (u. a. Total War Warhammer 3 29,49€) [Werbung]
    •  /