Table of Contents

Lorem Ipsum kennt jeder. Das sind diese lateinisch anmutenden Texte, die man als Platzhalter verwenden kann. Zu einem richtigen Layout gehören aber nicht nur Texte, sondern auch Bilder. Doch woher nehmen, wenn nicht stehlen? Lorem Picsum heißt die Antwort naheliegenderweise. Dabei handelt es sich um eine kostenlose und unkomplizierte API, um Bilder in deine Seite bzw. dein Layout einzubinden. Die Bilder werden dabei bei jedem Aufruf zufällig neu ausgewählt:

Das schöne: Du kannst die Bilder relativ zielgenau aussuchen. Egal, ob du ein quadratisches Format oder monochrome Bilder benötigst: Über die entsprechenden Parameter kannst du festlegen, welche Art von Platzhalter-Bild du einbinden willst:

Die Größe des Bildes wird über die letzten beiden Pfad-Elemente definiert, wenn du nur eine Ziffer eingibst, erhälst du ein quadratisches Bild.

1https://picsum.photos/300/400
2https://picsum.photos/500

Ein zufälliges Bild mit den Abmessungen 300 x 400 Pixel

Ein zufälliges quadratisches Bild mit der Kantenlänge 400 Pixel

Über zusätziche Get-Parameter kannst du weitere Eigenschaften des Bildes beeinflussen, wie z.B. die Farbe oder die Unschräfe. Den Grad der Unschärfe kannst du nach Belieben zwischen 1 und 10 einstellen. Die Parameter lassen sich natürlich auch kombinieren:

1https://picsum.photos/100/200?grayscale
2https://picsum.photos/200/300/?blur
3https://picsum.photos/200/300/?blur=2
4https://picsum.photos/id/948/100/200?blur=10&grayscale

Ein zufälliges, farbloses Bild mit einem Unschärfefaktor von 10

Auf der Seite des Anbieters finden sich noch ein paar andere Paramter, um z.B. eine Liste von verfügbaren Bildern auszugegeben oder ein bestimmtes Bild per ID anzusprechen.

Alter Hut

Tatsächlich ist die Idee gar nicht mal so neu. Seit mindestens 2012 gibt es http://lorempixel.com und es gibt noch eine ganze Reihe mehr, u.a. das berüchtigte Bacon-Mockup.

Zusammenfassung

Dieser Artikel stellt 'Lorem Picsum' vor, eine kostenlose und unkomplizierte API zur Generierung zufälliger Platzhalterbilder für Webentwicklung und Design. Er erläutert die Nutzung der API zur Festlegung von Bildabmessungen und zur Anwendung von Filtern wie Graustufen und Unschärfe, und verweist auf ähnliche Dienste.


Hauptthemen: Web Development Design Tools Placeholder Images API Front-end Development Image Generation Freeware

Schwierigkeitsgrad: beginner

Lesezeit: ca. 5 Minuten