Kleine Leute schauen gerne Bilderbücher an, grosse surfen gerne durch Webseiten. Aber ohne Bilder lockt auch eine Website niemanden hinterm Sofa hervor. Und nicht nur für die Attraktivität sind sie wichtig. Vieles wird durch erklärende Bilder deutlicher und verständlicher.
Die Freude beim Websitebesucher ist allerdings dahin, wenn die schönen grossen Bilder nicht für die Website optimiert sind, d.h. in der Grösse angepasst wurden. Denn dann ist die Ladezeit der Website so lang, dass niemand warten mag, bis er endlich etwas sieht. Und Google sagt sich, dass das wohl keine attraktive Website sein kann, wenn so viele Leute abspringen.
Diese fünf Punkte solltest du daher im Auge behalten:
Dateiformat:
Das richtige Format für den gewünschten Zweck
Je nachdem, wofür du dein Bild brauchst, bieten sich unterschiedliche Formate an. Welches Format das Bild aktuell hat, siehst du an der Endung des Dateinamens. Die gebräuchlichsten sind:
🔹JPEG
Das JPEG ist das Bildformat, das am wenigsten Speicherplatz braucht und daher auch am schnellsten geladen wird. Vorsicht: Bei allzu starker Komprimierung kann es pixelig wirken. Wenn das benötigte Bild keine Transparenzen zeigen muss, ist JPG das Format deiner Wahl! Das JPEG ist das meist gebrauchte Format auf Webseiten.
🔹PNG
PNGs brauchen etwas mehr Speicherplatz, können dafür aber Transparenzen darstellen. Hast du z.B. eine Person aus ihrem Hintergrund herausgeschnitten, musst du das Bild als PNG aus deinem Bildbearbeitungsprogramm exportieren, damit der Hintergrund auch transparent bleibt. Bei einem JPEG würde der Hintergrund mit Weiss aufgefüllt.
🔹SVG
Diese spezielle Datei ist eine Vektordatei. Es wird für Logos und Icons gebraucht. Sie hat keine Bildpixel, sondern Vektoren. Das bedeutet, dass man solche Bilder problemlos vergrössern und verkleinern kann. Das Bild bleibt immer scharf.
Allerdings stellen sie auch ein gewisses Risiko dar, wenn du deiner WordPress-Website erlaubst, sie zu laden. Denn mit fremden Vektordateien können auch Viren mitgeladen werden. Dein Logo lädst du besser als PNG hoch.
Bildgrösse:
So gross wie nötig, so klein wie möglich
Die Grösse eines Bildes – Länge und Breite – fürs Web wird in Pixeln angegeben. So kannst du einfach abschätzen, wie gross dein Bild für deine Anwendung sein sollte. Da es verschiedene Bildschirmgrössen und -formate gibt, wird dein Bild nie auf allen Bildschirmen toll aussehen. Aber du kannst versuchen, die gängigsten abzudecken.
Ein durchschnittlicher Bildschirm hat eine Breite von 1920px. Brauchst du also ein Bild, das über den ganzen Bildschirm angezeigt werden soll – wie oft zuoberst auf einer Webseite – rechnest du grob mit 2000 Pixel und verkleinerst die Seitenlänge entsprechend. Brauchst du es kleiner, schätzt du ungefähr ab, ob es ein Drittel, ein Viertel oder kleiner sein soll. Auf einen Pixel mehr oder weniger kommt es dabei nicht an.
Die Höhe bestimmst du automatisch mit dem Ausschnitt bzw. dem Zweck, für den du’s brauchst. Dateigrösse: Je kleiner, desto schneller
Dateigrösse: Je kleiner, desto schneller
Die richtigen Aussen-Abmessungen hat dein Bild nun. Aber auch der Inhalt macht ein Bild grösser oder kleiner. Die Dateigrösse wird in Bytes gemessen.
Ob ein Bild viele oder wenige Bytes hat, hängt ab von
🔹der Auflösung: wie viele Bildpunkte beinhaltet das Bild (Bildpixel)
🔹der Farbtiefe
Ein Bild fürs Internet braucht nicht so viele Bildpunkte (dpi=dots per inch) wie eines, das du drucken möchtest.
Um die Bytes zu reduzieren, musst du das Bild komprimieren. Meistens reicht eine Bildqualität von 80% und 72 dpi. Das sieht auf einem Bildschirm immer noch scharf genug aus.
Wird es über die ganze Breite des Bildschirms angezeigt, dann sollte dein Bild nicht mehr als 200-250 kB haben. Mach einfach einen Test und schau es dir nach der Komprimierung an. Dann merkst du, wie das Bild wirkt. Bei zu starker Komprimierung wird es unscharf.
Dateiname:
Hilft bei Google und in der Mediathek
Jedes Bild hat einen Namen. Den schaut sich auch Google an und versucht, Informationen daraus zu lesen. Darum solltest du dir unbedingt eine Beschreibung ausdenken, unter der man sich schon etwas vorstellen kann. Wenn du den Namen schlau wählst, hilft er dir, bei Google via die Bilder-Googlesuche gefunden zu werden, was dir natürlich mehr Traffic auf deine Website bringen kann.
Damit der Dateiname für dich arbeiten kann, sollte er
🔹nur Kleinbuchstaben enthalten.
🔹keine Umlaute enthalten.
🔹keine Leerschläge haben, sondern alle Wörter mit Bindestrichen verbunden haben.
🔹ein Keyword beinhalten (eins!).
🔹schon vor dem Hochladen in deine Mediathek optimiert werden.
BEISPIELE
Schlecht sind Namen „ohne Bedeutung“ und Grossbuchstaben
X img1783.jpg
X Bild-50.png
Schlecht sind ein Haufen SEO-Schlagwörter und Wiederholungen
X seo-bild.png
X seo-seo.jpg
Besser ist
✔ portrait-petra.jpeg
✔ pc-auf-schreibtisch.jpeg
✔ petra-trinkt-tee.png
Bildbeschriftung:
Wichtig für die Barrierefreiheit und die Orientierung
Nun hast du deine Bilder in die Mediathek hochgeladen. Hier solltest du deinen Bildern Titel und ALT-Tags vergeben. Du findest die Eingabemöglichkeit rechts, wenn du das Bild anklickst.
🔹ALT-Tags
ALT-Tag steht für «Alternativer Text». Er beschreibt, was auf dem Bild zu sehen ist. Keine Romane – kurz und knackig ist die Devise! Und wie beim Dateinamen: gerne aussagekräftig und kurz, am besten noch mit einem Keyword für den geplanten Verwendungszweck.
Denn wenn das Internet deines Website-Besuchers zu schwach ist, um das ganze Bild herunterzuladen, wird dieser alternative Text angezeigt.
Auch bei der Barrierefreiheit deiner Website spielen diese Tags eine wichtige Rolle: Sehbehinderten wird der Text vorgelesen, wenn sie ihr Gerät so eingestellt haben.
Daher ist eine treffende Beschreibung des Bildes hier wichtig.
🔹Beschriftung
Der Text, den du hier eingibst, erscheint als Bildbeschreibung unter einem Bild auf deiner Website. Ganze verständliche Sätze machen sich hier am besten.
🔹Beschreibung
Hier kannst du dein Bild noch einmal genauer beschreiben. Je nachdem, um welches Thema es sich bei der Website handelt, kann das sehr nützlich sein.
Ich persönlich benutze die Beschreibung nicht. ALT-Text und Beschriftung sind allerdings immer wichtig.
Fazit
Du merkst: Bilder fürs Web vorbereiten ist nicht wirklich freiwillig.
Wir alle finden es grossartig, wenn Google uns gut findet und unsere Bilder bei passenden Suchanfragen ausspielt.
Deine Website lädt schneller und wird bedienungsfreundlicher.
Mit dem passenden Bildformat, den nötigen Abmessungen und entsprechender Komprimierung hast du schon einen grossen Schritt getan. Mit der richtigen Beschriftung sorgst du auch für Barrierefreiheit und einfacheres Handling in deiner Mediathek.
Die Bearbeitung wird dir bald schnell von der Hand gehen.
MB- oder gar GB-Bilder verbannst ab sofort von deiner Webseite!
