Abo
  • Services:
Anzeige
Webhack: Javascript und CSS per PNG packen

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.

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.

Anzeige

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.


eye home zur Startseite
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?



Anzeige

Stellenmarkt
  1. Elementis Services GmbH, Köln
  2. DPD Deutschland GmbH, Aschaffenburg, Hamburg
  3. Deutsche Post DHL Group, Bonn
  4. NOVENTI HealthCare GmbH, Aschheim


Anzeige
Spiele-Angebote
  1. (-8%) 45,99€
  2. 1,99€
  3. 15,29€

Folgen Sie uns
       

  1. Kabelnetz

    Vodafone setzt bereits Docsis 3.1 beim Endkunden ein

  2. Neuer Standort

    Amazon sucht das zweite Hauptquartier

  3. Matt Booty

    Mr. Minecraft wird neuer Spiele-Chef bei Microsoft

  4. Gerichtsurteil

    Internet- und Fernsehkunden müssen bei Umzug weiterzahlen

  5. Sicherheitsupdate

    Microsoft-Compiler baut Schutz gegen Spectre

  6. Facebook Messenger

    Bug lässt iPhone-Nutzer nur wenige Wörter tippen

  7. Multi-Shot-Kamera

    Hasselblad macht 400-Megapixel-Fotos mit 2,4 GByte Größe

  8. Mitsubishi

    Rückkamera identifiziert Verkehrsteilnehmer

  9. Otherside Entertainment

    Underworld Ascendant soll mehr Licht ins Dunkle bringen

  10. Meltdown und Spectre

    "Dann sind wir performancemäßig wieder am Ende der 90er"



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Security: Das Jahr, in dem die Firmware brach
Security
Das Jahr, in dem die Firmware brach
  1. Wallet Programmierbare Kreditkarte mit ePaper, Akku und Mobilfunk
  2. Fehlalarm Falsche Raketenwarnung verunsichert Hawaii
  3. Asynchronous Ratcheting Tree Facebook demonstriert sicheren Gruppenchat für Apps

Computerforschung: Quantencomputer aus Silizium werden realistisch
Computerforschung
Quantencomputer aus Silizium werden realistisch
  1. Tangle Lake Intel zeigt 49-Qubit-Chip
  2. Die Woche im Video Alles kaputt
  3. Q# und QDK Microsoft veröffentlicht Entwicklungskit für Quantenrechner

Netzsperren: Wie Katalonien die spanische Internetzensur austrickste
Netzsperren
Wie Katalonien die spanische Internetzensur austrickste

  1. Re: Deutschland geht bald Pleite

    Kakiss | 23:00

  2. Re: Grüner Populisten Bullshit

    Der Held vom... | 23:00

  3. Re: Inklusive Plug-In Hybriden? Das ist bitter

    freebyte | 22:59

  4. Re: Die Gier ist unermesslich

    picaschaf | 22:52

  5. Warum sollte das auch anders sein?

    Apfelbrot | 22:51


  1. 19:09

  2. 16:57

  3. 16:48

  4. 16:13

  5. 15:36

  6. 13:15

  7. 13:00

  8. 12:45


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel