CDN.com.tr Yardım

Görsel optimizasyonu: edge'de AVIF ve WebP

Q: Görselleri URL üzerinden yeniden boyutlandırabilir miyim?

Evet. Bir görsel URL'sine ?w= (genişlik), ?h= (yükseklik) ya da ikisini birden ekleyin. Tek değer en-boy oranını korur, ikisi birden görseli o kutunun içine sığdırır ve hiçbir görsel orijinal boyutunun üzerine büyütülmez. w ve h o kuralın önbellek anahtarında kalsın (varsayılan, yani query'nin tamamı, bunu sağlar): tüm query parametrelerini yok sayan bir kural hepsi için tek bir boyutu önbelleğe alır. Yeniden boyutlandırılan görseller de dönüştürülür ama orijinalle karşılaştırılmaz.

Görsel optimizasyonunu hesap için ya da tek bir yayınlama kuralı için açın, WebP ya da WebP + AVIF seçin: edge JPEG ve PNG görselleri dönüştürür ve her tarayıcıya kabul ettiği bir biçimi gönderir; sayfalarınızdaki görsel URL'leri değişmez.

Cache, güvenlik, WAF ve purge

Görsel optimizasyonu: edge'de AVIF ve WebP

İlgili rehberler

Biçim seçiminin arkasındaki ölçümler, her sayfa için bir denetleyici ve purge rehberi.

Biçim seçimi

AVIF mi WebP mi: ölçümler

Fotoğraf, ekran görüntüsü ve ikonda hangi biçimin daha küçük olduğu, baytlarıyla.

Rehberi okuyun

Her sayfa

Görsel format denetleyici

Bir sayfanın görsellerinin modern bir tarayıcıya ve düz bir istemciye hangi biçimde ulaştığı.

Denetleyiciyi açın

Açtıktan sonra

Önbellekteki içeriği purge edin

Anahtardan önce önbelleğe alınan kopyaları temizleyin ki yeniden dönüştürülsünler.

Konuyu açın

Panel yolu

Yönetim Paneli
Yayınlama Kuralları
Görsel optimizasyonu
Görsel biçimi

Ön koşullar

Sitesi edge üzerinden sunulan bir CDN hesabı.
Sahip ya da editör rolü: görüntüleyiciler ayarları görebilir ve görsel denetimini çalıştırabilir, ama değiştiremez.
Hangi yolların hotlink koruması, imzalı URL ya da istek hız limiti gerektirdiğini bilin: görsel optimizasyonu açık bir kural bunların hiçbirini uygulamaz, hesap anahtarı da JPEG ve PNG dosyalarından bunları kaldırır.

Karar modeli

Tüm hesap mı, tek kural mı?

Hesap anahtarı tüm kurallardaki JPEG ve PNG dosyalarını kapsar. Kural anahtarı yalnızca o kuralın yollarını kapsar; önce tek bir klasörde ya da alan adında denemek için iyi bir yoldur.

Hesap geneli: görselleri herkese açık bir site için
Kural bazında: önce tek klasör ya da alan adı; diğer kuralların korumaları yerinde kalır

WebP mi, WebP + AVIF mi?

Biçim hesap için bir kez seçilir ve görsel optimizasyonunun açık olduğu her yerde geçerlidir.

WebP: kullanımdaki tarayıcıların neredeyse tamamı, daha düşük işleme maliyeti
WebP + AVIF (otomatik): kabul eden tarayıcılara AVIF, fotoğraflarda çoğunlukla en küçüğü

Adım adım rehber

Görsel optimizasyonunu açın

En hızlı başlangıç hesap anahtarıdır; kural anahtarı optimizasyonu o kuralın yollarıyla sınırlar.

Yayınlama Kuralları'nı açın ve hesabı seçin.
Hesap geneli görsel optimizasyonu'nu açın ya da bir kuralı açıp görsel optimizasyonunu orada açın.
Kaydedin ve değişikliğin edge'e yayınlanmasını bekleyin.

Beklenen sonuç: O yollardaki JPEG ve PNG istekleri edge'te dönüştürülür.

cdnctl karşılığı

curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"type":1}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_optimization
# yalnızca bir kural için: kural JSON'unda "image_optimization":"on"
cdnctl cdn advanced-rules create --account "$ACCOUNT_UUID" --file rule-images.json

Biçimi seçin

Biçim, görsel optimizasyonunun açık olduğu her yerde geçerlidir: hesap genelinde ya da bir kuralda.

Görsel biçimi altında WebP ya da WebP + AVIF (otomatik) seçin.
Kaydetmeden önce biçimin altında gösterilen oranı okuyun.

Beklenen sonuç: WebP + AVIF ile AVIF kabul eden tarayıcılar aynı URL'lerden AVIF alır; diğerleri WebP ya da görselin orijinal biçimini alır.

cdnctl karşılığı

curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"enabled":true}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_avif

Purge edin, sonra denetleyin

Optimizasyonu açmadan önce önbelleğe alınmış görseller süreleri dolana kadar eski biçimlerinde kalır; bu yüzden anahtarı açtıktan sonra görsel yollarını purge edin. Biçim değişikliği purge gerektirmez.

Önbellek Temizleme altında görsel klasörlerini ya da her şeyi purge edin.
Anahtarın altındaki görsel biçimi denetimini hesabın alan adlarından birinde çalıştırın.

Beklenen sonuç: Denetim her görseli modern bir tarayıcının aldığı biçim ve boyutla listeler; optimizer dönüşüm daha küçük olmadığı için orijinali koruduysa satır bunu söyler.

cdnctl karşılığı

cdnctl purge --account "$ACCOUNT_UUID" --path /wp-content/uploads/ --type prefix
curl -s -H "Authorization: Bearer $CDN_TOKEN" "https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_check?host=www.example.com"

Doğrulama

curl -sLo /dev/null -w '%{content_type} %{size_download}\n' -H 'Accept: image/avif,image/webp,*/*' https://www.example.com/photo.jpg → image/avif ya da image/webp (yalnız WebP'de yönlendirmeden sonra image/webp); dönüştürülen dosya daha küçük değilse orijinal
curl -s -D - -o /dev/null -H 'Accept: image/webp,*/*' https://www.example.com/photo.jpg | grep -iE '^(vary|location)' → WebP + AVIF: Vary: Accept; yalnız WebP: Location: …/photo.jpg.webp
curl -so /dev/null -w '%{content_type}\n' -H 'Accept: */*' https://www.example.com/photo.jpg → image/jpeg, yani orijinal biçim

Kullanım senaryoları

Bir mağaza, medya kütüphanesini yeniden dışa aktarmadan, eklenti kurmadan ve tek bir görsel URL'sini değiştirmeden ürün fotoğraflarını hafifletmek istiyor.

Kısa akış

Hesabın Yayınlama Kuralları sayfasını açın.
Hesap geneli görsel optimizasyonunu açın ya da yalnızca o kuralın yollarıyla başlamak için tek bir kuralda açın.
Görsel biçimi altında hesap için WebP ya da WebP + AVIF (otomatik) seçin.
Önbellekteki görselleri purge edin, ardından anahtarın altındaki görsel biçimi denetimini çalıştırın.

Kontroller

Dönüştürülenler: JPEG ve PNG dosyaları (.jpg, .jpeg, .png). GIF, SVG ve zaten .webp olan dosyalar değişmeden gider.
Biçimin tarayıcıya nasıl ulaştığı hesabın biçimine bağlıdır. WebP + AVIF'te her tarayıcıya tek URL yanıt verir: edge tarayıcının Accept başlığını okur, AVIF, WebP ya da görseli orijinal biçiminde gönderir ve Vary: Accept ile yanıt verir. Yalnız WebP'de, WebP kabul eden tarayıcılar aynı adın sonuna .webp eklenmiş bir WebP kopyaya (photo.jpg.webp) yönlendirilir (302); diğerleri görseli orijinal biçiminde alır. Her iki durumda da HTML'inizdeki görsel URL'leri değişmez.
Tam boyutta yeni dönüştürülen bir görsel yalnızca orijinalden küçükse gönderilir: küçük olmayan bir AVIF yerini WebP'ye, küçük olmayan bir WebP de orijinale bırakır. ?w= ya da ?h= ile yeniden boyutlandırılan görseller karşılaştırılmaz.
Dönüşüm başarısız olursa edge onun yerine orijinal görseli sunar.
Dönüştürülen görseller edge'te ve tarayıcılarda 365 gün tutulur. Optimizasyonu açmadan önce önbelleğe alınmış kopyalar, süreleri dolana ya da siz purge edene kadar eski biçimlerinde kalır. Biçimi değiştirmek purge gerektirmez: edge her biçimi ayrı saklar, yeni ziyaretçiler yeni biçimi hemen alır; bir görseli daha önce yüklemiş bir tarayıcı ise kendi kopyasını bir yıla kadar tutabilir.
Hotlink koruması, imzalı URL'ler ve istek hız limiti: görsel optimizasyonu açık olan bir kural, sunduğu hiçbir dosyaya bunları uygulamaz. Hesap anahtarı açıkken, kendi anahtarı olmayan her kuralda JPEG ve PNG dosyaları bunları atlar. Dosyaları bu korumalara ihtiyaç duyan her kuralda görsel optimizasyonunu kapalı tutun; o kuralın JPEG ve PNG dosyaları da korunacaksa hesap anahtarını da kapalı tutun. Tam yol (exact) kuralında görsel optimizasyonu kullanılamaz.
İşleme aylık kotanıza sayılır; AVIF, WebP'den yüksek bir oranla. Panel güncel oranı anahtarın altında gösterir.

Sık sorulan sorular

Neden bazı görseller hâlâ JPEG ya da PNG olarak geliyor?

Çoğunlukla kopya, optimizasyonu açmadan önce önbelleğe alınmıştır: o yolları purge edin ve yeniden isteyin. Diğer nedenler: tam boyutta dönüşüm orijinalden küçük çıkmamıştır, tarayıcı ne WebP ne AVIF kabul ediyordur ya da istek belirli bir görsel biçimi istememiştir (düz bir curl Accept: */* gönderir). Yayınlama Kuralları sayfasındaki görsel biçimi denetimi, modern bir tarayıcının ve düz bir istemcinin ne aldığını görsel görsel listeler.

Görselleri URL üzerinden yeniden boyutlandırabilir miyim?

Evet. Bir görsel URL'sine ?w= (genişlik), ?h= (yükseklik) ya da ikisini birden ekleyin. Tek değer en-boy oranını korur, ikisi birden görseli o kutunun içine sığdırır ve hiçbir görsel orijinal boyutunun üzerine büyütülmez. w ve h o kuralın önbellek anahtarında kalsın (varsayılan, yani query'nin tamamı, bunu sağlar): tüm query parametrelerini yok sayan bir kural hepsi için tek bir boyutu önbelleğe alır. Yeniden boyutlandırılan görseller de dönüştürülür ama orijinalle karşılaştırılmaz.

Nasıl ücretlendirilir?

Ayrı bir paket yoktur. İşleme, trafik gibi hesabın aylık kotasına sayılır: her dönüşüm okuduğu orijinal ile döndürdüğü görselin toplamı kadar sayılır; AVIF'i kodlamak daha çok işlem gerektirdiği için AVIF, WebP'den yüksek bir oranla sayılır. Panel güncel oranı anahtarın altında gösterir, Data Tüketimi de görsel optimizasyonunu ayrı bir satırda gösterir.

WebP + AVIF gerekli mi?

Bir seçim, zorunluluk değil. Tek başına WebP kullanımdaki tarayıcıların neredeyse tamamına ulaşır. WebP + AVIF, kabul eden tarayıcılara AVIF ekler; AVIF fotoğraflarda çoğunlukla en küçük biçimdir: ölçümümüzde 262.025 baytlık bir JPEG fotoğraf 86.936 baytlık AVIF olarak gitti. Farkı görmek için görsel format denetleyiciyi kendi sayfalarınızda çalıştırın.