sebastian lochbronner
Menü

Das Lorem Ipsum für Bilder - ganz einfach Platzhalterbilder auf Websites einbinden

„Lorem ipsum“ ist wohl der bekannteste Blindtext schlechthin. Dieser hat keine spezielle Bedeutung, sondern soll helfen, einen Eindruck für das Layout zu gewinnen. Nun gibt es auch eine einfache Lösung für alle Webdesigner und -entwickler: Lorem Picsum.
13. Mai 2019

[vc_row css_animation="" row_type="row" use_row_as_full_screen_section="no" type="full_width" angled_section="no" text_align="left" background_image_as_pattern="without_pattern"][vc_column][vc_column_text]

„Lorem ipsum“ ist wohl der bekannteste Blindtext schlechthin. Dieser hat keine spezielle Bedeutung, sondern soll helfen, einen Eindruck für das Layout zu gewinnen. Nun gibt es auch eine einfache Lösung für alle Webdesigner und -entwickler: Lorem Picsum.

Einfache Platzhalter-Bilder in der passenden Größe

Die Verwendung ist denkbar einfach. Man hängt an die URL des Tools einfach die gewünschte Bildgröße (Breite und Höhe) an und schon erhält man ein passendes Platzhalterbild.

Beispiel für ein Bild mit der Breite 800px und der Höhe 600px:

https://pb.lochbronner.com/wp-content/uploads/2022/05/400.jpeg

Das daraus entstehende Bild sieht dann so aus:

Für quadratische Bilder reicht die einmalige Angabe der Seitenlänge:

https://picsum.photos/400

Bestimmtes Bild verwenden

Anstatt sich ein zufälliges Bild ausgeben zu lassen, kann man auch ein bestimmtes Motiv auswählen. Dafür muss in die URL  /id/{image} eingefügt werden, wobei {image} mit der Bild-ID ersetzt werden muss:

https://picsum.photos/id/1/200

Eine Liste mit allen Motiven findet ihr hier: Motiv-Liste Picsum

Weitere Funktionen

Graustufen

https://picsum.photos/200/300?grayscale

Unschärfe

https://picsum.photos/200/300/?blur

Der Grad der Unschärfe kann einen Wert zwischen 1 und 10 einnehmen:

https://picsum.photos/200/300/?blur=5

Filterkombinationen

Bild in Graustufen und mit Unschärfe:

https://picsum.photos/id/870/200/300?grayscale&blur=3

Weitere Funktionen können auf der offiziellen Website nachgesehen werden. Viel Spaß!

E-Mail senden
Sag hi!

Sebastian Lochbronner
86830 Schwabmünchen
Deutschland

Social

Lochbronner Design Studio goes codeblick - hier Artikel lesen