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?
| Format | Wann verwenden | Vorteile |
|---|---|---|
| JPEG | Fotos mit vielen Farben | klein, überall unterstützt |
| PNG | Logos mit Transparenz | verlustfrei, scharf |
| WebP | für alles, was modern sein darf | klein, schnell, unterstützt (außer IE) |
| AVIF | maximaler Komprimierung, wenn möglich | sehr klein, aber noch buggy |
| SVG | Icons, Vektoren | winzig, 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
| Plugin | Funktion | Kommentar |
|---|---|---|
| ShortPixel | WebP + Resize + Kompression | DSGVO-konform mit API |
| EWWW Image Optimizer | lokal, keine API nötig | gute Kontrolle |
| Smush | einfach, aber begrenzt in Free | mit Pro nützlich |
| WebP Express | nur Umwandlung nach WebP | ohne 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.
No responses yet