Bildgrößen für WordPress: welche Maße und Dateigrößen passen

Wie erzeugt WordPress Bildgrößen?

Beim Hochladen legt WordPress von jedem Foto mehrere verkleinerte Fassungen an; die Höchstmaße der wichtigsten stehen unter Einstellungen → Medien im Bereich „Bildgrößen“. In einer neuen Installation von WordPress 7.1 sind das:

• Vorschaubilder: 150 × 150 Pixel. Ist der Haken „Vorschaubild auf exakte Maße zuschneiden (Vorschaubilder sind normalerweise proportional)“ gesetzt, wie in der Grundeinstellung, schneidet WordPress das Bild auf genau dieses Quadrat zu.
• Mittelgroß: höchstens 300 Pixel breit und hoch („Maximale Breite“, „Maximale Höhe“), proportional verkleinert, also ohne Beschnitt.
• Groß: höchstens 1.024 × 1.024 Pixel, ebenfalls proportional.

Dazu kommen Größen, die dort nicht stehen: eine Fassung mit 768 Pixeln Breite seit WordPress 4.4 und zwei mit höchstens 1.536 und 2.048 Pixeln seit WordPress 5.3, gedacht für große Bildschirme mit hoher Pixeldichte. Ihr Theme, also die Gestaltungsvorlage, und manche Plugins (Erweiterungen) melden eigene Größen an. Die hochgeladene Datei heißt in der Auswahl „Originalgröße“; bei Fotos über 2.560 Pixel ist das die verkleinerte Fassung mit „-scaled“, mehr dazu im nächsten Abschnitt.

Ändern Sie die Maße, gilt das nur für Bilder, die Sie danach hochladen. Für vorhandene Bilder braucht es ein Plugin, das die Größen neu erzeugt. Weil es alle Bilder anfasst, sichern Sie vorher (WordPress-Backup) und probieren es am besten erst auf einer Testkopie aus (WordPress-Staging).

Was macht WordPress mit sehr großen Fotos?

Ist ein Bild breiter oder höher als 2.560 Pixel, verkleinert WordPress es seit Version 5.3 beim Hochladen auf diese Grenze und nutzt die verkleinerte Fassung als größtes Bild; ihr Dateiname bekommt den Zusatz „-scaled“. Das Original bewahrt WordPress auf dem Server auf. Ein Foto mit 4.000 Pixeln Breite kostet Sie also Speicherplatz und Zeit beim Hochladen, Ihren Besuchern aber keine zusätzliche Ladezeit.

Seit WordPress 7.1 übernimmt diese Arbeit beim Hochladen im Block-Editor (Gutenberg), dem Bearbeitungsfenster für Seiten und Beiträge, der Browser: in Chrome und Edge ab Version 137, sofern die Website über https läuft, also verschlüsselt. Die Grenze von 2.560 Pixeln gilt dort genauso. In Firefox und Safari arbeitet laut WordPress-Entwicklerblog weiter der Server.

Wie sucht der Browser die passende Größe aus?

Seit WordPress 4.4 schreibt WordPress zu jedem Bild aus der Mediathek, der Bildverwaltung von WordPress, eine Liste seiner Größen in den Quelltext (das Attribut srcset). Der Browser wählt daraus die Fassung, die zur Breite des Bildschirms und zu seiner Pixeldichte passt, auf dem Handy also eine kleinere als am großen Monitor. In diese Liste nimmt WordPress in der Grundeinstellung Fassungen bis 2.048 Pixel Breite auf.

Das funktioniert nur, wenn Sie Bilder über die Mediathek oder den Bild-Block einfügen, nicht über eine kopierte Bildadresse. Im Bild-Block wählen Sie in der Seitenleiste unter „Auflösung“, welche Fassung als Ausgangsbild dient: „Vorschaubild“, „Mittel“, „Groß“ oder „Originalgröße“. Für ein Bild über die ganze Inhaltsbreite nehmen Sie „Groß“ oder „Originalgröße“, für ein kleines Bild neben Text reicht „Mittel“.

Welche Bildgröße ist für eine Website sinnvoll?

Sinnvoll ist ein Bild, das etwa doppelt so breit ist wie die Fläche, auf der es höchstens erscheint. Wie breit diese Fläche ist, legt Ihr Theme fest, deshalb gibt es kein Maß, das für jede Website passt.

Der Faktor 2 ist unsere Annahme für Bildschirme mit hoher Pixeldichte: Dort kommen auf einen Bildpunkt der Seite zwei oder mehr Pixel des Displays, so beschreibt es die Entwickler-Dokumentation von Mozilla (MDN). Ein Bild in genau der Breite der Fläche wirkt dort weniger scharf. Noch höhere Faktoren machen die Datei größer, ohne dass die Fläche wächst; der Faktor 2 ist deshalb ein Kompromiss zwischen Schärfe und Dateigröße.

Beispielrechnung mit Twenty Twenty-Five, dem Standard-Theme, das mit WordPress 7.1 installiert wird. Laut seiner Einstellungsdatei theme.json ist die Inhaltsbreite 645 Pixel und die erweiterte Breite 1.340 Pixel:

• Ein Foto in der normalen Inhaltsbreite: 645 × 2 = 1.290 Pixel Breite genügen.
• Ein Foto in der erweiterten Breite: 1.340 × 2 = 2.680 Pixel. Das liegt über der Grenze von 2.560 Pixeln, die WordPress ohnehin anwendet; mehr als 2.560 Pixel an der längeren Seite muss das Foto also nicht haben.
• Ein Foto in einer von zwei Spalten: Auf Bildschirmen unter 782 Pixeln Breite, also auf dem Handy und auf kleinen Tablets, setzt WordPress Spalten in der Grundeinstellung untereinander, und jede Spalte wird so breit wie die Inhaltsbreite, also bis zu 645 Pixel. Nach der Regel oben braucht das Bild deshalb auch hier rund 1.290 Pixel.

Für Ihr eigenes Theme rechnen Sie genauso. Bei einem Block-Theme stehen die Werte „Inhaltsbreite“ und „Erweiterte Breite“ im Website-Editor unter Design → Editor in den Stilen im Bereich Layout. Bei anderen Themes oder einem Page-Builder fragen Sie den Anbieter oder den, der die Website gebaut hat. Bei einem Relaunch mit neuem Theme ändern sich die Flächen, dann lohnt es sich, die Bildgrößen neu zu prüfen (WordPress-Relaunch).

Welches Format passt: JPEG, PNG, WebP oder AVIF?

Für Fotos nehmen Sie JPEG, WebP oder AVIF, für Grafiken mit klaren Kanten oder durchsichtigem Hintergrund, etwa Logos und Bildschirmfotos, PNG. PNG speichert ohne Verlust; für Fotos wird die Datei laut WordPress-Dokumentation in der Regel größer als ein JPEG.

• WebP können Sie seit WordPress 5.8 hochladen. Laut WordPress-Entwicklerblog sind WebP-Bilder im Schnitt rund 30 Prozent kleiner als vergleichbare JPEG- oder PNG-Dateien.
• AVIF geht seit WordPress 6.5; laut Entwicklerblog können AVIF-Bilder bei gleicher Qualität bis zu 50 Prozent kleiner sein als JPEG.
• Voraussetzung: Beides braucht eine Bildbibliothek auf dem Server, die das Format kann. Ob das so ist, sehen Sie unter Werkzeuge → Website-Zustand im Reiter „Bericht“, Bereich „Medienverarbeitung“ (den Website-Zustand kennen Sie aus Kapitel 3). Seit WordPress 7.1 lassen sich AVIF-Bilder im Block-Editor mit Chrome oder Edge auch hochladen, wenn der Server sie nicht verarbeiten kann.
• Umwandeln: Von selbst macht WordPress aus einem JPEG kein WebP oder AVIF. Das übernimmt ein Plugin, etwa Modern Image Formats vom Performance-Team von WordPress, oder Sie speichern das Bild schon im Bildprogramm im gewünschten Format.

Wie Bilder mit dem übrigen Tempo der Website zusammenhängen, steht im Ratgeber WordPress schneller machen.

Wie klein sollte die Datei eines Bildes sein?

So klein, wie es geht, ohne dass man dem Foto die Komprimierung ansieht; eine feste Grenze in Kilobyte, die für jede Website gilt, gibt es nicht. Google nennt Bilder einen der größten Anteile am Gewicht einer Seite, und zu schwere Bilder können eine Seite langsam machen. Die Dateigröße hängt an zwei Stellschrauben: den Maßen in Pixeln und der Stärke der Komprimierung.

1. Maße zuerst: Bringen Sie das Foto auf die Breite aus der Rechnung oben. Das spart mehr als jede Komprimierung.
2. Dann komprimieren: Beim Speichern als JPEG, WebP oder AVIF stellen Sie im Bildprogramm die Qualität ein. Vergleichen Sie das Ergebnis in voller Größe mit dem Original und gehen Sie so weit herunter, bis Unterschiede sichtbar werden, dann eine Stufe zurück.
3. Nachsehen: In der Mediathek zeigt WordPress bei jedem Bild Maße und „Dateigröße:“. PageSpeed Insights, das Messwerkzeug von Google, nennt Bilder, die größer sind als nötig.

Laden Sie Fotos direkt vom Handy hoch, können Sie das Verkleinern und Komprimieren einem Plugin überlassen; welche Plugins eine Website braucht, steht in Kapitel 6.

Wie schreiben Sie gute Alt-Texte?

Ein guter Alt-Text beschreibt in einem kurzen Satz, was auf dem Bild zu sehen ist und wozu es auf der Seite steht. Programme, die Menschen mit Sehbehinderung die Seite vorlesen, lesen ihn vor. Google nennt den Alt-Text das wichtigste Attribut, um einer Suchmaschine mehr über ein Bild mitzuteilen.

• Wo: in der Mediathek im Feld „Alternativtext“, am besten gleich nach dem Hochladen, oder in der Seitenleiste des Bild-Blocks. Dort verweist WordPress mit „Beschreibe den Zweck des Bildes.“ auf eine Entscheidungshilfe des W3C, des Gremiums für Web-Standards.
• Wie: „Neu gefliestes Bad mit bodengleicher Dusche in einem Altbau“ statt „Bad Badsanierung Fliesen Dusche günstig“. Google rät ausdrücklich davon ab, Alt-Texte mit Suchbegriffen zu füllen.
• Schmuckbilder: Ein Bild, das nur schmückt, bekommt keinen Alt-Text. Im Bild-Block von WordPress 7.1 setzen Sie dafür den Haken „Als dekorativ markieren“; in der Mediathek steht dazu: „Leer lassen, wenn das Bild nur als dekoratives Element dient.“
• Dateiname: kurz und beschreibend, etwa badsanierung-dusche-altbau.jpg statt IMG_4711.jpg, so empfiehlt es auch Google.

Wie Sie Fotos beim Bauen der Seiten einbinden, steht in Kapitel 7; vor dem Livegang prüfen Sie, ob alle Bilder da sind (Kapitel 10).

Wie verwenden Sie Handyfotos richtig?

Handyfotos verwenden Sie richtig, wenn Sie quer fotografieren, wo das Bild breit erscheint, vor dem Hochladen verkleinern und Standortangaben entfernen. Die Fotos liefern Sie selbst, mit eigenen Aufnahmen oder über einen Fotografen vor Ort, denn echte Bilder aus Ihrer Arbeit zeigen, wer Sie sind und was Sie können.

• Quer für breite Flächen: Titelbilder und Bilder über die ganze Breite fotografieren Sie im Querformat. Ein Hochformat schneiden manche Themes dort zu.
• Licht statt Zoom: Tageslicht, ruhiger Hintergrund, aufgeräumter Arbeitsplatz. Gehen Sie näher heran, statt digital zu zoomen; der Digitalzoom vergrößert nur einen Ausschnitt und kostet Bildpunkte.
• Standort entfernen: Ist in der Kamera-App die Ortung eingeschaltet, steckt der Aufnahmeort in der Datei. Weil WordPress das Original aufbewahrt, entfernen Sie diese Angaben vor dem Hochladen oder schalten die Ortung für die Kamera ab, besonders bei Fotos, die bei Kunden zu Hause entstanden sind.
• HEIC vom iPhone: Seit WordPress 6.7 wandelt der Server HEIC-Bilder beim Hochladen in JPEG um, wenn seine Bildbibliothek das kann; sonst erscheint ein Hinweis, das Bild selbst umzuwandeln. Seit WordPress 7.1 erledigt das im Block-Editor auch der Browser, laut Entwicklerblog in Chrome und Edge mit passender Systemunterstützung und in Safari auf dem Mac.
• Rechte: Fotos von Personen nur mit deren Einverständnis, wie in Kapitel 7 beschrieben; im Zweifel fragen Sie eine Anwältin oder einen Anwalt, Ihre Kammer oder Ihren Verband.

Wenn wir eine Website für Sie bauen, sagen wir Ihnen, welche Motive gebraucht werden, und bereiten die Bilder auf: zuschneiden, verkleinern, benennen. Einen Fototermin bieten wir nicht an. In unserer WordPress-Wartung für 69 € im Monat zzgl. MwSt. sind kleine Änderungen bis zu 60 Minuten im Monat enthalten, etwa ein neues Bild einsetzen.