Das Internet besteht zu 90 Prozent aus Texten.
Aber was wäre das Internet, ohne die richten Fotos, die deine Message an der richtigen stelle nochmal unterstützen?
Kommen wir auf eine Website, dann scannen wir sie oftmals einfach nur ab. Wir fokussieren uns in diesem Moment auf Überschriften und Fotos.
Als nächstes fallen uns hervorgehobene Wörter in den Texten auf.
Interessiert uns ein Thema sehr, dann tauchen wir tiefer ab und lesen den kompletten Text. Oftmals passiert dieser Schritt aber erst nach dem Scannen der Website.
Mit den richtigen Fotos kannst du deine Emotionen transportieren. Du zeigst dich und deine Arbeit deinen potentiellen Kund:innen und unterstützt die Aussagen in deinem Text.
Nachteile von Fotos
Fotos bedeutet immer auch Datenmengen.
Google liebt schlanke und schnelle Webseiten. Damit deine Website nicht zu groß wird und von google “bestraft” wird, ist der Einsatz von den richtigen Bildformaten und großen extrem wichtig.
Darauf solltest du beim Einsatz von Fotos achten:
Wähle das richtige Format
Es gibt verschiedene Bildformate. Ach im Webdesign kommen verschiedene Formate zum Einsatz. Zuerst wählst du also das richtige Format für dein Foto.
JPEG
Die meisten der Fotos auf deiner Website wirst du in JPEG Format verwenden. Es ist ein kompaktes und kleines Format, dass komprimierter ist und in kleinen größen eingesetzt werden kann. Achtung! Nutzt du das tool Canva (link)? Dann achte beim speichern der Bilder, dass du das richtige Format auswählst. Canva hat als Grundeinstellung PNG ausgewählt und das ist für die Website nur selten das richtige Format!
Zusammengefasst:
- geringe Datenmenge durch Komprimierbarkeit
- wird für die meisten deiner Fotos auf der Website verwendet
- Kann keine transparenten Hintergründe darstellen
PNG
PNGs haben eine bessere Qualität.PNGs lassen sich verlustfrei komprimieren. Was aber bedeutet, dass die Datenmenge recht groß ist. Und das ist auch schon der große Nachteil an PNGs. Sie sind oftmals zu groß für eine Website. Solltest du einen Transparenten Hintergrund für deine Fotos benötigen, bist du bei den PNGs an der richtigen Stelle. Achte beim Einsatz darauf, dass du direkt die richtige Größe wählst, die du brauchst, um unnötige Datenmengen zu vermeiden.
Zusammengefasst:
- Hyprid aus JPEG und GIFs
- Transparenter Hintergrund möglich
- Bessere Qualität durch schärfere Darstellung der Kanten
- Wenig komprimierpar = größere Datenmenge
SVG
SVGs sind skalierbare Vektorgrafiken. Sie bestehen nicht aus Bildpunkten (Pixel), sondern aus Linien, die in jede Größe Skalierbar sind. Dieses Format wählst du bei deinem Logo oder Icons, die du auf der Website zeigst. Selbst in der Pro Version von Canva kannst du dieses Format beim exportieren auswählen.
Zusammengefasst:
- beliebig skalierbar
- verlustfreie Skalierung bei geringer Datenmenge
- Einsatzbereich Logos & Icons
- Animation möglich
- besteht aus einem Code und ist daher anfälliger für Manipulationen
- bei älteren Browsern wird dieses Format nicht unterstützt und somit nicht dargestellt
GIFS
Gifs sind die kleinen bewegten Bilder, die Seit ein paar Jahren wieder vermehrt im Einsatz sind. Vor allem kennt man sie z. B. durch Instagram, Facebook und Co.
Möchtest du mit kleinen Animationen Arbeiten, bist du bei Gifs genau richtig
Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.
- Zusammengefasst:
- kleine Animationen auf der Website
- transparente Hintergründe möglich
- wird gerne für Werbebanner verwendet
- geringe Datenmenge
- nur 256 Farben und somit nicht für vielfarbige Fotos geeignet
WebP
Das WebP Format ist ein relativ neues Bildformat. Es ersetzt das JPEG Format und schafft es, Fotos in noch kleineren Datenmengen einzusetzen. Der Nachteil ist, dass es noch nicht 100 Prozentig ausgerollt ist. Es ist noch schwierig als “Laie” dieses Format zu erstellen. Dazu brauch es externe Plugins. Auch wird es noch nicht von allen Browsern unterstützt.
Wähle die richtigen Maße
Wenn du das richtige Format festgelegt hast, dann geht es darum die richtigen Maße zu wählen. Wenn du noch nicht weißt, wo du das Bild auf deiner Website einsetzen möchtest, dann empfehle ich immer eine Bildbreite von max. 1900 px zu wählen. Bei 1900px Bildbreite wird das Bild auch noch in großen Bildschirmen optimal dargestellt.
Wähle die richtige Dateigröße
Wenn ich Bilder für die Website Nutzung abspeichern, dann versuche ich bei einer Dateigröße unter 200 Kb erreichen. Beim Abspeichern von JPEGs in Grafikprogrammen wirst du zusätzlich nach der Qualität der Speicherung gefragt. Wählst du eine Qualitätsstufe zwischen 80-90% reicht das für die Darstellung im Browser.
TUTORIAL: So kannst du deine Bilder anpassen
Im Video zeige ich dir, wie du deine Bilder mit Hilfe des kostenlosen Grafikprogramms Gimp wie oben beschrieben anpasst.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Plugins für die Bildoptimierung verwenden
Wenn du deine Bilder richtig vorbereitet hast, dann empfiehlt es sich bei WordPress Webseiten ein zusätzliches Plugin zu nutzen. Plugins wie z.B. Smush passen ebenfalls nochmal die Fotos für deine Website an. Es bringt allerdings nichts, Fotos in großen Formaten einzufügen und danach zu hoffen, dass das Plugin es schafft. Deine Fotos müssen vorher schon gut vorbereitet sein.
Wo findest du Fotos für deine Website?
Bist du jetzt noch auf der Suche nach passenden Fotos für deine Website? In diesem Blog-Beitrag findest du 12 Bilddatenbanken mit Fotos die kostenlos für die kommerzielle Nutzung verwendet werden dürfen!
