Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Bilder & Vektorgrafiken bearbeiten » Unsplash.it: Platzhalterfotos von Unsplash.com nutzen

Unsplash.it: Platzhalterfotos von Unsplash.com nutzen

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 8. September 2015

Inhaltsverzeichnis

Unter Unsplash.com findet man alle zehn Tage jeweils zehn neue kostenlos verwendbare Fotos. Mit Unsplash.it kann man diese Fotos bequem und unkompliziert als Platzhalter in Webprojekten beziehungsweise für Entwürfe verwenden. Dabei lässt sich die Auflösung der Platzhalterfotos frei definieren. Außerdem sind weitere nützliche Funktionen vorhanden, die den Dienst interessant machen.

unsplash-it_screenshot

Einfache Syntax zum individuellen Einbinden

Um eines der derzeit über 700 zur Verfügung stehenden Fotos nutzen zu können, genügt der Aufruf einer einfachen URL, bei der die Auflösung des Bildes mit übergeben wird.

https://unsplash.it/640/425

unsplash-it_beispiel
Exemplarisches Foto

Das Beispiel ruft ein bestimmtes Foto von Unsplash.com auf und skaliert es auf eine Größe von 640 mal 425 Pixel. Bei einem abweichenden Seitenverhältnis zur Originaldatei wird das Bild bei Bedarf beschnitten. Bei quadratischen Formaten genügt es übrigens auch, nur einen Wert zur übergeben.

https://unsplash.it/640

Über den Parameter „gravity“ kann man zudem einstellen, an welchen Rändern das Foto nicht beschnitten werden soll. Der Wert „east“ sorgt zum Beispiel dafür, dass ein Bild am rechten Rand nicht beschnitten werden soll. Es stehen einem alle vier Himmelsrichtungen als Wert zur Verfügung. Gerade wenn der inhaltliche Fokus des Bildes nicht in der Bildmitte liegt, ist dieser Parameter sehr nützlich.

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

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

Wer stets wechselnde Fotos dargestellt haben will, kann sich auch immer zufällig ein anderes wiedergeben lassen.

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

Dazu muss einfach als Paramter das Schlüsselwort „random“ übergeben werden.

Bestimmtes Bild aussuchen

Nicht immer will man ein zufälliges Bild in einer Website eingebunden haben. Daher besteht auch die Möglichkeit, ein konkretes Bild einzubinden. Auf Unsplash.it gibt es eine Liste aller verfügbaren Fotos samt ihrer ID, über die man diese aufrufen kann. Die ID wird über den Parameter „image“ übergeben.

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

Die Bandbreite der Fotos lässt sich durchaus sehen. Es gibt Architektur, Natur und Vieles aus Alltag und Berufswelt. Insgesamt sind die Fotos alle recht allgemein gehalten, sodass sie sich bestens als Platzhalter eignen.

Graustufen und Unschärfe

Unsplash.it bietet zusätzlich zwei Effekte an, mit denen man Fotos bearbeiten kann. So kann man ein Foto in Graustufen darstellen lassen oder mit einer Unschärfe versehen. Ein Graustufenbild erhält man, indem der Buchstabe „g“ vor der Breiten- und Höhenangabe in der URL übergeben wird.

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

Den Unschärfeeffekt fügt man per Parameter „blur“ hinzu.

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

unsplash-it_effekte
Foto ohne und mit Effekten

Die unterschiedliche Syntax für die beiden Effekte ist ein wenig inkonsistent, aber insgesamt dennoch einfach. Auch eine Kombination beider Effekte ist möglich.

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 eigenes Script kann man dann zum Beispiel auf diese Liste zurückgreifen.

Fazit und Link zum Beitrag

Aufgrund der einfachen Lizenz, die einem weitestgehende Freiheit beim Einsatz der Fotos ermöglicht, muss man sich auch beim Einbinden als Platzhalter keine Gedanken darum machen. Daher ist der Dienst sowohl technisch, als auch rechtlich einfach handzuhaben. Außerdem werden alle Dateien über eine sichere Verbindung übertragen, was mittlerweile ja auch nicht ganz unwichtig ist.

  • Unsplash.it
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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

marketer UX

Düsseldorf

AMZ Marketing in Regensburg Logo.

AMZ-Marketing GmbH

Regensburg

Wolli Ruf Mediendesign Agentur Freiburg.

wolli ruf – mediendesign

Freiburg im Breisgau

Farbentour-Logo.

Farbentour®

Mettmann

Jocado Logo Texter München.

Jocado

Leipzig

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

2 Antworten zu „Unsplash.it: Platzhalterfotos von Unsplash.com nutzen“
— was ist Deine Meinung?

  1. LoboStudio Hamburg sagt:
    10. September 2015 um 6:52 Uhr

    Moin,

    eine kleine Korrektur. Alle 10 Tage kommen 10 neue „Featured“ Photos dazu. Drückt man stattdessen oben Links auf „New“ werden es erstens deutlich mehr Bilder und es kommen quasi täglich neue dazu. „10 new photos every 10 days“ kommt ja aus den Anfangstagen und ist jetzt etwas missverständlich. Hab da auch ein Bild liegen https://unsplash.com/lobostudiohamburg.

    Antworten
  2. Katrin sagt:
    9. September 2015 um 10:49 Uhr

    Also unsplash.it funktioniert jetzt bei mir leider 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.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑