Bilder für WordPress komprimieren

Wie viel deine Fotos wirklich wiegen

Eine Handyaufnahme, frisch aus der Kamera, wiegt meist zwischen 3 und 5 MB. Sie hat 12 Megapixel oder mehr, also rund 4000 × 3000 Pixel, und ist für ein Display gemacht, das du beliebig vergrößern kannst. Auf einer Webseite braucht dasselbe Bild nicht einmal ein Zehntel davon. Wer es trotzdem so in die Mediathek hochlädt, schickt jedem Besucher Megabytes, die der Browser anschließend wieder herunterrechnet.

Schau dir an, wie breit Bilder in deinem Theme tatsächlich angezeigt werden. Der Inhaltsbereich eines typischen WordPress-Themes ist 700 bis 1200 Pixel breit, ein Hero- oder Titelbild über die volle Breite selten mehr als 1600 bis 1920 Pixel. Mit Blick auf hochauflösende Displays landest du für die meisten Bilder bei 800 bis 1600 Pixeln an der langen Seite. Alles darüber sieht niemand, es kostet nur Ladezeit.

Bilder, die zu viel wiegen, sind auf vielen Websites der größte Einzelposten beim Laden. Das spürst du vor allem mobil: Das Titelbild ist oft das größte sichtbare Element der Seite, und solange es nicht da ist, wirkt die Seite leer. Genau dieses Element misst Google beim Largest Contentful Paint, einem der Core Web Vitals.

Wie groß sollte ein Bild für eine Website sein? Es gibt keine feste Grenze, aber brauchbare Faustregeln: Ein Beitragsbild im Fließtext kommt gut mit 100 bis 200 KB aus, ein großes Titelbild mit 200 bis 400 KB, kleine Vorschaubilder und Logos mit deutlich weniger. Wenn ein einzelnes Bild über 500 KB liegt, lohnt sich fast immer ein zweiter Blick. Diese Werte sind keine Vorschrift, sondern ein Maßstab: Entscheidend ist, dass du am Bildschirm keinen Unterschied zum Original siehst.

WordPress hilft dir nur zum Teil. Beim Hochladen legt es zwar mehrere kleinere Varianten an (Vorschaubild, mittel, groß) und verkleinert seit Version 5.3 Fotos, die an der langen Seite mehr als 2560 Pixel haben. Das Original bleibt aber auf dem Server liegen, die Kompression der Varianten ist eher zurückhaltend, und Metadaten bleiben je nach Server erhalten. Wer schon vor dem Upload die Größe festlegt, hat die Kontrolle über das, was ausgeliefert wird.

Bilder für das Web optimieren: drei Hebel in der richtigen Reihenfolge

Um Bilder für das Web zu optimieren, hast du drei Hebel. Sie wirken unterschiedlich stark, und die Reihenfolge ist wichtig.

1. Die lange Seite verkleinern. Die Dateigröße hängt grob an der Zahl der Pixel, und die Pixelzahl wächst mit dem Quadrat der Kantenlänge. Halbierst du die Breite von 4000 auf 2000 Pixel, bleibt nur noch ein Viertel der Pixel übrig. Gehst du auf 1600 Pixel, sind es etwa 16 Prozent des Originals. Kein anderer Schritt spart so viel, und keiner fällt so wenig auf, weil das Bild ohnehin nie größer angezeigt wird.
2. Das Format wählen. Dasselbe Bild in denselben Abmessungen wird als WebP oder AVIF in der Regel deutlich kleiner als als JPEG, ohne dass du am Bildschirm einen Unterschied siehst. Ein Foto als PNG zu speichern ist dagegen der häufigste Grund für Dateien, die ohne erkennbaren Grund mehrere Megabyte wiegen.
3. Die Qualität senken. Der Qualitätsregler ist der Feinschliff. Zwischen Qualität 95 und 80 siehst du bei einem normalen Foto praktisch nichts, die Datei schrumpft aber spürbar. Unterhalb von etwa 60 tauchen je nach Motiv Blockartefakte an Kanten, Farbsäume oder verschmierte Flächen im Himmel auf.

Der typische Fehler ist, die Reihenfolge umzudrehen: Man lässt das Bild bei 4000 Pixeln und dreht die Qualität so lange herunter, bis die Datei klein genug ist. Dann sieht das Ergebnis matschig aus, obwohl es mit einer kleineren Kantenlänge und Qualität 80 sauber und leichter gewesen wäre. Erst die Größe, dann das Format, zuletzt die Qualität.

Ein Sonderfall sind Bilder, die zu klein sind. Wenn ein Foto nur 600 Pixel breit ist und im Theme auf 1200 Pixel gestreckt wird, wirkt es weich. Hier hilft Komprimieren nicht, sondern du kannst das Bild vergrößern und es danach auf die passende Größe komprimieren. Für Illustrationen, Grafiken und flache Zeichnungen gibt es das eigene Werkzeug, um Anime und Illustrationen zu vergrößern.

Welches Format: JPEG, WebP, AVIF oder PNG?

Welches Format du hochlädst, hängt davon ab, wo das Bild landet und was es enthält.

• JPEG, wenn volle Kompatibilität zählt: Newsletter, E-Mail-Anhänge, ältere Plugins, Kunden, die Bilder weiterverwenden, oder Plattformen, die nichts anderes annehmen. Jedes Programm und jeder Browser öffnet JPEG.
• WebP als ausgewogene Wahl fürs Web. Alle aktuellen Browser zeigen es an, WordPress nimmt es seit Version 5.8 in der Mediathek an, und es unterstützt sowohl Fotos als auch Transparenz. Wenn du dich für ein Standardformat für deinen Blog entscheiden willst, ist es meist WebP.
• AVIF, wenn das Gewicht entscheidet. Bei gleichem sichtbaren Eindruck wird es oft noch kleiner als WebP, besonders bei großen Titelbildern mit weichen Verläufen. WordPress akzeptiert AVIF seit Version 6.5; ob Vorschaubilder daraus erzeugt werden, hängt davon ab, ob die Bildbibliothek deines Servers AVIF kann. Das Kodieren dauert etwas länger als bei den anderen Formaten.
• PNG nur, wenn du Transparenz brauchst, zum Beispiel für ein freigestelltes Produkt oder ein Logo, und kein WebP verwenden willst. Für Fotos ist PNG das falsche Format: Es ist verlustfrei und wird deshalb ein Vielfaches größer als ein JPEG.

Ein praktisches Beispiel: Für einen Onlineshop stellst du ein Produkt frei, um den Hintergrund aus einem Foto zu entfernen. Das Ergebnis mit transparentem Hintergrund ist ein PNG mit mehreren Megabyte. Brauchst du die Transparenz auf der Seite gar nicht, weil dein Shop ohnehin einen weißen Hintergrund hat, setz direkt einen weißen Hintergrund und speichere als JPEG oder WebP. Brauchst du sie, nimm WebP mit Alphakanal statt PNG.

Wenn du Fotos vom iPhone hochladen willst, liegen sie oft als HEIC vor. Viele WordPress-Installationen können damit nichts anfangen oder wandeln sie nicht sauber um. Warum das so ist und was du tun kannst, steht im Beitrag HEIC in JPG umwandeln. Beim Komprimieren in Airpic kannst du HEIC direkt als Eingabe verwenden und als JPEG, WebP oder AVIF ausgeben.

Metadaten entfernen, Farbprofil behalten

In jeder Handyaufnahme steckt mehr als das Bild. Die EXIF-Daten enthalten Aufnahmedatum und Uhrzeit, Kameramodell und Objektiv, Belichtungswerte, oft ein eingebettetes Vorschaubild und, wenn die Ortung aktiv war, die GPS-Koordinaten des Aufnahmeorts. Fotografierst du ein Produkt in deiner Wohnung und lädst das Original hoch, kann jeder, der die Datei herunterlädt, sehen, wo sie entstanden ist.

Metadaten zu entfernen hat deshalb zwei Vorteile. Die Datei wird ein Stück leichter, bei kleinen Bildern, bei denen die Metadaten einen spürbaren Anteil ausmachen, sogar deutlich. Und du gibst keine Informationen preis, die mit dem Inhalt der Seite nichts zu tun haben. Für ein Bild im Blog brauchst du weder Kameramodell noch Belichtungszeit.

Eine Sache solltest du allerdings behalten: das ICC-Farbprofil. Es beschreibt, in welchem Farbraum die Werte der Pixel gemeint sind. Viele aktuelle Handys fotografieren in einem größeren Farbraum als sRGB, zum Beispiel Display P3. Wirft man das Profil weg, interpretiert der Browser die Zahlen als sRGB, und das Bild wirkt plötzlich blasser, flauer oder leicht farbverschoben, vor allem bei Rot- und Orangetönen und bei Hauttönen. Das Profil kostet nur wenige Kilobyte und sorgt dafür, dass die Farben so ankommen, wie sie fotografiert wurden.

Airpic macht genau diese Trennung: Die Option zum Entfernen der Metadaten löscht Datum, Kamera, GPS und den Rest, behält aber das ICC-Profil. Auch die Ausrichtung wird vorher angewendet, also steht ein hochkant fotografiertes Bild nach dem Entfernen der EXIF-Daten nicht plötzlich auf der Seite.

Ein Hinweis, damit du dich nicht wunderst: Manche Server entfernen beim Erzeugen der Vorschaubilder ebenfalls Metadaten, andere nicht. Wenn du die Datei schon sauber hochlädst, bist du davon unabhängig, und auch das Original in der Mediathek enthält keinen Standort mehr.

Schritt für Schritt: Bilder zu groß für die Website? So komprimierst du sie in Airpic

So bringst du ein Foto in Airpic auf ein Gewicht, das für deine WordPress-Seite passt. Das Werkzeug zum Bilder komprimieren läuft auf der CPU und braucht meist nur ein paar Sekunden pro Bild. Und es ist komplett kostenlos: Verarbeiten und Herunterladen verbrauchen weder Credits noch dein monatliches Gratis-Kontingent, ein Konto brauchst du auch nicht.

1. Bild hochladen. Öffne die Seite, um Bilder komprimieren, und zieh dein Foto in das Feld, wähle es aus oder füge es mit Strg+V ein. Angenommen werden JPG, PNG (auch mit Transparenz und 16 Bit), WebP, TIFF, HEIC und AVIF.
2. Lange Seite festlegen. Trag bei der maximalen Seitenlänge den Wert ein, den dein Theme braucht, zum Beispiel 1600 für ein Titelbild oder 1200 für ein Bild im Beitrag. Das ist der Schritt mit der größten Wirkung.
3. Format wählen. WebP für die meisten Blogbilder, AVIF, wenn jedes Kilobyte zählt, JPEG für maximale Kompatibilität, PNG nur bei Transparenz.
4. Qualität oder Zielgröße einstellen. Entweder du stellst den Qualitätsregler ein, ein guter Startpunkt ist ein Wert um 80, oder du gibst eine Zielgröße in KB vor, etwa 150 für ein Beitragsbild. Dann sucht das Werkzeug selbst die passende Qualität.
5. Metadaten entfernen. Aktiviere die Option, damit Datum, Kamera und Standort verschwinden. Das ICC-Profil bleibt erhalten.
6. Ergebnis prüfen und herunterladen. Vergleiche mit dem Schieberegler Vorher und Nachher, am besten mit der 100-Prozent-Ansicht an Kanten, Schrift und Gesichtern. Die neue Dateigröße steht direkt auf dem Download-Knopf. Dann hochladen in die Mediathek, fertig.

Wenn du mehrere Bilder für einen Beitrag vorbereitest, halte dich an dieselben Werte für alle, dann wirkt die Seite einheitlich und du musst nicht jedes Mal neu überlegen. Deine Dateien werden eine Stunde nach dem Download gelöscht, spätestens nach einem Tag, und nie zum Trainieren verwendet. Mehr Hintergrund zu Formaten und Qualitätsstufen findest du in der Anleitung Bilder fürs Web komprimieren, ohne Qualität zu verlieren. Und wenn dein nächstes Foto vorher noch Rauschen aus einer dunklen Aufnahme hat, kannst du erst das Bildrauschen entfernen und danach komprimieren: Ein sauberes Bild wird bei gleicher Qualität auch kleiner.

Bereit? Hier kannst du deine Bilder für WordPress komprimieren, kostenlos und ohne Anmeldung.

FAQ

Weiterlesen