Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 8. September 2015

Unsplash.it: Platzhalterfotos von Unsplash.com nutzen

Unter Unsplash.com fin­det man alle zehn Tage jeweils zehn neue kos­ten­los ver­wend­ba­re Fotos. Mit Unsplash.it kann man die­se Fotos bequem und unkom­pli­ziert als Platzhalter in Webprojekten bezie­hungs­wei­se für Entwürfe ver­wen­den. Dabei lässt sich die Auflösung der Platzhalterfotos frei defi­nie­ren. Außerdem sind wei­te­re nütz­li­che Funktionen vor­han­den, die den Dienst inter­es­sant machen.

unsplash-it_screenshot

Einfache Syntax zum individuellen Einbinden

Um eines der der­zeit über 700 zur Verfügung ste­hen­den Fotos nut­zen zu kön­nen, genügt der Aufruf einer ein­fa­chen URL, bei der die Auflösung des Bildes mit über­ge­ben wird.

https://unsplash.it/640/425

unsplash-it_beispiel
Exemplarisches Foto

Das Beispiel ruft ein bestimm­tes Foto von Unsplash.com auf und ska­liert es auf eine Größe von 640 mal 425 Pixel. Bei einem abwei­chen­den Seitenverhältnis zur Originaldatei wird das Bild bei Bedarf beschnit­ten. Bei qua­dra­ti­schen Formaten genügt es übri­gens auch, nur einen Wert zur über­ge­ben.

https://unsplash.it/640

Über den Parameter „gra­vi­ty“ kann man zudem ein­stel­len, an wel­chen Rändern das Foto nicht beschnit­ten wer­den soll. Der Wert „east“ sorgt zum Beispiel dafür, dass ein Bild am rech­ten Rand nicht beschnit­ten wer­den soll. Es ste­hen einem alle vier Himmelsrichtungen als Wert zur Verfügung. Gerade wenn der inhalt­li­che Fokus des Bildes nicht in der Bildmitte liegt, ist die­ser Parameter sehr nütz­lich.

unsplash-it_beispiel_gravity
Beschnittenes Foto ohne und mit „gravity“-Parameter

https://unsplash.it/640?gravity=east

Wer stets wech­seln­de Fotos dar­ge­stellt haben will, kann sich auch immer zufäl­lig ein ande­res wie­der­ge­ben las­sen.

https://unsplash.it/640/425?random

Dazu muss ein­fach als Paramter das Schlüsselwort “ran­dom” über­ge­ben wer­den.

Bestimmtes Bild aussuchen

Nicht immer will man ein zufäl­li­ges Bild in einer Website ein­ge­bun­den haben. Daher besteht auch die Möglichkeit, ein kon­kre­tes Bild ein­zu­bin­den. Auf Unsplash.it gibt es eine Liste aller ver­füg­ba­ren Fotos samt ihrer ID, über die man die­se auf­ru­fen kann. Die ID wird über den Parameter „image“ über­ge­ben.

https://unsplash.it/640/425?image=40

Die Bandbreite der Fotos lässt sich durch­aus sehen. Es gibt Architektur, Natur und Vieles aus Alltag und Berufswelt. Insgesamt sind die Fotos alle recht all­ge­mein gehal­ten, sodass sie sich bes­tens als Platzhalter eig­nen.

Graustufen und Unschärfe

Unsplash.it bie­tet zusätz­lich zwei Effekte an, mit denen man Fotos bear­bei­ten kann. So kann man ein Foto in Graustufen dar­stel­len las­sen oder mit einer Unschärfe ver­se­hen. Ein Graustufenbild erhält man, indem der Buchstabe „g“ vor der Breiten- und Höhenangabe in der URL über­ge­ben wird.

https://unsplash.it/g/640/425

Den Unschärfeeffekt fügt man per Parameter „blur“ hin­zu.

https://unsplash.it/640/425?blur

unsplash-it_effekte
Foto ohne und mit Effekten

Die unter­schied­li­che Syntax für die bei­den Effekte ist ein wenig inkon­sis­tent, aber ins­ge­samt den­noch ein­fach. Auch eine Kombination bei­der Effekte ist mög­lich.

Fotos als JSON-Liste

Der Dienst stellt auch alle Fotos als Liste in Form eines JSON-Objektes zur Verfügung. Enthalten sind neben der URL zum Bild auch Name des Fotografen sowie die Auflösung des Bildes. Über ein eige­nes Script kann man dann zum Beispiel auf die­se Liste zurück­grei­fen.

Fazit und Link zum Beitrag

Aufgrund der ein­fa­chen Lizenz, die einem wei­test­ge­hen­de Freiheit beim Einsatz der Fotos ermög­licht, muss man sich auch beim Einbinden als Platzhalter kei­ne Gedanken dar­um machen. Daher ist der Dienst sowohl tech­nisch, als auch recht­lich ein­fach hand­zu­ha­ben. Außerdem wer­den alle Dateien über eine siche­re Verbindung über­tra­gen, was mitt­ler­wei­le ja auch nicht ganz unwich­tig ist.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare

  1. Moin,

    eine klei­ne Korrektur. Alle 10 Tage kom­men 10 neue “Featured” Photos dazu. Drückt man statt­des­sen oben Links auf “New” wer­den es ers­tens deut­lich mehr Bilder und es kom­men qua­si täg­lich neue dazu. “10 new pho­tos every 10 days” kommt ja aus den Anfangstagen und ist jetzt etwas miss­ver­ständ­lich. Hab da auch ein Bild lie­gen https://unsplash.com/lobostudiohamburg.

  2. Also unsplash.it funk­tio­niert jetzt bei mir lei­der nicht. Aber unsplash.com ist ja auf jeden Fall ein guter Tipp. Die Bilder sind ja echt von sehr guter Qualität. Kein Vergleich zu Pixelio zB.

Schreibe einen Kommentar

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