Prüfpunkt co2.bild.unscharfBilder
Warum werden Bilder in WordPress unscharf?
Meist liefert WordPress eine zu kleine Fassung aus. Beim Hochladen legt WordPress mehrere kleinere Fassungen eines Bildes an und setzt in die Seite die ein, die Theme oder Editor verlangen. Ist diese Fassung schmaler als die Spalte, streckt der Browser sie, und das Bild wirkt weich. Dazu kommen die Komprimierung jeder Fassung und, bei sehr großen Fotos, eine Verkleinerung beim Hochladen.
Die Fassungen, die WordPress anlegt
In der Grundeinstellung erzeugt WordPress beim Hochladen Fassungen mit höchstens 150, 300, 768, 1.024, 1.536 und 2.048 Pixeln Breite; die mit 150 Pixeln ist quadratisch zugeschnitten. Im HTML steht die gewählte Fassung im src und die übrigen im srcset. Dazu setzt WordPress sizes auf die Breite der gewählten Fassung, etwa (max-width: 300px) 100vw, 300px. Der Browser geht dann von 300 Pixeln aus und lädt die passende kleine Datei. Zieht das Theme das Bild per CSS auf 700 Pixel, streckt er diese Datei. Seit Version 6.7 setzt WordPress bei Bildern mit loading="lazy" zusätzlich auto in sizes; Browser, die das kennen, rechnen dann mit der echten Breite.
Jede Fassung wird neu komprimiert
WordPress speichert die verkleinerten Fassungen als JPEG mit der Qualitätsstufe 82 und als WebP mit 86. Bei Fotos mit feinen Kanten, Schrift oder Verläufen kann das sichtbar werden. Die Stufe lässt sich mit dem Filter wp_editor_set_quality ändern, etwa in einem kleinen Plugin oder in der Datei functions.php eines Child-Themes. Sie gilt für Fassungen, die danach entstehen; für vorhandene Bilder lassen Sie die Bildgrößen neu erzeugen.
Große Fotos verkleinert WordPress beim Hochladen
Seit Version 5.3 verkleinert WordPress jedes Bild, dessen Breite oder Höhe 2.560 Pixel übersteigt, auf diese Grenze; die Datei endet dann auf -scaled. Das Original bleibt im Upload-Ordner. Im Web Almanac 2024 war das breiteste Bild einer Seite am Desktop im Median 680 Pixel breit. Unscharf wird die verkleinerte Fassung erst, wenn ein Bild breiter als 1.280 Pixel erscheint und ein hochauflösender Bildschirm die doppelte Breite verlangt. Mit dem Filter big_image_size_threshold lässt sich die Grenze verschieben oder abschalten.
Beispiele
Bild im Theme breiter als die Fassung
<img src="/wp-content/uploads/werkstatt-300x200.jpg"
srcset="/wp-content/uploads/werkstatt-300x200.jpg 300w,
/wp-content/uploads/werkstatt-768x512.jpg 768w,
/wp-content/uploads/werkstatt-1536x1024.jpg 1536w"
sizes="(max-width: 300px) 100vw, 300px" style="width:700px"><img src="/wp-content/uploads/werkstatt-768x512.jpg"
srcset="/wp-content/uploads/werkstatt-768x512.jpg 768w,
/wp-content/uploads/werkstatt-1536x1024.jpg 1536w"
sizes="(max-width: 700px) 100vw, 700px" width="768" height="512">Mit sizes gleich der echten Spaltenbreite wählt der Browser am einfachen Bildschirm die Datei mit 768 Pixeln und bei doppelter Pixeldichte die mit 1.536.
Qualitätsstufe für JPEG anheben
// ohne Filter: JPEG-Fassungen mit Qualitätsstufe 82add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
return 'image/jpeg' === $mime_type ? 90 : $quality;
}, 10, 2 );Gilt für Fassungen, die danach entstehen. Eine höhere Stufe heißt größere Dateien; vergleichen Sie an einem Foto, ob der Unterschied sichtbar ist.
So gehen Sie es an
- Suchen Sie die Adresse des unscharfen Bildes im Quelltext der Seite. Die Endung zeigt die Fassung, etwa -300x200.jpg.
- Vergleichen Sie diese Breite mit der Breite der Spalte, in der das Bild erscheint.
- Wählen Sie im Editor eine größere Bildgröße oder lassen Sie im Theme sizes auf die echte Spaltenbreite setzen.
- Ändern Sie Qualität oder Theme, lassen Sie danach die Bildgrößen neu erzeugen, etwa mit der Erweiterung Regenerate Thumbnails.
Mehr zu diesem Thema
Weiter im Prüfbereich CO₂ & EmpCo
- Was darf meine Website seit dem 27. September 2026 über die Umwelt sagen?Seit 27.09.2026 gelten in Deutschland und Österreich die EmpCo-Regeln im UWG: was unzulässig ist, was erlaubt bleibt, warum Übergangsregeln nur Waren betreffen.
- Spart eine schlanke Website Geld, und was sagt der CO₂-Wert wirklich?Was eine schwere Website kostet: beim Hoster Cent, beim Kunden Wartezeit. Was der CO₂-Wert je Aufruf bedeutet, wo das Modell endet, wie KI-Anfragen dazu stehen.
- Warum ist eine SVG-Grafik mit eingebettetem Foto ein Befund?Enthält eine SVG-Grafik im HTML der Seite ein eingebettetes Rasterbild über 50 KB, meldet die Prüfung es. Als eigene WebP- oder AVIF-Datei ist es kleiner.
- Warum sollen kleine Symbole als SVG statt als PNG kommen?Symbole bis 48 Pixel Anzeigebreite als PNG, JPEG, GIF oder BMP meldet die Prüfung als Hinweis. Als SVG sind sie bei jeder Pixeldichte scharf und meist kleiner.
Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
