Scheinbar kann der Nginx in seinen Defaultwerten keinen WebP Support. Aber wer heute einen Blog betreibt, der weiß, dass gut komprimierte Bilder und schnelle Auslieferung der Webseite unerlässlich ist. Ich nutze sehr häufig den NGINX Webserver für meine Webprojekte und musste feststellen, dass von Start an WebP Support nicht eingeschaltet ist.

Vorteile von WebP

Das WebP-Format, entwickelt von Google, bietet erhebliche Vorteile gegenüber traditionellen Bildformaten wie JPEG und PNG. Es ermöglicht eine deutlich effizientere Kompression, was zu kleineren Dateigrößen bei vergleichbarer oder sogar besserer Qualität führt. Im Gegensatz zu JPEG unterstützt WebP auch Transparenz, ähnlich wie PNG, und kann zudem animierte Bilder darstellen, was es zu einem idealen Ersatz für GIFs macht.
WebP wird von den meisten modernen Webbrowsern unterstützt, was die Implementierung auf Websites erleichtert. Darüber hinaus tragen die kleineren Dateigrößen dazu bei, die Bandbreitennutzung zu reduzieren und die Energieeffizienz, besonders auf mobilen Geräten, zu verbessern. Diese Eigenschaften machen WebP zu einer attraktiven Wahl für Webentwickler und Content-Ersteller, die sowohl die Ladezeiten verbessern, als auch die visuelle Qualität ihrer Online-Inhalte optimieren möchten.

1. NGINX.CONF ändern – Schritt 1

Fügen Sie den folgenden Code VOR der Serveranweisung in die nginx.conf ein:

nano /etc/nginx/nginx.conf

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

2. NGINX.CONF ändern – Schritt 2

Fügen Sie den folgenden Code INNERHALB der Serveranweisung in die nginx.conf ein:

nano /etc/nginx/sites-enabled/schroederdennis.de.conf

location ~* ^.+\.(png|jpe?g)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

Das war es schon, jetzt nur noch den NGINX neustarten und eure WEBP Bilder werden vom Nginx auch an den Kunden nach draußen ausgeliefert. 

systemctl restart nginx.service

WebP Support testen – Nginx

Und wie kann ich nun testen, ob mein Webserver WebP Bilder ausliefern kann? Mit dem CURL Befehl ist das super einfach möglich. Lege eine WebP-Datei einfach mal ab und führe folgendes Kommando aus.

curl -I -H "Accept: image/webp" http://your-server.com/path/to/image.webp
HTTP/1.1 200 OK
Server: nginx
Date: Tue, 01 Oct 2023 14:32:00 GMT
Content-Type: image/webp
Content-Length: 1024
Last-Modified: Tue, 01 Oct 2023 13:30:00 GMT
Connection: keep-alive
ETag: "5d931f4a-400"
Accept-Ranges: bytes

Schlussfolgerung / Fazit

WebP kann erhebliche Geschwindigkeits- und Effizienzvorteile bieten, besonders wenn es darum geht, die Leistung von Webseiten zu verbessern. Die genaue Geschwindigkeitssteigerung hängt von vielen Faktoren ab, darunter die Art der genutzten Bilder, die Ausgangsgröße der Dateien und die Qualitätseinstellungen. Insgesamt ist WebP jedoch ein leistungsstarkes Format, das sowohl für Entwickler als auch für Endbenutzer erhebliche Vorteile bietet.

Ansichten: 2.187