Das Handyfoto vom neuen Firmenauto hat 6 MB. Darf das so auf die Website? Kurz gesagt: nein. Vorher triffst du drei Entscheidungen, und die dauern zusammen ein paar Minuten. Dieser Beitrag zeigt dir, welche das sind und wie du sie triffst. Dieser Beitrag ist Teil 3 meiner Serie WordPress für Redakteure. Am Ende gibt es eine Checkliste zum Abhaken, auch als PDF.
Bilder für Website optimieren: die drei Entscheidungen
Bilder für die Website optimieren heißt: Du machst ein Foto so klein, wie es die Website braucht, und nicht kleiner. Dabei geht es um drei Dinge. Sie werden oft verwechselt, darum kurz der Reihe nach.
- Bildgröße in Pixel: Pixel sind die winzigen Bildpunkte, aus denen ein Foto besteht. Ein Handyfoto ist oft rund 4000 Pixel breit. Das ist viel breiter als jeder normale Bildschirm.
- Dateigröße in KB oder MB: So viel Speicher braucht die Datei. Ein KB (Kilobyte) ist ein Tausendstel MB (Megabyte). Je größer die Datei, desto länger lädt die Seite. Am Handy unterwegs merkst du das zuerst.
- Format: Das ist die Endung am Dateinamen, also .jpg, .png, .webp oder .avif. Jedes Format speichert Bilder anders und passt zu anderen Motiven.
Dazu kommt der Dateiname. Er ist keine technische Frage, aber er gehört zum Vorbereiten dazu. Das Beispiel unten zeigt alle vier Punkte an einem Foto.
Warum Bilder so viel ausmachen
Wie schwer Websites sind, misst das HTTP Archive. Das ist ein offenes Projekt, das jedes Jahr Millionen Websites automatisch untersucht. Die Ergebnisse stehen im Web Almanac 2024. Dort steht: Auf Startseiten sind Bilder der größte Teil der Daten, noch vor dem Programmcode der Seite.
Die Zahlen für Oktober 2024: Eine typische Startseite lädt am Handy 900 KB Bilder. Am Desktop sind es 1.054 KB. Eine typische Seite wiegt insgesamt 2.311 KB am Handy und 2.652 KB am Desktop. Gemeint ist jeweils der Median, also der Wert in der Mitte: Die eine Hälfte der Seiten liegt darüber, die andere darunter.
Ein wichtiger Hinweis zu diesen Zahlen: Der Bild-Wert gilt nur für Startseiten. Der Gesamtwert gilt für alle gemessenen Seiten. Man darf die beiden also nicht genau verrechnen. Die Größenordnung stimmt aber. Und ein einziges unbearbeitetes Handyfoto mit 6 MB wiegt mehr als zwei solche Seiten zusammen.
Welches Format für welches Bild
Die Entwickler-Dokumentation MDN der Mozilla-Stiftung vergleicht die gängigen Formate in ihrem Leitfaden zu Bildformaten. Die wichtigsten Aussagen:
- WebP ist bei Fotos im Schnitt 25 bis 35 % kleiner als JPEG, bei ähnlicher Qualität. Als verlustfreies WebP ist es rund 26 % kleiner als PNG.
- AVIF ist bei Fotos rund 50 % kleiner als JPEG. Es baut sich aber nicht schrittweise auf. Der Browser muss die ganze Datei laden, bevor er etwas zeigt.
- JPEG bleibt für Fotos eine sichere Wahl, wenn ein Programm nichts anderes kann.
- PNG speichert ohne Verluste. Darum passt es für Screenshots und Grafiken mit Schrift. Dort fallen unscharfe Ränder sofort auf.
- SVG ist kein Foto, sondern eine Zeichnung aus Linien und Flächen. Für Logos und Symbole empfiehlt MDN dieses Format.
„Verlustbehaftet“ heißt: Das Format wirft Details weg, die das Auge kaum sieht. Bei Fotos stört das nicht. Bei Schrift sieht man es sofort.
In der Praxis sind die modernen Formate noch selten. Laut Web Almanac 2024 sind am Handy 32,4 % aller Bilder JPEG und 28,4 % PNG. WebP kommt auf 12 %, AVIF auf 1,0 %. Hier steckt also viel Luft drin.
Was WordPress selbst macht und was nicht
WordPress hilft dir schon ein Stück. Seit Version 5.3 verkleinert es jedes Bild, das breiter oder höher als 2560 Pixel ist. Das steht in der Ankündigung der Entwickler von 2019. Die verkleinerte Fassung wird dann als größte Version genutzt. Du erkennst sie meist am Zusatz „-scaled“ im Dateinamen.
Der Haken: Das Original bleibt trotzdem auf dem Server liegen. Ein 6-MB-Foto kostet also weiter 6 MB Speicher, auch wenn es niemand sieht. Bei hunderten Bildern füllt das den Speicherplatz und macht Backups größer. 2560 Pixel sind außerdem für die meisten Stellen auf einer Website mehr als nötig.
AVIF kann WordPress seit Version 6.5. Laut Ankündigung zu WordPress 6.5 klappt das aber nur, wenn der Server es unterstützt. Ob deiner das kann, siehst du unter Werkzeuge → Website-Zustand. Dort im Reiter Bericht (englisch „Info“) den Abschnitt zur Medienverarbeitung öffnen. Steht dort AVIF bei den unterstützten Formaten, kannst du es hochladen. Wenn du dir unsicher bist, frag deinen Webmaster.
So bereitest du ein Bild vor
Diese vier Schritte machst du am eigenen Computer, bevor du das Bild in WordPress hochlädst.
- Verkleinern. Ein Foto muss nicht breiter sein als die breiteste Stelle, an der es auf deiner Website erscheint. Bei vielen Websites reichen 1600 bis 2000 Pixel, für kleine Bilder im Text deutlich weniger. Den genauen Wert für dein Theme kennt dein Webmaster.
- Format wählen. Fotos als WebP oder JPEG, Screenshots als PNG oder verlustfreies WebP. Die Tabelle oben hilft dabei.
- Qualität einstellen. Viele Programme fragen beim Speichern nach der Qualität. Ein mittlerer bis hoher Wert reicht für Fotos meist. Vergleiche das Ergebnis kurz mit dem Original. Siehst du keinen Unterschied, passt es.
- Umbenennen. Kurz und beschreibend, nur Kleinbuchstaben, Wörter mit Bindestrich getrennt. Keine Umlaute, kein ß und keine Leerzeichen. Aus „Firmenauto Ö.jpg“ wird „firmenauto-elektro-montafon.webp“.
Warum keine Umlaute? Manche Systeme machen aus „ö“ eine Zeichenkette wie „%C3%B6“. Dann sieht die Bildadresse kaputt aus, und Links darauf brechen leichter.
Bringt der Dateiname auch etwas bei Google? Ein wenig. Google schreibt in seinen Empfehlungen zu Bildern, der Dateiname gebe „sehr leichte Hinweise“ auf den Inhalt. Wichtiger ist dort der Alt-Text. Das ist eine kurze Beschreibung des Bildes für Menschen, die es nicht sehen. Google unterstützt WebP und AVIF übrigens genauso wie JPEG und PNG.
Wo dir das im Alltag begegnet
- Teamfoto: Kommt meist als riesige JPEG-Datei vom Fotografen. Verkleinern und als WebP speichern.
- Produktfoto: Oft viele Bilder auf einer Seite. Hier summiert sich jedes zu große Bild.
- Screenshot für eine Anleitung: PNG oder verlustfreies WebP, damit die Schrift scharf bleibt.
- Logo eines Partners: Am besten als SVG vom Partner anfordern. Kann deine Website kein SVG, nimm PNG.
- Plakat oder Flyer mit Text: Den Text zusätzlich in den Beitrag schreiben. Dazu gleich mehr.
Bilder und Barrierefreiheit
Ein Bild mit Text darin kann nicht jeder lesen. Ein Screenreader liest keine Schrift aus einem Foto vor. Ein Screenreader ist ein Programm, das blinden Menschen die Seite vorliest. Auch wer am Handy vergrößert, sieht oft nur noch Pixel. Öffnungszeiten, Preise oder Termine gehören deshalb in den normalen Text. Das Bild darf sie zusätzlich zeigen.
Jedes Bild mit Inhalt braucht einen Alt-Text. Wie du ihn schreibst, zeige ich im Beitrag Gute Alt-Texte schreiben. Dort steht auch, wann ein Bild bewusst keinen Alt-Text bekommt. Bei Grafiken mit Schrift prüfst du außerdem den Kontrast, also wie gut sich Schrift und Hintergrund abheben. Das geht schnell mit meinem kostenlosen Kontrast-Checker.
Wann das alles Sinn macht und wann nicht
Verkleinern lohnt sich immer. Es kostet dich eine Minute und spart bei jedem Besuch Ladezeit. Das gilt besonders für Bilder auf der Startseite und auf viel besuchten Seiten.
Beim Format darfst du pragmatisch sein. Ein gut verkleinertes JPEG ist besser als ein riesiges WebP. Wenn dein Programm kein WebP speichern kann, nimm JPEG und konzentrier dich auf die Größe.
SVG ist ein Sonderfall. Eine SVG-Datei kann Programmcode enthalten. Deshalb ist das Hochladen in WordPress oft gesperrt. Lade SVG nur hoch, wenn dein Webmaster das bewusst freigeschaltet hat.
Und Plugins, die Bilder automatisch umwandeln? Sie sind bequem und können WebP oder AVIF erzeugen. Das Verkleinern vor dem Upload ersetzen sie aber nicht. Das Original landet trotzdem in voller Größe auf dem Server. Wenn deine Website insgesamt langsam ist, liegt das oft nicht nur an Bildern. Wie du die Ladezeit misst, steht im Beitrag zu Core Web Vitals.
Checkliste: Bilder vorbereiten
Hake ab, was bei deinem nächsten Bild schon passt. Dein Stand bleibt in diesem Browser gespeichert.
- Das Foto ist verkleinert. Schau in den Datei-Infos nach der Breite in Pixel. Für die Website reichen meist 1600 bis 2000 Pixel. Frag deinen Webmaster nach dem passenden Wert.
- Das Format passt zum Bild. Fotos als WebP oder JPEG, Screenshots und Grafiken mit Schrift als PNG oder verlustfreies WebP.
- Die Datei ist klein genug. Ein Foto sollte nicht mehrere Megabyte haben. Ein paar hundert Kilobyte reichen meist.
- Der Dateiname sagt, was zu sehen ist. Kurz, Kleinbuchstaben, Bindestriche, keine Umlaute und Leerzeichen.
- Wichtiger Text steht nicht nur im Bild. Öffnungszeiten, Preise und Termine stehen auch im Text der Seite.
- Der Alt-Text ist ausgefüllt. Öffne das Bild in der Mediathek. Beschreibt das Feld „Alternativer Text“, was wichtig ist?
- Das Bild ist nicht schon in der Mediathek. Such vor dem Hochladen nach dem Motiv. Doppelte Bilder kosten Speicher und Übersicht.
Häufige Fragen
Welches Bildformat ist das beste für WordPress?
Für Fotos WebP, oder AVIF, wenn dein Server es unterstützt. Für Screenshots und Grafiken mit Schrift PNG oder verlustfreies WebP. JPEG ist für Fotos weiterhin in Ordnung, wenn nichts anderes geht.
Warum heißt mein Bild plötzlich „-scaled“?
Das Bild war breiter oder höher als 2560 Pixel. WordPress hat es seit Version 5.3 automatisch verkleinert. Das Original liegt trotzdem noch auf dem Server. Besser ist es, das Bild schon vor dem Hochladen zu verkleinern.
Bringt der Dateiname etwas für Google?
Ein wenig. Google spricht von „sehr leichten Hinweisen“. Ein sprechender Name hilft aber auch dir, weil du das Bild in der Mediathek schneller wiederfindest.
Kann ich AVIF hochladen?
Ab WordPress 6.5, wenn der Server es unterstützt. Das prüfst du unter Werkzeuge → Website-Zustand im Reiter „Bericht“ bei der Medienverarbeitung. Im Zweifel fragst du deinen Webmaster.
Mit welchem Programm verkleinere ich Bilder?
Für den Anfang reichen die Bordmittel deines Computers. Fast jedes Bildprogramm hat eine Funktion zum Ändern der Größe und zum Exportieren in einem anderen Format. Ob dein Programm WebP speichern kann, hängt von der Version ab. Sonst speicherst du als JPEG.
Bilder richtig zuschneiden und optimieren gehört zu den Themen meiner WordPress-Schulungen. Der Einstieg ist der WordPress-Führerschein: 4 Stunden live per Zoom, höchstens 5 Personen, mit Aufzeichnung und Anleitungen als PDF. Weiter in der Serie geht es mit den Bildrechten auf der Website: Welche Fotos darfst du überhaupt verwenden?
Quellen
- HTTP Archive (2024): Web Almanac 2024, Kapitel Page Weight
- HTTP Archive (2024): Web Almanac 2024, Kapitel Media
- MDN Web Docs: Image file type and format guide
- Make WordPress Core (2019): Introducing handling of big images in WordPress 5.3
- Make WordPress Core (2024): WordPress 6.5 adds AVIF support
- Google Search Central: Image SEO best practices
