Eine Möglichkeit, die ästhetische Qualität und den Realismus Ihrer Designpräsentationen zu verbessern, besteht darin, für Ihre Image Placeholders echte Fotos anstelle von generischen Image Placeholders zu verwenden.
Ein generischer Platzhalter ist nicht inspirierend.
Dies kann jedoch ein langwieriger Prozess sein: Sie müssen nach Fotos suchen, sie herunterladen und sie dann auf einem Webserver platzieren, um sie in Ihren Designmodellen verwenden zu können.
Gibt es eine einfachere und schnellere Möglichkeit, Image Placeholders zu implementieren?
Ja, das gibt es.
Es heißt Unsplash It und ist ein kostenloser Webdienst, der es Webdesignern ermöglicht, wunderschöne Fotos aus dem Unsplash-Archiv bereitzustellen. ( Unsplash ist eine Site, die gemeinfreie Bilder von spektakulär hoher Qualität veröffentlicht.)
Ich möchte Ihnen kurz erklären, wie Sie diesen wunderbaren Image Placeholders dienst nutzen.
Wie es funktioniert
Um ein Bild in ein HTML-Dokument einzufügen, müssen Sie lediglich die Breite und Höhe in der URL von Unsplash It angeben und diese dann als srcWert Ihres Bildelements verwenden.
Das Format ist:
Es klingt kompliziert, ist es aber nicht. Nehmen wir an, Sie möchten einen 600 x 400 Pixel großen Image Placeholders generieren.
Dies ist das HTML-Markup, das Sie verwenden würden:
Und dies ist der generierte Image Placeholders:
Fertig: Sie dürfen keine Fotos per FTP an Ihren Webhost senden und keine Fotos verwenden, die möglicherweise urheberrechtlich geschützt sind und Ihnen (und möglicherweise Ihrem Kunden) Ärger einbringen könnten.
Platzhalter für Schwarzweißbilder
Unsplash bietet Ihnen außerdem einige praktische Bildeffekte, beispielsweise die Möglichkeit, Schwarz-Weiß-Image Placeholders (auch Graustufen genannt) bereitzustellen. Fügen Sie einfach ein /g/(was vermutlich für „Graustufen“ steht) in die URL vor Ihren Breiten-/Höhenwerten ein:
Das obige Markup führt zum folgenden Image Placeholder’s:
Verwenden eines bestimmten Image Placeholders
Sie können auch ein bestimmtes Foto aus dem Unsplash It-Bildarchiv verwenden , wenn Sie steuern möchten, welches Foto in Ihrem Image Placeholders angezeigt wird.
Mehr lesen: 13 beste Apps wie Linkello: Alternativen zur Kommunikation erkunden
Angenommen, Sie möchten Bild Nr. 501 aus dem Archiv verwenden. Fügen Sie einfach ?image=501die URL hinzu:
Und hier sind wir:
Unsplash bietet mehr Optionen wie das Verwischen von Bildern, das Festlegen des Zuschneidegrads, das Erstellen einer Liste von Bildern und all diese tollen Dinge – besuchen Sie die Website, um den vollständigen Funktionsumfang des Webdienstes zu erkunden.
Wenn Ihnen dieses kurze Tutorial gefallen hat, werden Ihnen diese Artikel bestimmt auch gefallen:
- So verwenden Sie Bilder effektiv auf Websites
- Wo Sie die besten kostenlosen Stockfotos finden
- 17 Websites zum Finden kostenloser gemeinfreier Bilder
- 10 weitere Websites für kostenlose Stockfotos
- Usability-Fehler, die Sie bei der Verwendung von Fotos auf Ihrer Website vermeiden sollten