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.

  • Tulpen im Vergleich: oben das Originalbild, in der Mitte das PNG-Bild, unten das SVG-Bild (Bild: Kristof Zerbe)
  • 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)
  • Oberfläche des in Go geschriebenen Tools Triangula (Bild: Kristof Zerbe)
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)
  • 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)
  • Oberfläche des in Go geschriebenen Tools Triangula (Bild: Kristof Zerbe)
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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
 Bildbearbeitungstool bei Github: Triangula und die Schönheit der Mathematik
  1.  
  2. 1
  3. 2


KristofZ 30. Nov 2021

Ja, es gibt eine Online-Demo, die auf der Github-Seite verlinkt ist, aber kaum Optionen...

theFiend 30. Nov 2021

Also auf nem AMD 5800x läuft es recht problemlos und fott...

o0tjay 29. Nov 2021

sind das false positives? virustotal_com/gui/file...

xazzzu 29. Nov 2021

"Je nachdem, wie gut die Internetverbindung ist und der Verstand des Entwicklers einer...



Aktuell auf der Startseite von Golem.de
Streamer
Rocket Beans muss in Kurzarbeit

Der Gaming-Kanal Rocket Beans hat wirtschaftliche Schwierigkeiten. Mitarbeiter müssen in Kurzarbeit, einige Sendungen entfallen.

Streamer: Rocket Beans muss in Kurzarbeit
Artikel
  1. Era 100, Era 300 und Move 2: Neue Sonos-Lautsprecher mit Raumklangtechnik kommen
    Era 100, Era 300 und Move 2
    Neue Sonos-Lautsprecher mit Raumklangtechnik kommen

    Mindestens zwei kommende Sonos-Lautsprecher sollen eine neue Soundarchitektur erhalten, mit der der Klang in alle Richtungen abgestrahlt wird.

  2. Künstliche Intelligenz: So funktioniert ChatGPT
    Künstliche Intelligenz
    So funktioniert ChatGPT

    Das mächtige Sprachmodell ChatGPT erzeugt Texte, die sich kaum von denen menschlicher Autoren unterscheiden lassen. Wir erklären die Technologie hinter dem Hype.
    Ein Deep Dive von Helmut Linde

  3. Apple: iPhone 15 soll bidirektional Zubehör laden können
    Apple
    iPhone 15 soll bidirektional Zubehör laden können

    Apple soll eine Funktion für das iPhone 15 planen, mit der das Smartphone andere Geräte kabellos aufladen kann.

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 • MindStar: Zotac RTX 4070 Ti 949€, XFX RX 6800 519€ • RAM im Preisrutsch • Powercolor RX 7900 XTX 1.195€ • AMD Ryzen 7 5800X3D 335,99€ • Lenovo Tab P11 Plus 249€ • Logitech G915 Lightspeed 219,89€ • PCGH Cyber Week [Werbung]
    •  /