WordPress: Bildoptimierung richtig machen – welche Formate und Tools die besten sind

Warum Bilder deine Seite bremsen

Bilder machen Seiten hĂŒbsch.
Aber sie machen sie auch langsam – wenn Du’s falsch machst.

Viele Seiten im KMU-Umfeld laden 2-8 MB Bilder auf die Startseite.
Weil:
– kein Resize
– falsches Format
– keine Kompression
– kein Lazy Load

Wenn Du Performance willst, musst Du Bilder ernst nehmen.

Die richtigen Formate: Wann was?

FormatWann verwendenVorteile
JPEGFotos mit vielen Farbenklein, ĂŒberall unterstĂŒtzt
PNGLogos mit Transparenzverlustfrei, scharf
WebPfĂŒr alles, was modern sein darfklein, schnell, unterstĂŒtzt (außer IE)
AVIFmaximaler Komprimierung, wenn möglichsehr klein, aber noch buggy
SVGIcons, Vektorenwinzig, aber potenzielles Risiko

Meine Empfehlung:
Fotos als WebP. Logos als SVG oder PNG.
Keine AVIF in KMU ohne Absicherung.

WordPress: Automatische Umwandlung beim Upload

add_filter('wp_handle_upload_prefilter', 'ds_webp_umwandlung');

function ds_webp_umwandlung($file) {
    if (!function_exists('imagewebp')) return $file;

    $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
    if (!in_array(strtolower($ext), ['jpg', 'jpeg', 'png'])) return $file;

    $tmp_path = $file['tmp_name'];
    $webp_path = $tmp_path . '.webp';

    $image = ($ext === 'png') ? imagecreatefrompng($tmp_path) : imagecreatefromjpeg($tmp_path);
    imagewebp($image, $webp_path, 85);
    imagedestroy($image);

    $file['tmp_name'] = $webp_path;
    $file['name'] = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file['name']);
    $file['type'] = 'image/webp';

    return $file;
}

Achtung: Funktioniert nur, wenn libwebp am Server aktiv ist.
Bei Shared Hosting meist nicht – dann brauchst Du ein Plugin.

Plugins, die wirklich was bringen

PluginFunktionKommentar
ShortPixelWebP + Resize + KompressionDSGVO-konform mit API
EWWW Image Optimizerlokal, keine API nötiggute Kontrolle
Smusheinfach, aber begrenzt in Freemit Pro nĂŒtzlich
WebP Expressnur Umwandlung nach WebPohne Resize

Tipp: Nutze Lazy Load zusÀtzlich (loading="lazy" ist Standard ab WP 5.5).

BildgrĂ¶ĂŸen in WordPress definieren

add_image_size('ds_teaser', 600, 400, true); // hartes Crop

Dann im Theme:

echo wp_get_attachment_image($bild_id, 'ds_teaser');

So stellst Du sicher, dass nur das geladen wird, was Du brauchst.

Serverseitige Bildoptimierung per CLI

Wenn Du Shell-Zugriff hast:

find wp-content/uploads -iname "*.jpg" -exec jpegoptim --strip-all --max=85 {} \;
find wp-content/uploads -iname "*.png" -exec optipng -o7 {} \;

Oder mit cwebp direkt WebP erzeugen:

cwebp -q 80 bild.jpg -o bild.webp

Mein Fazit

Bilder sind der grĂ¶ĂŸte Performance-Hebel bei KMU-Seiten.
Nicht wegen Design. Sondern wegen Ladezeit und Core Web Vitals.

Wenn Du’s richtig machst, sparst Du 2-5 Sekunden pro Seite.
Und damit AbsprĂŒnge, Nerven und Rankingpunkte.

Wenn Du willst, analysier ich Dein Setup. Und sag Dir, wo’s hakt.
Kurz, ehrlich, lösungsorientiert.

Schlagwörter:

BildoptimierungWebsiteWordPress