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.

Stellenmarkt
  1. Frontend Entwickler TS/JS (m/w/d)
    Grey Rook GmbH, Mülheim a. d. Ruhr
  2. Informationssicherheitsbeauf- tragter (m/w/d)
    Knappschaft Kliniken Service GmbH, Bochum
Detailsuche

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.

Golem Akademie
  1. Unreal Engine 4 Grundlagen: virtueller Drei-Tage-Workshop
    28. Februar–2. März 2022, Virtuell
  2. Unity Basiswissen: virtueller Drei-Tage-Workshop
    7.–9. Februar 2022, Virtuell
Weitere IT-Trainings

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.

Versionsverwaltung mit Git: Praxiseinstieg (mitp Professional)

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 / Themenstart

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

theFiend 30. Nov 2021 / Themenstart

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

o0tjay 29. Nov 2021 / Themenstart

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

xazzzu 29. Nov 2021 / Themenstart

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

droektar 29. Nov 2021 / Themenstart

80kB/500kB=16% Wow! Aus dem Text: Original 386 KB Triangula SVG 40,3 KB tip TRI 3,03 KB 3...

Kommentieren



Aktuell auf der Startseite von Golem.de
Open-Source-Sprachassistent Mycroft
Basteln mit Thorsten statt Alexa

Das US-Unternehmen Mycroft AI arbeitet an einem Open-Source-Sprachassistenten. Die Alexa-Alternative ist etwas für lange Winterabende.
Ein Praxistest von Thorsten Müller

Open-Source-Sprachassistent Mycroft: Basteln mit Thorsten statt Alexa
Artikel
  1. P50 Pocket: Huawei will für sein Klapp-Smartphone 1.300 Euro
    P50 Pocket
    Huawei will für sein Klapp-Smartphone 1.300 Euro

    Huawei bringt das P50 Pocket mit faltbarem Display nach Deutschland, ebenso das P50 Pro. Beide Smartphones sind preislich und von der Ausstattung her nicht konkurrenzfähig.

  2. Hosting: Hetzner erhöht Preise teils um 30 Prozent wegen Stromkosten
    Hosting
    Hetzner erhöht Preise teils um 30 Prozent wegen Stromkosten

    Die Server aus seiner Auktion kann der Hoster Hetzner offenbar nicht kostendeckend betreiben. Das könnte die ganze Branche betreffen.

  3. Pwnkit: Triviale Linux-Lücke ermöglicht Root-Rechte
    Pwnkit
    Triviale Linux-Lücke ermöglicht Root-Rechte

    Zum Ausnutzen der Sicherheitslücke in Polkit muss der Dienst nur installiert sein. Das betrifft auch Serversysteme. Exploits dürften schnell genutzt werden.

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 • RTX 3090 24GB 2.349€ • RTX 3070 Ti 8GB 1.039€ • 1TB SSD PCIe 4.0 127,67€ • RX 6900XT 16 GB 1.495€ • Razer Gaming-Tastatur 155€ • LG OLED 65 Zoll 1.599€ • Razer Gaming-Maus 39,99€ • RX 6800XT 16GB 1.229€ • Thrustmaster Ferrari Lenkrad 349,99€ • Razer Gaming-Stuhl 179,99€ [Werbung]
    •  /