WebP ist ein modernes Bildformat von Google, das bei gleicher Qualität deutlich kleinere Dateien erzeugt als JPG oder PNG. Wer eine Website mit vielen Bildern betreibt, kann durch die Umstellung auf WebP die Ladezeit spürbar verbessern. PHP bringt mit der GD-Bibliothek alle nötigen Funktionen mit, um Bilder serverseitig zu konvertieren. Dieses Tutorial zeigt, wie das in der Praxis funktioniert.
Voraussetzungen prüfen
Bevor Bilder konvertiert werden können, muss die GD-Bibliothek installiert und WebP-Support aktiviert sein. Das lässt sich per Code prüfen:
<?php
if (!extension_loaded('gd')) {
die('GD-Bibliothek ist nicht installiert.');
}
$info = gd_info();
if (empty($info['WebP Support'])) {
die('GD hat keinen WebP-Support.');
}
echo 'GD-Version: ' . $info['GD Version'];
echo '\nWebP-Support: aktiv';
?>
Auf den meisten aktuellen PHP-Installationen (ab PHP 7.0 mit GD) ist WebP-Support bereits enthalten. Falls nicht, muss die Bibliothek libwebp-dev installiert und PHP neu kompiliert werden. Unter Debian oder Ubuntu genügt:
sudo apt-get install libwebp-dev
sudo service apache2 restart
JPG in WebP konvertieren
Die Konvertierung von JPG nach WebP besteht aus drei Schritten: Bild laden, konvertieren und speichern. Das folgende Beispiel enthält eine vollständige Fehlerbehandlung, die in der Praxis unverzichtbar ist.
<?php
function jpgToWebp(
string $quelle,
string $ziel,
int $qualitaet = 80
): bool {
if (!file_exists($quelle)) {
echo "Fehler: Datei nicht gefunden.\n";
return false;
}
$bild = imagecreatefromjpeg($quelle);
if ($bild === false) {
echo "Fehler: JPG konnte nicht geladen werden.\n";
return false;
}
$erfolg = imagewebp($bild, $ziel, $qualitaet);
imagedestroy($bild);
if (!$erfolg) {
echo "Fehler: WebP konnte nicht gespeichert werden.\n";
return false;
}
return true;
}
/* Aufruf */
$quelle = 'bilder/foto.jpg';
$ziel = 'bilder/foto.webp';
if (jpgToWebp($quelle, $ziel, 80)) {
$alt = filesize($quelle);
$neu = filesize($ziel);
$ersparnis = round((1 - $neu / $alt) * 100);
echo "Konvertiert: " . $ersparnis . "% kleiner";
}
?>
Die Funktion imagecreatefromjpeg() lädt das Bild in den Speicher. imagewebp() speichert es im WebP-Format. Der dritte Parameter bestimmt die Qualität. Anschließend gibt imagedestroy() den Speicher wieder frei.
Der Qualitätsparameter
Der Qualitätsparameter von imagewebp() akzeptiert Werte von 0 bis 100. Ein höherer Wert bedeutet bessere Bildqualität, aber auch größere Dateien. Die folgende Übersicht zeigt typische Richtwerte:
| Qualität | Dateigröße | Einsatzbereich |
|---|
| 90 bis 100 | fast wie JPG | Fotografie, Druckvorstufe |
| 75 bis 85 | ca. 30 bis 50% kleiner | Websites (Standardempfehlung) |
| 50 bis 70 | ca. 50 bis 70% kleiner | Thumbnails, Vorschaubilder |
| unter 50 | sehr klein | Nur für Platzhalter, sichtbare Artefakte |
Für die meisten Websites ist ein Wert von 80 ein guter Kompromiss zwischen Dateigröße und Bildqualität. Bei Produktfotos oder Portfolio-Seiten kann man auf 85 oder 90 erhöhen.
PNG in WebP konvertieren (mit Transparenz)
PNG-Dateien enthalten häufig transparente Bereiche, etwa bei Logos oder Icons. Bei der Konvertierung zu WebP muss der Alpha-Kanal explizit behandelt werden, sonst werden transparente Flächen schwarz.
<?php
function pngToWebp(
string $quelle,
string $ziel,
int $qualitaet = 80
): bool {
if (!file_exists($quelle)) {
return false;
}
$bild = imagecreatefrompng($quelle);
if ($bild === false) {
return false;
}
/*
* Transparenz erhalten:
* alphablending aus, savealpha an
*/
imagealphablending($bild, false);
imagesavealpha($bild, true);
$erfolg = imagewebp($bild, $ziel, $qualitaet);
imagedestroy($bild);
return $erfolg;
}
/* Aufruf */
if (pngToWebp('logo.png', 'logo.webp')) {
echo 'PNG erfolgreich konvertiert.';
}
?>
Die beiden entscheidenden Zeilen sind imagealphablending($bild, false) und imagesavealpha($bild, true). Ohne diese Einstellungen zeichnet GD die transparenten Pixel auf einen schwarzen Hintergrund. WebP unterstützt Transparenz nativ, aber GD muss explizit angewiesen werden, den Alpha-Kanal beizubehalten.
Ganzes Verzeichnis konvertieren
In der Praxis möchte man selten einzelne Bilder konvertieren. Das folgende Script durchläuft ein komplettes Verzeichnis und konvertiert alle JPG- und PNG-Dateien zu WebP.
<?php
function verzeichnisKonvertieren(
string $pfad,
int $qualitaet = 80
): array {
$ergebnis = ['erfolg' => 0, 'fehler' => 0, 'uebersprungen' => 0];
$dateien = glob($pfad . '/*.{jpg,jpeg,png}', GLOB_BRACE);
foreach ($dateien as $datei) {
$ziel = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $datei);
/* Bereits konvertiert? */
if (file_exists($ziel)) {
$ergebnis['uebersprungen']++;
continue;
}
$ext = strtolower(pathinfo($datei, PATHINFO_EXTENSION));
$bild = null;
if ($ext === 'png') {
$bild = imagecreatefrompng($datei);
if ($bild) {
imagealphablending($bild, false);
imagesavealpha($bild, true);
}
} else {
$bild = imagecreatefromjpeg($datei);
}
if (!$bild || !imagewebp($bild, $ziel, $qualitaet)) {
$ergebnis['fehler']++;
} else {
$ergebnis['erfolg']++;
}
if ($bild) {
imagedestroy($bild);
}
}
return $ergebnis;
}
$stats = verzeichnisKonvertieren('bilder/', 80);
echo $stats['erfolg'] . " konvertiert\n";
echo $stats['fehler'] . " Fehler\n";
echo $stats['uebersprungen'] . " uebersprungen\n";
?>
Das Script prüft vor jeder Konvertierung, ob die WebP-Datei bereits existiert. So kann es mehrfach ausgeführt werden, ohne bereits konvertierte Bilder erneut zu verarbeiten. Die Zusammenfassung am Ende zeigt, wie viele Bilder erfolgreich konvertiert wurden.
WebP-Bilder im HTML einbinden
Nach der Konvertierung müssen die WebP-Bilder korrekt in die Website eingebunden werden. Das HTML-Element <picture> ermöglicht einen sauberen Fallback: Browser mit WebP-Support laden die kleinere WebP-Datei, ältere Browser greifen auf das Original zurück.
<picture>
<source srcset="bilder/foto.webp"
type="image/webp">
<img src="bilder/foto.jpg"
alt="Produktfoto"
width="800" height="600"
loading="lazy">
</picture>
Mittlerweile unterstützen alle modernen Browser WebP (Chrome, Firefox, Edge, Safari ab Version 14). Das <picture>-Element ist trotzdem empfehlenswert, weil es auch als Grundlage für weitere Formate wie AVIF dient.
EXIF-Daten bei der Konvertierung
Ein häufig übersehenes Problem: Bei der Konvertierung mit GD gehen EXIF-Daten verloren. Dazu gehören Kamerainformationen, GPS-Koordinaten und vor allem die Bildausrichtung. Ein Hochformat-Foto kann nach der Konvertierung plötzlich quer angezeigt werden.
<?php
function jpgToWebpMitOrientierung(
string $quelle,
string $ziel,
int $qualitaet = 80
): bool {
$bild = imagecreatefromjpeg($quelle);
if (!$bild) {
return false;
}
/*
* EXIF-Orientierung lesen und Bild
* entsprechend drehen
*/
$exif = @exif_read_data($quelle);
if (!empty($exif['Orientation'])) {
switch ($exif['Orientation']) {
case 3:
$bild = imagerotate($bild, 180, 0);
break;
case 6:
$bild = imagerotate($bild, -90, 0);
break;
case 8:
$bild = imagerotate($bild, 90, 0);
break;
}
}
$erfolg = imagewebp($bild, $ziel, $qualitaet);
imagedestroy($bild);
return $erfolg;
}
?>
Die Funktion exif_read_data() liest die EXIF-Daten aus dem JPG. Der Orientation-Wert gibt an, wie das Bild gedreht werden muss. Nach der Drehung mit imagerotate() wird das Bild korrekt ausgerichtet gespeichert. Für diese Funktion muss die PHP-Extension exif aktiviert sein.
AVIF: die nächste Generation
Seit PHP 8.1 unterstützt GD auch das AVIF-Format über die Funktionen imagecreatefromavif() und imageavif(). AVIF erzeugt bei gleicher Qualität noch kleinere Dateien als WebP. Die Kodierung dauert allerdings deutlich länger, und der Browser-Support ist noch nicht so breit wie bei WebP.
<?php
/* PHP 8.1+ mit AVIF-Support in GD */
$bild = imagecreatefromjpeg('foto.jpg');
imageavif($bild, 'foto.avif', 60);
imagedestroy($bild);
/* Im HTML: mehrstufiger Fallback */
/*
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Foto">
</picture>
*/
?>
Für neue Projekte kann es sinnvoll sein, beide Formate parallel zu erzeugen und über das <picture>-Element den besten Kandidaten ausliefern zu lassen.
Alternative: Imagick statt GD
Neben GD bietet auch die Imagick-Extension WebP-Unterstützung. Imagick basiert auf ImageMagick und bietet mehr Kontrolle über Kompressionsparameter. Die Konvertierung funktioniert ähnlich:
<?php
$img = new Imagick('foto.jpg');
$img->setImageFormat('webp');
$img->setImageCompressionQuality(80);
$img->writeImage('foto.webp');
$img->destroy();
?>
Imagick bewahrt im Gegensatz zu GD standardmäßig EXIF-Daten. Für einfache Konvertierungen reicht GD aber völlig aus.
Zusammenfassung
Die Konvertierung von JPG und PNG zu WebP mit PHP und GD ist unkompliziert und bringt spürbare Vorteile bei der Dateigröße. Ein Qualitätswert von 80 liefert für die meisten Websites den besten Kompromiss. Bei PNG-Dateien muss der Alpha-Kanal mit imagesavealpha() erhalten werden, und bei JPG-Fotos sollte die EXIF-Orientierung berücksichtigt werden. Mit dem HTML-Element <picture> lässt sich ein sauberer Browser-Fallback einrichten. Wer PHP 8.1 oder höher nutzt, kann zusätzlich AVIF als noch effizienteres Format in Betracht ziehen.
