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

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

Mein Setup für performante Bildverwendung

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.