Fotos & Grafiken

Um das Erscheinungsbild der Website visuell etwas aufzulockern und attraktiver zu gestalten oder komplexere Sachverhalte anschaulich zu präsentieren benötigt du Fotos und Grafiken.

Quellen zum Download

Auf folgenden Seiten findest du eine große Auswahl an Fotos.
Tipp: Englische Suchbegriffe funktionieren meist besser.

Kostenlos / Lizenzfrei

• https://www.pexels.com/ 
• https://unsplash.com/ 
• https://www.pixelio.de/

Kostenpflichtig (ca. 3 € pro Bild)

• https://www.istockphoto.com/
• https://stock.adobe.com/
• https://photodune.net/

Lizenz & Nutzungsrechte

Verwende nicht einfach ein Bild, welches du auf einer anderen Website oder in Google findest. Hier ist die Wahrscheinlichkeit hoch, dass du gegen Urheber- oder Nutzungsrechte Dritter verstößt und eine kostspielige Abmahnung erhältst.

Auf den bereits erwähnten Stockphoto-Plattformen sollte es diesbezüglich zu keinen Problemen kommen. Achte aber darauf, dass du das Foto so nutzt, wie es die jeweilige Lizenzbestimmung vorsieht. Eventuell musst du den Urheber nennen oder die Plattform verlinken.

Auflösung

Sammle in diesem Schritt die Fotos in der besten Qualität, die du findest. Eventuell möchtest du sie später auch noch woanders verwenden. Für die Darstellung auf der Website werden wir diese dann allerdings optimieren, um die Dateigröße und somit die Ladezeit zu reduzieren.

Die Auflösung spielt auch bei der Auffindbarkeit der Grafiken in der Google Bildersuche eine entscheidende Rolle.

Sollten höhere Auflösungen sehr teuer sein, reicht es für die Darstellung im Web aus, wenn du querformatige Bilder mit einer Auflösung von ca. 2500px Breite erwirbst.

Dateiformat

Das beste Dateiformat für Bilder im Web ist .jpg.
Wenn du Transparenzen brauchst (d.H der Hintergrund des Bildes ist nicht weiß, sondern soll die selbe Farbe haben wie der Hintergrund auf dem es platziert wird) benötigst du das Format .png.

Bildformat

Im Web kommen großteils Bilder im Querformat zum Einsatz. Suche aber auch bewusst ein paar hochformatige Alternativen (z. B. für die Darstellung in der mobilen Version am Smartphone) oder um flexibler beim zweispaltigen Layout zu sein wenn du mal mehr Text zu einem Bild hast.

Dateigröße

Achte darauf, dass die Bilder maximal 500kB groß sind, bevor du sie auf der Website einbindest.

Wenn du kein Bildbearbeitungsprogramm hast, kannst du dieses kostenlose Online-Tool verwenden, um die Dateigröße zu reduzieren. Für Mac OS ist das Tool ImageOptim sehr praktisch, um schnell Bilder zu optimieren.

Du solltest aber immer auch die Originale aufheben – vielleicht brauchst du sie ja später noch einmal für einen anderen Anwendungsfall in hoher Auflösung.

Dateiname

Benenne die heruntergeladenen Fotos folgendermaßen:

[Bildbeschreibung]_[Quelle]_[Autor].jpg
z. B. Frau_am_Laptop_Unsplash_Max_Mustermann.jpg

Das hilft dir einerseits dabei, die Fotos später über die Suchfunktion leicht wiederzufinden, andererseits analysiert Google die Keywords im Dateinamen für die Auffindbarkeit in der Google Bildersuche.

Wenn du Rechte Dritter beachten musst, macht es auch Sinn, die Quelle und den Autor direkt im Dateinamen abzuspeichern. So kannst du diese Informationen später nicht mehr vergessen.

Motiv

Beachte, dass durch die Positionierung auf der Website und die Darstellung auf verschiedenen Endgeräten (großer Monitor, Laptop, Tablet, Smartphone,…) die Fotos eventuell nicht zur Gänze angezeigt werden oder eventuell mit Text überlagert werden. Das gilt vor allem für Fotos, die über die gesamte Bildschirmbreite angezeigt werden sollen.

Versuche daher nach Möglichkeit, Motive zu wählen, die auch funktionieren, wenn diese an den Rändern etwas beschnitten sind, nur ein Ausschnitt sichtbar ist oder diese als Hintergrund verwendet werden und möglicherweise später eine Überschrift darüber liegt.

Fotografen beauftragen

Wenn du individuelle Fotos von deinem Produkt, dir oder deinem Team auf der Website verwenden möchtest, brauchst du professionelle Fotos.

Diese kannst du entweder selbst anfertigen, oder an einen professionellen Fotografen auslagern.

Fotos selber machen

Wenn du kurzfristig und kostenlos erste Bilder brauchst, kannst du auch selbst dein Glück probieren. Folgend ein paar allgemeine Tipps & Tricks für professionelle Fotos: 

Kamera

Möglichst modernes Smartphone oder Kamera. Wenn du selbst nicht im Besitz eines solchen bist, kannst du dir eventuell ein Gerät von Freunden oder Bekannten ausborgen.

Licht

Möglichst hell. In der Nachbearbeitung kann man Bilder einfach dünkler machen aber nur schlecht heller. Natürliches Tageslicht eignet sich am Besten. Es sollte möglichst diffus sein, um keine harten Schatten oder Spiegelungen in Brillen zu erzeugen.

Stativ

Verwende ein Stativ oder lege die Kamera auf eine provisorische Ablage.

Hintergrund

Der Hintergrund sollte möglichst ruhig und harmonisch wirken. Besonders gut zur Geltung kommen Portraits, wenn der Hintergrund unscharf ist (kleine Blende oder Portrait-Funktion am Smartphone). Achte darauf, dass Elemente im Hintergrund nicht ungünstig mit deinem Kopf wechselwirken.

Motiv

Es sollte in alle Richtungen genügend Abstand zum Bildrand sein. Beschneiden kannst du das Foto später immer noch. Mach sowohl quer-, als auch hochformatige Aufnahmen.

Auflösung

Achte darauf, dass die Qualitätseinstellung der Kamera auf das Maximum eingestellt ist (am besten im RAW-Format).

Gesicht

Blick direkt in die Kamera. Zumindest ein dezentes Lächeln kann nicht schaden.

Kleidung

Überlege dir genau, welchen Eindruck du vermitteln möchtest.

Weitere Tipps & Tricks

Ausführlichere Hilfestellung zum Anfertigen professioneller Fotos findest du

• In unserem Ergänzungskurs Fotografie
• In diesem Artikel
• In diesem Video

Aufgabe: Sammle Fotos für deine Website.