Bilder machen deine Website persönlich und können den Text und die Botschaft perfekt unterstützen. Also eigentlich eine coole Sache.
Aber leider haben sie auch einen grossen Nachteil: Um sie zu laden braucht es Zeit. Viel Ladezeit! Denn Bilddateien sind oft gross.
Du weisst sicher, wie das ist, wenn es gefühlt Stunden dauert, bis eine Website geladen ist. Meist klickt man dann wieder weg. Nicht nur die Besucher ärgert das, sondern auch Google.
Du musst dich trotzdem nicht zwischen Bildern und schneller Ladezeit entscheiden.
Ich zeige dir hier, wie es geht.
Dateigrössen und Bildformate
Wenn es um den Begriff Dateigrösse geht, gibt es schnell Missverständnisse. Denn es kann sowohl von der Abmessung der Bilder die Rede sein als auch von der Anzahl KB, die ein Bild „wiegt“.
Mit Dateigrösse sind die Anzahl KB gemeint. Also wie viel Speicherplatz ein Bild braucht. Je grösser, je länger die Ladezeit.
Mit Bildgrösse ist die Abmessung des Bildes in Pixeln gemeint. Ob ein Bild zum Beispiel 600x400px gross ist oder 1920x550px.
Bildformate
Es gibt viele verschiedene Bildformate. Die gebräuchlichsten für die Website sind diese:
JPG
Die meisten Bilder auf der Website sind Fotos. Diese werden (solange sie keinen transparenten Hintergrund haben) als .jpg abgespeichert.
In diesem Dateiformat werden Pixel, die das menschliche Auge sowieso nicht wahrnimmt, entfernt, um eine kleinere Datei zu erzeugen.
PNG
Fotos mit einem transparenten Hintergrund.
Leider kann .jpg nicht mit transparenten Hintergründen umgehen. Deshalb muss hier .png gewählt werden.
Bedauerlicherweise ergibt das auch grössere Dateien.
GIF
.gif ist ein Dateiformat, das ideal ist für Schriften auf transparentem Hintergrund.
Natürlich können solche Grafiken auch mit .png abgespeichert werden, aber da sind sie meistens deutlich grösser.
Ich teste hier immer welche Datei kleiner ist.
Gif’s eignen sich auch für animierte Grafiken.
WebP
Inzwischen beherrschen die meisten Browser das WebP-Format. Dieses Dateiformat wurde von Google entwickelt und ermöglicht oft erheblich kleinere Bilddateigrössen.
Insbesondere bei Bildern mit transparenten Anteilen, die bisher in den Formaten .png oder gegebenenfalls .gif abgespeichert wurden, stellt WebP häufig eine effiziente Lösung dar.
Ebenso können auch .jpg-Dateien oft kleiner gespeichert werden. Zur Ermittlung der optimalen Dateigrösse teste ich, bei welchem der beiden Formate die Datei kleiner ist.
Wenn dein Bildbeareitungsprogramm es nicht ermöglicht ein Bild in WebP abzuspeichern, benötigst du ein Konvertierungstool wie Convertio.
Wie gross sollen die Bilder für die Website sein?
Die Bildgrösse (Abmessung) sollte so gross sein, wie die Bilder auf der Website tatsächlich gebraucht werden.
Die Dateigrössen sollen so klein wie möglich sein. Ideal ist es, wenn sie unter 100 KB sind. Das ist allerdings nicht immer möglich.
Gerade Bilder, die über die ganze Breite der Website gehen, werden oft pixelig, wenn du versuchst sie so klein abzuspeichern.
Deshalb muss jedes Bild einzeln angesehen werden.
Welche Bildgrössen kommen auf der Website vor?
Bilder, die über die ganze Bildschirmbreite gehen, sind standardmässig1920px breit. Die Höhe bestimmst du selbst.
Ich empfehle dir bis etwa 600px Höhe zu gehen, damit der Text unterhalb des Bildes auch noch sichtbar wird. Es gibt Menschen, die sonst nicht auf die Idee kommen weiter herunterzuscrollen.
Wenn es schmaler wird, ist es auch gut.
Restliche Bildgrössen
Diese richten sich danach, wie viel Platz du einem Bild neben dem Text einräumst. Ungefähre Grössen kannst du dieser Grafik entnehmen.
Bitte vergiss dabei nicht, dass auf dem Handy Bilder teilweise wieder grösser dargestellt werden als auf dem PC.
Deshalb würde ich nicht unter 500px Breite bei den Bildern gehen, damit sie auch dort gut dargestellt werden.
Bildgrössen aus einer bestehenden Website auslesen
Wenn du ein Bild auf deiner Website ersetzen willst, musst du vorher wissen wie gross es ist.
Oder du nutzt eine Vorlage auf der bereits Bilder eingefügt sind und du möchtest diese Bilder austauschen.
Dann gibt es zwei Möglichkeiten:
- Du gehst ins Backend und klickst auf das Bild und schaust, wie gross es ist.
- Du schaust im Frontend mit der Untersuchen-Funktion von Chrome oder Firefox, was als Bildgrösse angegeben ist.
Wie das geht, zeige ich dir im Video:
Auflösung 72dpi?
Wenn du jetzt denkst: Im Web gibt es doch gar keine dpi! Dann liegst du völlig richtig. Aber die Bildbearbeitungsprogramme brauchen eine dpi-Angabe, um die Bilder abzuspeichern. Dabei hat sich 72dpi durchgesetzt.
Tools, um Bilder zu bearbeiten, zuzuschneiden und komprimieren
Wie du einen Bildausschnitt machst oder die Bildgrösse verkleinerst, zeige ich dir in diesem Video:
Wenn du das Bild nun noch komprimieren, also die Dateigrösse verringern willst, dann kannst du das mit Tinypng machen.
Bilder korrekt benennen
Hin und wieder wird ein Bild auf der Homepage nicht richtig angezeigt. Oft liegt es am Dateinamen. Deshalb lohnt es sich, das von Anfang an richtig zu machen.
Bilder in Kleinbuchstaben beschriften
Im Web sollte alles in Kleinbuchstaben beschriftet werden, da es Server gibt, die „case sensitive“ sind, wie wir das in der Fachsprache nennen. Sie können schlicht mit Grossbuchstaben nicht umgehen.
Bildernamen dürfen keine Sonderzeichen oder Umlaute enthalten
Auch hier gilt das Gleiche wie oben beschrieben. Es gibt einfach Server, die damit nicht umgehen können.
Der Grund: Umlaute kommen im englischen Sprachgebrauch nicht vor. Und HTML so wie das World Wide Web ist von Tim Berners-Lee, einem Briten, erfunden worden. Umlaute waren da nicht vorgesehen.
Bildernamen dürfen keine Leerstellen enthalten
Wenn du mehrere Worte für deinen Bildernamen verwendest, müssen die mit einem Bindestrich oder einem Unterstrich verbunden werden. Aus Gründen der Suchmaschinenoptimierung empfiehlt sich der Bindestrich. Auch hier gibt es sonst Server, die die Namen nicht verarbeiten können.
Benenne deine Bilder sinnvoll
Bildernamen werden von Google ausgewertet. Wenn da steht image33.jpg kann Google damit nichts anfangen. Wenn du aber beschreibst, was auf dem Bild drauf ist, etwa claudia-barfuss.jpg, dann kann Google das Bild auch in der Bildersuche anzeigen. Ideal ist es, wenn das Keyword (das Schlüsselwort) darin vorkommt.
Praxistipp: Ausserdem weisst auch du selbst, was auf dem Bild ist, nur anhand des Namens. Das erleichtert vieles, wenn du mal wieder nach einem bestimmten Bild suchst.
Natürlich macht es auch bei PDFs und weiteren Dateien Sinn ihnen einen Namen zu geben, der etwas über den Inhalt aussagt. Es erleichtert das Leben.
Achtung Fallstrick: Wenn du Bilder auf deiner Website umbenennst, musst du sie neu verlinken! Sonst werden sie nicht mehr angezeigt. Das ist wie, wenn du in ein neues Dorf ziehst und der Post deine neue Adresse nicht angibst. Dann kann die Post nicht mehr zugestellt werden.
Bilder für die Suchmaschinen optimieren
Wenn du die Tipps für Bildernamen berücksichtigst, hast du schon viel dafür gemacht, deine Bilder für die Google&Co. zu optimieren.
Neben den Dateinamen kannst du aber noch mehr tun.
Wenn du das Bild auf deine Website geladen hast, solltest du einen «Alt-Text» vergeben und auch einen «Title».
Dieser Text sollte wiederum das Schlüsselwort enthalten. Dann kann Google einen Zusammenhang zwischen dem Bild und dem Text herstellen.
Deswegen ist es natürlich auch wichtig, dass der Text und das Bild zusammenpassen.
Ich weiss, am Anfang erscheint dir, die Bildbearbeitung möglicherweise etwas kompliziert. Mit einer Checkliste und etwas Routine geht es dir bald schnell von der Hand. Die Mühe lohnt sich auf jeden Fall.
Die Checkliste kannst du selbst erstellen. Als Newsletter-AbonnentIn bekommst du sie bequem ins Postfach geliefert.