Einsatz von Triangula auf der Kommandozeile

Ryan bietet sein Programm Triangula auch als CLI-Version an, die über die Kommandozeile aufgerufen wird. Dabei ist der Prozess des Triangulierens in zwei Teile getrennt: Erst erzeugt man über den Parameter run die gewünschte Abstraktion eines Originalbildes, die in einer JSON-Datei auf der Festplatte abgelegt wird. In einem zweiten Schritt wird mittels render und der Angabe der JSON-Datei entweder ein PNG oder ein SVG als Ausgabedatei erstellt.

Da das Kommandozeilenwerkzeug die gleichen Optionen wie die UI-Version bietet, eignet es sich hervorragend, um die verwendeten Bilder zum Beispiel beim Build einer Webseite automatisiert zu verarbeiten. Auch ist es damit wesentlich einfacher, einen ganzen Ordner mit Bildern in solch künstlerische Abstraktionen zu verwandeln.

Triangulierte Bilder als Platzhalter auf Webseiten

Je nachdem, wie gut die Internetverbindung ist und der Verstand des Entwicklers einer Webseite gearbeitet hat, kann es schon mal etwas dauern, bis der Browser des Smartphones ein x Megabyte großes Header- oder Illustrationsbild geladen hat, um es endlich anzeigen zu können. Richtig nervig wird es, wenn auf der Webseite für das Bild zuvor kein Platz reserviert wurde und der Text, den man begonnen hat zu lesen, auf einmal weghüpft.

Die Lösung ist in jedem Fall, möglichst kleine und an das Gerät angepasste Bilder zu verwenden, aber selbst diese haben eine gewisse Dateigröße, wenn sie gut aussehen sollen. Um das Textspringen zu verhindern, verwendet man heutzutage meist graue Platzhalter mit oder ohne Ladebalken, um zu signalisieren, dass an dieser Stelle in Kürze etwas angezeigt wird.

Ryan hat auch hierfür eine erstaunlich effektive Lösung gefunden: tip - Triangulated Placeholders - zum Erstellen von kleinstmöglichen triangulierten Bildern und Überblenden mittels Javascript.

Basis ist ein ebenfalls in Go geschriebenes Frontend, das die gleichen Algorithmen wie Triangula verwendet und mit dem der Benutzer über die Oberfläche mehrere Originalbilder oder gleich einen ganzen Ordner mit Fotos auf einmal verarbeiten kann.

• 

Sehr simple, aber funktionale Oberfläche des ebenfalls in Go geschriebenen Tools tip zur Erzeugung von binären Platzhaltern für Webseiten (Bild: Kristof Zerbe)

Ausgabeformat bei tip ist aber kein PNG oder SVG, sondern eine binäre Datei, die von allen technischen Möglichkeiten am wenigsten Speicherplatz verbraucht.

Zum Vergleich die erzeugten Dateigrößen des Beispielbildes mit der Auflösung 1.024 x 660 Pixel:

BILD	GRÖßE
Original	386 KB
Triangula PNG	223 KB
Triangula SVG	40,3 KB
tip TRI	3,03 KB

Die Dateien mit der Endung TRI werden vom Webentwickler im IMG-Tag eines Bildes einer Seite im Attribut data-src referenziert. Ein nur 200 Zeilen langes Javascript, das ebenfalls eingebunden und mit der Webseite ausgeliefert wird, kümmert sich um die sofortige Anzeige dieser TRI-Datei beim Laden der Seite und das sanfte Überblenden auf das Originalbild, sobald es geladen wurde. Schöner kann man es kaum machen.

• 

Tulpen im Vergleich: oben das Originalbild, in der Mitte das PNG-Bild, unten das SVG-Bild (Bild: Kristof Zerbe)

Kristof Zerbe arbeitet seit über 25 Jahren in der IT in unterschiedlichsten Rollen wie Freelancer, Administrator, Datenbankentwickler, Coach, Web-Entwickler, Architekt, DevOps-Engineer, Analyst, Team-Lead sowie aktuell IT-Manager und Führungskraft. Seine technologischen Schwerpunkte sind Web und Microsoft.