Image Placeholder APIs

Stellt man eine Seite für ein Preview online (noch schlimmer sind an der Stelle Apps / Communities), rennt man sehr schnell in das Problem, dass man Bilder braucht, keine hat und der Kunde stundenlang über so etwas diskutieren kann. Da man Bilder ja eigentlich nicht mehr hart in die HTML-Seite setzen sollte (für so etwas hat der liebe Gott das CMS erfunden), aber etwas braucht damit man sieht wie es werden soll, wirft man irgendwas rein – mit ein bisschen Glück sogar ohne Copyright ;) Muss man aber nicht – für so etwas gibt es analog Lorem Ipsum die Image Placeholder APIs.

Screenshot von Placekitten

In der Regel ist die Verwendung dieser APIs recht einfach, man braucht nämlich nur einen entsprechenden IMG-Src mit der Größe des Bildes als Parameter verwenden, am Beispiel von Placekitten wäre ein passendes Bild in der Größe 200×300 wie folgt definiert:

<img src="http://placekitten.com/200/300" alt="Place Kitten" />

Aber natürlich gibt es an der Stelle noch viel mehr APIs

Hunde:

Screenshot von Placedog.com
<img src="http://placedog.com/g/200/300" alt="Place Dog" />

Bacon:

Screenshot von baconbmockup.com
<img src="http://baconmockup.com/200/300" alt="Bacon Mockup" />

Ganz einfache / neutrale Platzhalter:

Screenshot von Placehold.it
<img src="http://placehold.it/200x400" alt="Placehold.it" />

Für besonders nette Kunden gibt es auch Totenköpfe:

Screenshot von Placeskull.com
<img src="http://placeskull.com/170/170" />

Die Auswahl ist fast unendlich, wenn ihr noch was nettes zu dem Thema habt schreibt einfach mal einen Kommentar. Dummies müssen nicht immer langweilig sein, ob sie Totenköpfe brauchen sei dahin gestellt ;)

Eine Antwort auf „Image Placeholder APIs“

  1. Ein sehr schöner Service, den wir auch oft einsetzen um dem Kunden ersteinmal das Grundlayout im Browser zu visualisieren ist http://lorempixel.com – dort kann man nicht nur die Größe per Link / REST-API bestimmen in der die Bilder angezeigt werden sollen, sondern auch eine bestimmte Bildkategorie und/oder die Ausgabe in Schwarz-Weiß über den Link ansteuern.

    Supernützliches Tool! :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.