Platzhalterbild
Placeholder Image
Erzeugt ein einfarbiges oder mit Verlauf gefülltes Platzhalterbild in beliebiger Größe, mit eingezeichneten Abmessungen.
Ein graues Kästchen in genau der Größe, die Sie brauchen, mit den Abmessungen daraufgezeichnet – für ein Layout, das auf echte Fotos wartet. Es kommt als SVG-Data-URI heraus, die Sie direkt in CSS einfügen können, kleiner als jedes PNG und ohne eine einzige Anfrage.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
SVG-Data-URI
580 ByteProzentkodiert statt base64: rund 25 % kleiner, und noch lesbar. Fügen Sie es direkt ein in background-image: url("…")
So funktioniert es
Legen Sie die Größe fest
Die genauen Pixelmaße des Platzes. Mit eingeschalteter Beschriftung werden sie auf das Bild gezeichnet, was ein falsch dimensioniertes Kästchen in einem Layout offensichtlich macht.
Wählen Sie einfarbig, Verlauf oder Rauschen
Einfarbig und Verlauf bleiben SVG. Rauschen muss ein PNG sein, weil ein Zufallsfeld pro Pixel als SVG Megabytes an Rechtecken wäre.
Kopieren Sie die Data-URI
Prozentkodiert statt Base64: etwa 25 % kleiner und im Stylesheet weiterhin lesbar.
Häufige Fragen
Warum ist die SVG-Version für Rauschen nicht verfügbar?
Weil SVG kein Zufallsprimitiv pro Pixel hat, das über Engines hinweg identisch rendert. Es wörtlich auszudrücken heißt ein Rechteck pro Pixel, was bei einem 400×300-Kästchen 120.000 Elemente sind.
Ändert sich das Rauschen jedes Mal?
Nein – es ist geseedet, sodass dieselben Einstellungen dasselbe Bild ergeben. Ein Platzhalter, der sich bei jedem Rendern änderte, würde eine visuelle Regressionssuite nutzlos machen.
Kann ich die in Produktion verwenden?
Die Data-URI ja – sie ist ein paar hundert Bytes und liefert nie einen 404, was man von einem Drittanbieter-Platzhalterdienst nicht sagen kann. Denken Sie nur daran, sie zu entfernen, denn ein ausgelieferter Platzhalter ist im Code-Review unsichtbar.
Eingabe aus
BlurHash / ThumbHash erzeugen
BlurHash / ThumbHash
Kodiert ein Bild in eine kurze BlurHash- oder ThumbHash-Zeichenkette, die als Lade-Platzhalter dient.
Lorem-Ipsum-Generator
Lorem Ipsum Generator
Erzeugt Platzhalterabsätze, -sätze oder -wörter auf Latein, Englisch, Koreanisch, Japanisch oder Chinesisch.
Avatar-Generator
Avatar Generator
Erzeugt aus Name oder E-Mail ein deterministisches Identicon oder einen Initialen-Avatar, als SVG oder PNG.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
BlurHash / ThumbHash erzeugen
BlurHash / ThumbHash
Kodiert ein Bild in eine kurze BlurHash- oder ThumbHash-Zeichenkette, die als Lade-Platzhalter dient.
Geräte-Mockup
Device Mockup
Setzt einen Screenshot in einen Smartphone-, Tablet-, Laptop- oder Browser-Rahmen mit Hintergrund und Schatten.
Bild in Base64 / Data-URI
Image to Base64 / Data URI
Kodiert ein Bild als Base64-Zeichenkette oder als fertige Data-URI für CSS, HTML oder JSON.
Hintergrund entfernen
Background Remover
Stellt ein Motiv vor einfarbigem Hintergrund per OKLab-Keying frei – ohne Upload, komplett im Browser – und liefert ein transparentes PNG samt Pinsel zum Nachbessern der Kanten.
EXIF-Daten entfernen
EXIF Remover
Entfernt Kamera-, GPS- und Bearbeitungsmetadaten aus Fotos, ohne die Pixel anzurühren – ohne Upload, komplett im Browser.
Favicon-Generator
Favicon Generator
Erzeugt den kompletten Favicon-Satz – ICO, PNGs, Apple-Touch-Icon, Web-Manifest – samt HTML zum Einfügen.