NGINX İçin WebP Desteği Ekleme

Herkesin kullanmak için can attığı WebP teknolojisini NGINX üzerinden nasıl servis edeceğimizi göstereceğim. Böylelikle görselleriniz daha düşük boyutta daha kaliteli gözükecek.

Öncelikli olarak webp uygulamasını sisteme kuralım

apt install webp

Sistemimize gereken kurulumlar yapıldı, şimdi sıra bunu NGINX uygulamamıza eklemeye geldi. Bunun için aşağıdaki yapılandırmaları nginx.conf dosyanıza ekleyin. Eklediğiniz satırlar tarayıcıda webp desteği olup olmadığını kontrol edecek

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

Bu aşamadan sonra NGINX üzerinde değişiklik yaparak kullanılan tarayıcı eğer webp destekliyorsa sitede yayında olan bütün jpg, jpeg, png görselleri webp olarak yüklenecek.

location ~* ^.+\.(jpe?g|png) {
  add_header Cache-Control "public, no-transform";
  add_header Vary "Accept-Encoding";
  try_files $uri$webp_supports $uri =404;
  expires max;
}

Bu noktadan sonra mevcut görsellerinizin birde webp formatında oluşturmanız sizin yararınıza olacağını unutmayın. Bu işlem için Görselleri Toplu WebP’ye Çevirme makalemizden faydalanabilirsiniz.