WebP ve AVIF'i yapılandırma

Önce sunucunuzun neler yapabildiğine bakın

“Görseller” bölümünde “Bu sunucunun yetenekleri” kartı yer alır. Bu kart kâğıt üzerinde yazanı değil, çalışan PHP üzerinde ölçüleni gösterir: sürümüyle birlikte GD görsel kitaplığı, JPEG okuma, PNG okuma, WebP okuma, WebP yazma, AVIF yazma. Bu sırada iki kez sorulur — fonksiyonun var olması ve formatın imagetypes() içinde yer alması gerekir. Bu önemlidir, çünkü bazı barındırma sağlayıcıları GD'yi WebP veya AVIF olmadan derler: imagewebp() o zaman mevcuttur ve ancak çağrıldığında başarısız olur.

Bir format eksikse, ona ait anahtar görünür kalır ama kapalıdır ve gerekçeyi taşır. WebP için gerekçe şudur: GD, libwebp ile derlenmiş olmalıdır. AVIF için: libavif içeren PHP 8.1 veya üstü. Her ikisi de barındırma sağlayıcınızın işidir. AJAX çağrısı üzerinden dolambaçlı bir yol da işe yaramaz — sunucu, kullanılamayan bir formatın açılmasını açıkça reddeder.

“Imagick” satırı yalnızca bilgi amaçlıdır. Bu modül Imagick kullanmaz; orada “mevcut değil” yazıyorsa eksiğiniz yok demektir.

Açın ve üç sayıyı ayarlayın

Üç anahtar ve üç sayı alanı vardır. “WebP oluştur” ile “AVIF oluştur” varsayılan olarak kapalı, “<picture> üzerinden sun” ise açıktır. Bu ayrım bilinçlidir: önce dosyaların oluşmasını sağlayıp sunumu daha sonra devreye alabilirsiniz. Tersi de geçerlidir: sunumu kapatırsanız dosyalar oluşmaya devam eder, ama ziyaretçilere değiştirilmemiş işaretleme gider.

WebP kalitesi 82, AVIF kalitesi 50 olarak ayarlıdır. Her iki alan da 30 ile 100 arasındaki değerleri kabul eder; bunun üstü ya da altı bu aralığa kırpılır. Farklı varsayılanlar bir dalgınlık değildir: AVIF, JPEG'den farklı ölçer, orada 50 bile çok temiz görünür. WebP'de 90'ın üzerinde dosya, görünür kazançtan daha hızlı büyür.

Megapiksel cinsinden üst sınır 40 olarak ayarlıdır ve 4 ile 400 arasındaki değerleri kabul eder. Bu sınır bellek limitine karşı korur: 6000 × 4000'lik bir fotoğraf, dosyası ne kadar büyük olursa olsun kod çözülürken yaklaşık 96 MB yer kaplar. Ayrıca Kakapo her kod çözme öncesinde gerçekten boşta kalan belleğe göre hesap yapar ve yüklemenin sınırda ölmesine izin vermek yerine atlar.

Üç anahtardan birini değiştirdiğinizde saklanan sayfa cache'i atılır. Kalite ve megapiksel sınırı ise ona dokunmaz — bunlar ancak bir sonraki yüklemede etkili olur ve halihazırda saklanmış hiçbir sayfayı yanlış hâle getirmez.

Yükleme sırasında neler olur

Dönüştürme, WordPress tüm görsel boyutlarını oluşturur oluşturmaz, yüklemenin sonunda çalışır. İşlenenler, meta verilerdeki dosya ve oluşturulan her boyuttur — çekirdeğin sakladığı ve zaten hiçbir zaman sunulmayan orijinal değil.

Her türev, kaynak dosyasının yanında bir eşlik dosyası olarak durur ve onun tam adını artı uzantıyı taşır: bild.jpg'den bild.jpg.webp olur, bild.webp değil. Nedeni: aynı klasörde bild.jpg ile bild.png yan yana durabilir; yalnızca uzantı değiştirilse türevlerden biri diğerinin üzerine yazardı. Hedef konumda zaten bir şey varsa ona dokunulmaz.

Yazma işlemi önce, adında süreç numarası ve rastgele bir bölüm bulunan yan bir dosyaya yapılır. Ancak yeniden ölçüldüğünde kaynak dosyadan küçükse rename ile yerine geçer. Daha büyük ya da eşit büyüklükteyse silinir ve kaynak dosya kalır. Bu yüzden yarıda kesilen bir işlem asla fazla büyük bir türev bırakmaz.

Yüklemenin 12 saniyelik bir zaman bütçesi vardır. AVIF, oluşturulurken WebP'den kat kat yavaştır ve altı boyut çarpı iki format aksi hâlde web sunucusunun çalışma süresine takılır — işletmeci yarıda kesilmiş bir yükleme görürdü. Sığmayanları tek seferlik bir son tur toplar: bu tur 30 saniye sonrasına planlanır ve o zaman 90 saniyesi olur. Hem yapılanlar hem atlananlar ek dosyaya not edilir; böylece aynı deneme her yeniden oluşturmada yinelenmez.

JPEG'lerde EXIF dönüşü sonradan uygulanır, çünkü GD'den çıkan WebP ve AVIF bu bilgiyi taşımaz. PNG kaynaklarında Kakapo WebP'yi önce kayıpsız dener — logolar, grafikler ve ekran görüntüleri böylece çoğu zaman küçülür, kenarlar da bozulmaz. Saydamlık her iki hedef formatta da korunur.

Nasıl sunulur

Kakapo, <img> etiketini bir <picture> içine alır ve önüne AVIF ve WebP kaynaklarını koyar, önce AVIF — tarayıcı anladığı ilk kaynağı seçer. <picture> öğesine display:contents verilir; böylece temanızın flex ve grid düzenlerinde araya fazladan bir kutu sokmaz.

.htaccess üzerinden giden alternatife karşı bilinçli olarak seçildi: content negotiation, Apache kuralları gerektirir, nginx'te hiç işe yaramaz ve Accept header'ına göre değişkenlik göstermeyen CDN ara bellekleriyle çakışır. <picture> ile kararı tarayıcı verir, tek satır sunucu yapılandırması olmadan.

Müdahale, yazı içeriklerine ve öne çıkarılan görsellere 22 önceliğiyle yapılır — Lazy-Load'dan (20) sonra, CDN yeniden yazımından (25) önce; böylece yeni oluşan kaynaklar da CDN üzerinden geçer. Halihazırda var olan <picture> blokları dokunulmadan kalır; yabancı host'lardaki görseller ve yüklemeler klasörünün dışındaki her şey de öyle.

Bilinmeye değer bir kural var: Bir format yalnızca srcset içindeki en büyük sürüm türev olarak mevcutsa sunulur. Orta veya küçük bir sürüm eksikse tarayıcı bir üst boyuta uzanır — birkaç kilobayt fazla, ama asla bulanık bir görsel değil. En büyüğü eksik olsaydı, geniş bir ekran artık tam çözünürlüğe ulaşamazdı; tam da bu durum dışlanır.

Hiçbir şey oluşmuyorsa: nedenleri okuyun

“Oluşturulan dosyalar & gerçek tasarruf” kartı her format için dosya sayısını, kaynak dosyaların toplamını, türevlerin toplamını ve aradaki farkı gösterir. Her sayı, oluşturma anındaki iki gerçek dosya boyutunun karşılaştırılmasından gelir — hiçbir şey tahmin edilmez ya da orantılanmaz. “Kaynak dosyalar” burada yalnızca kendisi için bir türev oluşmuş dosyaların toplamıdır, tüm medya varlığınız değil.

Altında, nelerin dönüştürülmediği nedeniyle birlikte yazar. En önemlileri:

“Sonuç kaynak dosyadan büyüktü” — bu bir hata değildir. Boyutu çok küçük olan küçük resimlerde AVIF ile bu düzenli olarak yaşanır; kaynak dosya kalır ve diğer boyutlar yine de türevlerini alır.

“Yazılabilir değil” — yüklemeler klasöründeki izinleri kontrol edin. Bu, gerçekten sizi gerektiren tek nedendir.

“Hedef konumda zaten bir dosya vardı” — üzerine yazılmadı. Bu dosya çoğunlukla mevcut dosyalar üzerinde yapılan toplu işlemden gelir ve zaten tam olarak burada oluşması gereken şeydir.

“Belleğe sığmadı” — megapiksel sınırını veya PHP bellek sınırını yükseltin.

“Okunabilir değil” — bozuk dosya, CMYK-JPEG ya da sıra dışı bir varyant. “JPEG/PNG/WebP değil” — GIF animasyonlarına ve PDF'lere bilinçli olarak dokunulmaz.

Kart boşsa WebP'yi açın ve bir görsel yükleyin. Ortam kitaplığında zaten bulunan görsellere buradan değil, aynı sayfanın daha altındaki toplu işlem üzerinden ulaşırsınız.