WebP: Bilder für das Web optimieren

WebP bietet bis zu 30% kleinere Dateien als JPEG bei gleicher Qualität. Das von Google entwickelte Format ist mittlerweile der Standard für Web-Bilder.

Warum WebP?

Größenvergleich (gleiches Bild)

Browser-Unterstützung

WebP wird von allen modernen Browsern unterstützt:

• ✅ Chrome, Edge, Firefox, Safari (14+)
• ✅ iOS Safari (14+)
• ❌ Internet Explorer (irrelevant)

Konvertierung zu WebP

Command Line: cwebp

# Installation (Ubuntu)
sudo apt install webp

# macOS
brew install webp

# Konvertieren (verlustbehaftet)
cwebp -q 80 input.jpg -o output.webp

# Verlustfrei
cwebp -lossless input.png -o output.webp

# Batch-Konvertierung
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

ImageMagick

# Einzelnes Bild
convert input.jpg -quality 80 output.webp

# Mit Resize
convert input.jpg -resize 800x600 -quality 80 output.webp

# Batch
mogrify -format webp -quality 80 *.jpg

Node.js: sharp

const sharp = require('sharp');

// Einfache Konvertierung
sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

// Mit Resize und mehreren Outputs
sharp('input.jpg')
  .resize(800, 600)
  .webp({ quality: 80 })
  .toFile('output-800.webp');

// Verlustfrei für PNG mit Transparenz
sharp('input.png')
  .webp({ lossless: true })
  .toFile('output.webp');

PHP: GD oder Imagick

<?php
// GD Library
$image = imagecreatefromjpeg('input.jpg');
imagewebp($image, 'output.webp', 80); // 80 = Qualität
imagedestroy($image);

// Imagick
$image = new Imagick('input.jpg');
$image->setImageFormat('webp');
$image->setImageCompressionQuality(80);
$image->writeImage('output.webp');

WebP im HTML

Picture-Element (mit Fallback)

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Beschreibung">
</picture>

Responsive Images

<picture>
  <source
    srcset="image-400.webp 400w,
            image-800.webp 800w,
            image-1200.webp 1200w"
    type="image/webp"
    sizes="(max-width: 600px) 400px, 800px">
  <source
    srcset="image-400.jpg 400w,
            image-800.jpg 800w,
            image-1200.jpg 1200w"
    type="image/jpeg"
    sizes="(max-width: 600px) 400px, 800px">
  <img src="image-800.jpg" alt="Beschreibung">
</picture>

Server-Konfiguration

Nginx: Automatisches WebP

# Wenn WebP existiert und Browser es unterstützt
map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

server {
    location ~* ^(.+)\.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $1$webp_suffix $uri =404;
    }
}

Apache: .htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Prüfe ob WebP-Version existiert
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(jpe?g|png)$">
    Header append Vary Accept
  </FilesMatch>
</IfModule>

Qualitätseinstellungen

AVIF als Alternative

AVIF ist noch effizienter, aber weniger verbreitet:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Beschreibung">
</picture>

Nützliche Tools

• Squoosh: Online-Bildkonverter von Google
• ImageOptim: Mac-App für Bildoptimierung
• TinyPNG: Online-Komprimierung
• Lighthouse: Analysiert Bildoptimierung

Weitere Informationen

• ⚡ Website Ladezeit optimieren
• 🌐 Cloudflare einrichten
• 🔧 Website-Performance mit Domain Toolkit prüfen