Transparente PNG-Platzhalter mit convert erzeugen

Platzhalter ohne tatsächlichen Inhalt werden in der Web-Entwicklung noch immer verwendet, da viele verschiedene Mechaniken nicht einheitlich oder schlichtweg unterschiedlich agieren. Dies betrifft besonders Elemente die drei Wünsche gleichzeitig erfüllen müssen: Seitenverhältnis beibehalten, abwärtskompatibel sein und responsive darstellbar.

Abhängig vom Verwendungszweck gibt es verschiedene Variationen, mit denen wir arbeiten können. Hier einige Beispiele für ein Bild mit den Maßen 1920x1080 Pixel:

Als ersten Schritt erzeugen wir eine einfache PNG-Datei:

convert -size 1920x1080 xc:transparent 1920x1080.png

Durch die minimale Größe dieser Dateien bietet es sich an diese Dateien inline mit dem HTML auszuliefern. Dies verhindert zusätzliche Netzwerkanfragen und beschleunigt die Zeit zur Auslieferung erheblich (solange es in Maßen genutzt wird). Außerdem kann es helfen den sogenannten Cumulative Layout Shift (CLS), also springende Seitenelemente die nicht durch Benutzerinteraktionen ausgelöst werden, zu verringern.

Um eine Datei in eine Inline-Version umzuwandeln, behelfen wir uns dem Befehl base64:

echo "data:image/png;base64,$(base64 -w 0 1920x1080.png)"

Die Ausgabe kann nun einfach in einem <img>-Tag verwendet werden:

<img src="data:image/png;base64,iVBORw0KGg...">

Wir können die bisherigen Befehle auch zusammenbringen, um mit einer Variante zu arbeiten, die keine temporäre Datei benötigt:

echo "data:image/png;base64,$(convert -size 1920x1080 xc:transparent png:- | base64 -w 0)"

Der hier verwendete Parameter xc: ist heute als Leinwand oder Canvas zu verstehen, auch wenn seine Bedeutung früher X Constant Image war. Als Parameter kann eine bestehende Farbe oder ein Farbcode als HEX-Wert. Es gibt auch eine Seite die bei der Umwandlung in verschiedene Formate hilft.

Frau bearbeitet Bilddatei auf Mac ohne Adobe-Produkte.
Wir umschiffen das Thema "warum" direkt.