Wenn die Seite träge wird, sind die Bilder meist schuld

Große Bilder. Falsches Format.
Kein Lazy Loading. Keine Skalierung.

Dann brauchst Du Dich über lange Ladezeiten nicht wundern.
Und auch nicht über schwache Core Web Vitals.

Ich zeig Dir, wie ich’s mache – ohne Pluginschlacht, aber mit Verstand.

Die wichtigsten Bildformate im Vergleich

Format	Typ	Vorteil	Nachteil
JPEG	verlustbehaftet	klein bei Fotos	Artefakte bei Text & Logos
PNG	verlustfrei	ideal für Transparenz & Icons	große Dateigröße
WebP	modern	klein + transparent + animiert	IE11 inkompatibel (egal)
AVIF	ultra-modern	noch kleiner, top bei Fotos	schlechter Support (Stand 2025)
SVG	Vektor	unendlich skalierbar	Sicherheitsrisiko bei User-Upload

Ich setze auf WebP für alle Standardbilder.
PNG für Logos mit Transparenz.
SVG nur, wenn ich’s selbst gezeichnet hab.

Upload-Handling in WordPress

WordPress wandelt standardmäßig nichts um.
Also musst Du nachhelfen.

Ich nutze ein Skript, das beim Upload automatisch nach WebP konvertiert.

add_filter('wp_generate_attachment_metadata', 'konvertiere_webp', 10, 2);

function konvertiere_webp($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = get_attached_file($attachment_id);

    $image = wp_get_image_editor($file_path);
    if (!is_wp_error($image)) {
        $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
        $image->set_quality(80);
        $image->save($webp_path, 'image/webp');
    }

    return $metadata;
}

Damit hast Du gleich eine WebP-Version.
Nur brauchst Du sie auch im Frontend.

WebP ausgeben im Theme

<picture>
  <source srcset="<?= get_template_directory_uri(); ?>/img/beispiel.webp" type="image/webp">
  <img src="<?= get_template_directory_uri(); ?>/img/beispiel.jpg" alt="Beispielbild">
</picture>

Oder wenn Du Advanced Custom Fields nutzt:

<?php
$bild = get_field('hero_bild');
$webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $bild['url']);
?>

<picture>
  <source srcset="<?= $webp ?>" type="image/webp">
  <img src="<?= $bild['url'] ?>" alt="<?= esc_attr($bild['alt']) ?>">
</picture>

Lazy Loading aktivieren

WordPress macht das inzwischen von selbst – ab Version 5.5.
Aber wenn Du’s prüfen willst:

<img loading="lazy" src="<?= $bild ?>" alt="...">

Oder per Filter deaktivieren (z. B. für Above-the-Fold):

add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
    if ($context === 'homepage-hero') {
        return false;
    }
    return $value;
}, 10, 3);

Bilder vor dem Upload optimieren

Ich empfehle:

• TinyPNG (online oder API)
• ImageMagick per Skript
• Squoosh (lokal, für Designer)
• ShortPixel CLI (für Massen-Optimierung)

Beispiel mit ImageMagick auf der Kommandozeile:

convert input.jpg -resize 1600x -quality 80 output.webp

Oder als PHP-Skript mit exec:

exec('magick ' . escapeshellarg($original) . ' -resize 1600x -quality 80 ' . escapeshellarg($ziel));

Tabelle: Tools & Einsatz

Tool	Zweck	Typ
TinyPNG	verlustarme Kompression	online/API
ShortPixel	Batch-Optimierung	Plugin/CLI
ImageMagick	Automatisierung, WebP	CLI
Squoosh	manuelle Kontrolle	lokal/WebApp
WebP Express	dynamische Umwandlung	Plugin

Mein Setup für performante Bildverwendung

Maßnahme	Umsetzung
Format	WebP (primär), PNG nur bei Bedarf
Größe	max. 1600 px Breite
Benennung	sprechende Dateinamen mit Bindestrich
Ausgabe	<picture>-Element mit WebP-Fallback
Lazy Loading	überall außer Headerbild
Komprimierung	vor Upload mit TinyPNG oder ImageMagick

Kurz und knackig

Ein Bild sagt mehr als tausend Worte –
aber es darf trotzdem keine 2 MB wiegen.

Wenn Du Deine Bilder im Griff hast,
hast Du Ladezeit, SEO und UX im Griff.
Und WordPress macht dann, was es soll:
Schnell, sauber, lesbar.