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

 

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

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.

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

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!

Deine Steffi

Hier Weiterlesen

Herzlich Willkommen in
meinem Inner Circle

Hier wirfst du einen Blick hinter die Kulissen und erhältst wertvolle Tipps rund um Design & Business und bekommst alle Infos zu neuen Angeboten & freien Kapazitäten. 
Wenn du immer mal wieder viel:mehr insights erhalten möchtest, trage dich hier ein:

Aktueller Beitrag

tipps-website-fotos
Webdesignerin-stefanie-friedel

Hi, ich bin Steffi

Ich arbeite seit 2009 als Designerin und gebe auf meinem Blog Strategie, Business und Design-Tipps für dich.

Inhalt

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 ❤

Webdesignerin-stefanie-friedel

Hi, ich bin Steffi

Ich arbeite seit 2009 als Designerin und gebe auf meinem Blog Strategie, Business und Design-Tipps für dich.

Du brauchst unterstützung bei Brand- und Webdesign?

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 ❤

Inhalt

Search Engine Marketing

Bedeutet, dass bezahlte Werbung genutzt wird, um die eigene Website in den Suchmaschinenergebnissen sichtbarer zu machen.

>>> Mehr erfahren

Lass uns kennenlernen und dein Projekt besprechen

1
KONTAKTDATEN
2
PROJEKTART
3
PROJEKTDETAILS
4
Last Page
Vorname *
E-Mail Adresse *
Wie lange gibt es dein Business schon? *
Nachname *
Business Name (Optional)
Website (optional)
FÜR WELCHE PROJEKTART INTERESSIERST DU DICH? *
Beschreibe hier deinen bedarf: *
Wann soll dein Projekt abgeschlossen sein? *
Du hast sonstiges gewählt, was möchtest du mit mir besprechen? *
Wie bist du auf viel:mehr design aufmerksam geworden? *
Wieso möchtest du mit Viel:Mehr Design zusammenarbeiten?
Gibt es noch etwas das du mitteilen möchtest?