Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Bilder & Vektorgrafiken bearbeiten » Unsplash.it: Platzhalterfotos von Unsplash.com nutzen

Unsplash.it: Platzhalterfotos von Unsplash.com nutzen

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 8. September 2015
Bookmarke mich
Share on pocket

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

iPower AG

Berlin

pictibe – Werbeagentur & Marketingagentur

Köln

netkin digital Marketing

Köln

marketer UX

Düsseldorf

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

Alle Agenturpartner

Jobs

Media Manager in München

München

Sprachtalente

Volkach oder Würzburg

Junior SEO Manager in München

München

Copywriter – Vollzeit

Remote

Web Development & Project Management

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

 →   

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.