Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Unsplash.it: Platzhalterfotos von Unsplash.com nutzen

Unsplash.it: Platzhalterfotos von Unsplash.com nutzen

  • Aktualisiert am 4. April 2023
  • Denis Potschien von Denis Potschien
  • Webdesign
  • 2 Kommentare

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
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.

Inhaltsverzeichnis

Agenturpartner in Altenberge

Edit Content

Cloudconsult

Direkt aus dem Münsterland stammend, vereinen wir bei Cloudconsult regionale Verbundenheit mit globalem Know-how. Unsere Flexibilität zeigt sich darin, dass wir keine Vertragslaufzeiten haben, sodass Sie stets maximale Freiheit genießen. Ein weiterer Vorteil unserer Arbeit sind die blitzschnellen Ladezeiten unserer Webseiten, die sicherstellen, dass Ihre Besucher nicht warten müssen.

Unabhängig vom Gerät – ob Desktop, Tablet oder Smartphone – garantieren wir stets die perfekte Darstellung Ihrer Inhalte. Dabei setzen wir auf modernste Systeme und Technologien, um immer am Puls der Zeit zu bleiben. Bei uns steht der persönliche Kontakt im Vordergrund: Sie haben immer einen festen Ansprechpartner und müssen sich nicht mit ständigem Wechsel oder Unklarheiten auseinandersetzen.

Mit einem breiten Spektrum an Dienstleistungen, von der Webseiten-Erstellung über Onlineshops bis hin zur monatlichen Betreuung, sind wir für viele Anforderungen gerüstet. Unsere sehr gute Bewertung bei Google Rezensionen unterstreicht unsere Qualität und das Vertrauen, das unsere Kunden in uns setzen. Bei Cloudconsult stehen Exzellenz, Engagement und Expertise im Mittelpunkt unserer Arbeit in der digitalen Welt.

— Moritz Möllers,
Inhaber
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

2 Antworten

  1. 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
  2. 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

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen