Das richtige Format für die Fotos auf deiner Website

Je professioneller die Fotos, desto professioneller sieht deine Website aus. Daher solltest du ein paar Dinge beachten, wenn du Fotos für deine Website machst, aussuchst oder bearbeitest.

Dateiformat

Die besten Dateitypen für Website-Bilder sind JPG und PNG.

Für Logos oder Icons hingegen verwendest du vektorbasierte Bilder wie SVG.

Benennung der Bilder

Es ist sehr wichtig, deine Bilder zu benennen und sie nicht einfach als “IMG_204576”, “IMG_204577” und “IMG_204578” hochzuladen. Warum? Wegen der SEO, der Search Engine Optimisation – oder auf Deutsch Suchmaschinenoptimierung.

Wenn du deine Bilder strategisch benennst, wird deine Website von den Suchmaschinen besser gerankt – und das willst du unbedingt, denn ein besseres Ranking bedeutet, dass deine Website leichter gefunden wird – was wiederum mehr zahlende Kundschaft für dich bedeutet.

Wie solltest du deine Bilder also nun benennen?

• beschreibe das Bild gut und fasse dich dabei kurz
• vermeide Umlaute (ä, ö, ü)
• verwende keine Symbole und Zeichen wie: &, %, !, @, etc.

Überlege dir einmal, wie du dieses Bild nennen könntest:

Wie wäre es denn mit sowas wie: “geoeffneter-laptop-auf-holztisch.jpeg” oder “laptop_auf_kommode_mit_deko.jpeg”

Bildauflösung

Auf einer Website gibt es Bilder in unterschiedlichen Größen. Daher muss die Bildauflösung unterschiedlich sein, je nachdem wie groß dein Bild ist.

Im Grund gibt es 2 Kategorien von Bildergrößen auf einer Website:

1. Banner: Das sind Bilder, die so groß sind, dass sie die gesamte Breite des Bildschirmes einnehmen.
2. Alle anderen Bilder, die kleiner sind.

Schaue dir einmal dieses Beispiel von meiner Website an:

Du siehst das Banner, das ist das Bild mit den getrockneten Gräsern, das wirklich die gesamte Breite, vom linken bis zum rechten Rand einnimmt. Und dann gibt es das kleinere Bild davor.

Für dich ist es ganz grundsätzlich wichtig zu wissen, dass ein Banner eine Auflösung von 2500px Breite und alle anderen Bilder eine Breite von 1500px haben sollten. Mehr dazu später.

Bildgröße

Zu große Bildgrößen verlangsamen deine Website. Daher empfehle ich dir eine Bildgröße von 500KB, oder weniger. Auf der anderen Seite ist es wichtig, die richtige Balance zwischen Größe und Bildqualität zu finden! Mach deine Bilder auf keinen Fall zu klein, wenn dann die Qualität darunter leidet – denn, wie ich dir ganz zu Beginn gesagt habe: Je besser die Fotos, desto professionelles wirkt deine Website!

Ich zeige dir, wie du die Bildgröße auf einem Mac einstellen kannst:

1. Öffne das gewünschte Bild mit einem Doppelklick. Dann gehe oben auf WERKZEUGE, dann auf GRÖßENKORREKTUR:

Wie du hier sehen kannst, ist die Breite des Bildes 5243px und die resultierende Größe 1,6MB, was riesig ist. (Erinnere dich daran, dass deine Bildgröße um die 500KB sein sollte.):

Um das nun zu ändern, passt du lediglich die BREITE an (die Höhe passt sich automatisch daran an). Wenn du das machst, dann wird die resultierende Größe automatisch kleiner. Man muss sich einfach trauen und ein bisschen mit der Breite herumspielen, bis man ein Gefühl dafür bekommt. Wenn ich, wie hier, die Breite auf 2500px stelle, dann ist die resultierende Bildgröße 493KB (also unter 500KB, was wir ja unbedingt wollten), also ist diese Größe perfekt:

Es ist in Ordnung, wenn du dein Bild ein wenig kleiner oder größer als die empfohlenen 2500px (für Banner) oder 1500px (für andere Bilder) machst, je nachdem, wie sich das auf die Gesamtgröße des Bildes auswirkt. Manchmal musst du ein bisschen herumprobieren, bis du eine gute Größe gefunden hast. Teste auch unbedingt, wie das Bild dann auf deiner Website wirkt und passe es entsprechen an.