In eigener Sache: squeezr und iconizr

Veröffentlicht als Einblick
von Joschi Kuphalam

In den letzten Monaten habe ich mich ganz jenseits von konkreten Projekten intensiv mit verschiedenen Techniken auseinandergesetzt, die im weitesten Sinne eine Rolle spielen können, wenn es sich um das Design und die Entwicklung von Websites für mobile Endgeräte – oder vielleicht besser: für möglichst viele Endgeräte-Plattformen – dreht. Im Zuge dieser Auseinandersetzung sind verschiedene Tools entstanden, von denen ich heute das zweite veröffentlicht habe. Ich möchte die beiden kurz vorstellen.

squeezr – Adaptive Bilder und severseitige CSS3-Media-Queries

Der überwiegende Teil des Datenverkehrs im Zusammenhang mit Websites wird durch die Übertragung von Bildern hervorgerufen. Dabei benötigen insbesondere Geräte mit kleineren Bildschirmen – z.B. Smartphones – häufig nicht dieselbe Bildgröße und -qualität, wie sie für eine optimale Anzeige auf Desktop-Computern notwendig sind, da diese auf den kleinen Bildschirmen ohnehin nicht vollständig dargestellt werden können. So lässt sich nur allzu häufig beobachten, dass signifikant mehr Daten zu den Geräten übertragen werden, als in Wirklichkeit genutzt werden können. (Die zwischenzeitlich immer üblicheren, extrem hochauflösenden Displays, die Apple unter dem Namen "Retina-Displays" bekannt gemacht hat, stellen diese Erkenntnis leider teilweise wiederum auf den Kopf ...).

Genau hier setzt squeezr an: Mittels JavaScript werden die Display-Eigenschaften des Client-Browsers ermittelt und bei allen Bild- und CSS-Anfragen an den Server übermittelt, so dass dieser die ausgelieferten Daten an die Fähigkeiten des Client-Browsers anpassen kann. So werden

  • Bilder automatisch auf die Größe verkleinert, die auf dem jeweiligen Bildschirm maximal dargestellt werden kann, und
  • auszuliefernde CSS-Dateien bereits auf dem Server analysiert und solche Passagen entfernt, die ohnehin nur dann greifen würden, wenn der Bildschirm des Besuchers größer wäre, als er tatsächlich ist (es werden also bereits serverseitig die enthaltenen CSS3-Media-Queries quasi ausgewertet).

Mein persönlicher Ausgangspunkt für dieses Projekt war vor allem, dass ich es für unfassbar widersinnig hielt, dass selbst und gerade bei konsequent durchgezogenem "Mobile First"-Ansatz trotzdem auch auf die "schwachen" Endgeräte (also z.B. Mobiltelefone mit kleinem Bildschirm) zunächst alle CSS-Daten übertragen werden müssen, nur auf dass diese sodann entscheiden, dass sie nur zum Teil etwas mit den Daten anfangen können, weil bestimmte Passagen durch entsprechende @media-Queries ausschließlich Geräten mit größeren Bildschirmen vorbehalten sind. Es war also mein Anliegen, bildschirmgrößenbezogene Media-Queries bereits serverseitig auswerten und so irrelevante CSS-Daten eliminieren zu können.

Die Hinzunahme der zweiten Hauptfunktionalität – nämlich das automatische Verkleinern von Bildern gemäß der Fähigkeiten des Client-Bildschirms – schien da nur ein weiterer, konsequenter Schritt in dieselbe Richtung. Ich möchte an dieser Stelle auf Matt Wilcox' Adaptive Images verweisen, das mich bei der Ausgestaltung von squeezr stark inspiriert hat und im Bezug auf Bilder im Wesentlichen dasselbe tut. Allderdings habe ich bei der Umsetzung von squeezr versucht, eine Reihe von Problemen zu lösen, die ich mit Adaptive Images hatte, bspw. dass dort bei sprichwörtlich jedem Abruf einen Bildes PHP beteiligt sein muss, und das AI keine Unterstützung für transparente PNG-Bilder mit 8 Bit Farbtiefe hat.

Für den Einsatz von squeezr ist – abgesehen von der Einbindung eines kleinen JavaScripts in die HTML-Dokumente – keine Änderung am vorhandenen Quellcode einer Website notwendig, da nahezu alle Funktionalitäten serverseitig abgebildet werden. squeezr steht in einem GitHub-Repository zur freien Verfügung. Auf der Projektwebsite

lässt sich ein Testlauf mit jedem x-beliebigen, öffentlich zugänglichen URL durchführen.

iconizr – CSS & Sass icon kit creator · SVG & PNG sprite generator

In eine verwandte Kerbe schlägt mein heute veröffentlichter iconizr. Ausgangssituation ist hier, dass gerade den hochauflösenden "Retina"-Displays, die bei Smartphones und Tablet-Computern immer populärer werden, vergleichsweise hochqualitatives Bildmaterial zur Verfügung gestellt werden muss, so dass die Bilder optimal dargestellt werden können. Große Bilddimensionen korrespondieren dabei stets mit entsprechend großen Datenmengen – gerade im Bereich des mobilen Internet bisweilen ein echtes Problem ... (Fällt dabei jemandem etwas auf? Smartphone, Retina-Display, mobiles Internet, geringe Bandbreite ... ähhh?!).

Einen Ausweg stellt für bestimmte Anwendungsbereiche das vektobarsierte SVG-Format dar. SVG-Dateien sind grundsätzlich auflösungsunabhig (werden also auch auf Retina-Displays gut dargestellt) und lassen sich zur Übertragung vergleichsweise hervorragend komprimieren, da es sich um ein reines Textformat handelt (im Unterschied zum Binärformat von Bildern). Besonders relevant ist der Einsatz von SVG für Icons, da es sich hier häufig um einfache Geometrien und eingeschränkte Farbpaletten handelt. Leider können längst nicht alle Browser nativ SVG-Bilder darstellen (bspw. ältere Android- und Microsoft Internet Explorer-Versionen), jedoch kommen diese kaum auf neueren Geräten mit Retina-Displays zum Einsatz, so dass solche Plattformen mit PNG-Alternativen versorgt werden können, ohne Qualitätseinbußen in Kauf nehmen zu müssen.

Modell bei der Umsetzung von iconizr hat mir Scott Jehl's grunticon gestanden, das im Wesentlichen dieselbe Funktionalität abdeckt. Jedoch auch hier gibt es eine Reihe von kleinen, aber wichtigen Unterschieden zum Vorbild:

  • Im Gegensatz zu grunticon ist squeezr in PHP umgesetzt. Nicht, weil ich aus irgendeinem Grund der Meinung wäre, dass PHP die beste Wahl für diese Aufgabe ist, sondern schlicht, weil PHP das ist, womit ich mich am besten auskenne (und iconizr zunächst ein proof-of-concept war). Nebeneffekt: man benötigt keinen Node.js-Server zur Nutzung von iconizr.
  • iconizr opimiert sowohl SVG-Dateien (durch Entfernung überflüssiger SVG-Informationen), als auch die erzeugten PNG-Bilddateien hinsichtlich ihrer Dateigröße.
  • grunticon verwendet bevorzugt data URIs innerhalb von CSS-Daten für die Übertragung von Bildern. Data URIs haben – im Vergleich zur Nutzung regulärer, extern gelagerter Bilder – den Vorteil, keine zusätzlichen HTTP-Requests zu benötigen, um die jeweiligen Bilder darzustellen. Allerdings benötigt ein data URI per se mehr Datenvolumen zum Transport eines Bildes, als es das Bild selbst belegen würde. Zudem ist die Performance von data URIs nicht unbedingt unkritisch zu sehen. Schließlich unterstützen mance Browser (z.b. ältere Microsoft Internet Explorer-Versionen) data URIs nicht in jeder Größenordnung, so dass grunticon in einem solchen Fall auf extern gelagerte Einzelversionen der Icon-Dateien zurückfällt.

    Meine These dabei ist: In dem Moment, in dem für auch nur ein einziges Icon auf eine externe Datei zurückgegriffen werden muss, ist die Nutzung eines Icon Sprites für alle Icons effektiver als der Einsatz von data URIs. Da in solchen Fällen ohnehin ein zusätzlicher HTTP-Request benötigt wird, können auch gleich alle Bilder auf einmal (in einem Übertragungsvorgang) mit gleichzeitiger Bandbreitenersparnis aufgrund der binären Codierung übertragen werden. Die Arbeit mit sog. CSS-Sprites ist dabei sowohl für SVG-, als auch für PNG-Icons möglich.

Die Tatsache, dass iconizr SVG-Sprites generiert, scheint derzeit noch keine allzu übliche Technik zu sein – zumindest ist mir bislang noch kein weiterer SVG-Sprite-Generator bekannt. Auf der heute gelaunchten Projektwebsite

lassen sich mittels iconizr bequem online Icon-Kits erzeugen. Dazu müssen einfach nur die entsprechenden SVG-Icons hochgeladen und ein paar Einstellungen getroffen werden. Auch iconizr steht über ein GitHub-Repository zur freien Verfügung.

Feedback herzlich willkommen!

Bei beiden Projekte freue ich mich sehr über jeden, der sich als Tester anbietet oder das Tool einsetzt. Ich bitte darum, bei Fragen nicht zu zögern und sich direkt an mich zu wenden. Ich bin für jede Form von Feedback sehr dankbar! :)