WordPress WebP Express
Google tarafından geliştirilen sıkıştırılmış görsel formatı olan WebP’yi WordPress altyapısında WebP Express eklentisi ile kullanabilirsiniz.
WordPress’te Görselleri WebP’ye Çevirme
Daha iyi sıkıştırılmış web görselleri sayfa yükleme performansını artıracağı için WebP görsel formatı kullanırken eklenti sitedeki görselleri basit bir şekilde dönüştürüyor. PNG ve JPEG görselleri WebP formatına dönüştürürken aynı zamanda WebP fallback ile WebP formatını desteklemeyen tarayıcılarda JPG ve PNG formatlarını da yüklüyor.
WebP Express Kurulumu
Eklentiyi yükledikten sonra Ayarlar > WebP Express yolunu izleyerek eklentinin ayar sayfasına ulaşabilirsiniz.
Açılan sayfanın tamamında düzenlemeye yapmaya gerek yok, birkaç yerin düzenlenmesi yeterli.
Bulk Convert
Conversion sekmesi altında “Bulk Convert” butonuna tıklayarak kütüphanenizdeki görselleri webp’ye döndürün.
İşlemin süresi dönüştürülecek görsel sayısına göre değişir, işlem tamamlanana kadar dönüştürme ekranını kapatmayın.
Alter HTML
“Alter HTML” alanını tikleyin, ve “Replace <img> tags with <picture> tags, adding the webp to srcset” seçeneğini seçin. Bu seçenek <picture>, <source> ve <img> elementlerini kullanarak WebP fallback (webP destekleyen tarayıcılarda webP, desteklemeyen tarayıcılarda diğer görsel formatları gösteren yapı) yapısını aktifleştirir.
WebP Express Çıktısı
<picture>
<source srcset="https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-300x172.png.webp
300w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-1024x585.png.webp
1024w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-150x86.png.webp
150w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-768x439.png.webp
768w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-400x229.png.webp
400w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/webp">
<img width="1200" height="686" src="https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image webpexpress-processed" alt="AI Tools for Design and Creativity" fetchpriority="high" srcset="https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity.png
1200w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-300x172.png
300w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-1024x585.png
1024w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-150x86.png
150w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-768x439.png
768w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-400x229.png
400w" sizes="(max-width: 1200px) 100vw, 1200px">
</picture>Yukarıda belirtilen konfigurasyonlar tamamlandıktan sonra kaydet butonuna tıklayın, eğer bir cache eklentisi kullanıyorsanız cache’i temizleyin ve sitedeki görselleriniz webP’ye dönüşecektir.