Tipps für deine Website-Fotos

14. November 2021
Lesedauer: 3 Minuten

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:

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: 

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:

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.

Inhalt laden

via GIPHY

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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!

Viele Grüße,

Steffi

Hier Weiterlesen:

Melde dich hier
zu meinem Newsletter an:

tipps-website-fotos
Stefanie-Friedel

Hey, ich bin Steffi

In meinem Webdesign-Blog bekommst du Tipps rund um deine Website.

Website-Checkliste

Die beste Zeit zum erstellen deiner Website ist jetzt! 

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar
Website-Checkliste

Hole dir die kostenlose
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein