Cloudflare Image Optimization Özellikleri Nasıl Çalışır?
Cloudflare'in görsel optimizasyonla ilgili özelliklerinden söz edildiğinde çoğu zaman sanki tek bir araçmış gibi konuşulur. Oysa Polish, Image Resizing ve Mirage üç ayrı mekanizmadır, üç ayrı sorunu çözer ve büyük çoğunlukla birbirinden bağımsız plan katmanlarında çalışır. Birini açmak diğerini otomatik olarak devreye sokmaz; üçünü birden açmak da her zaman doğru yaklaşım değildir.
Bu karışıklık, Cloudflare'e ilk geçen sitelerde sık görülen bir planlama hatasına yol açar: Image Resizing'i ararken Polish ayarlarına rastlamak, ya da Mirage'ı LCP iyileştirmesi için açıp sonuçların tam tersine döndüğünü görmek. Her birinin neyi çözdüğü, daha önemlisi neyi çözmediği netleştiğinde bu hatalar büyük ölçüde önlenmiş olur.
Şunu da belirtmek gerekir: Cloudflare bu özelliklerin bir kısmını farklı plan katmanlarında konumlandırıyor ve fiyatlandırması zaman zaman değişiyor. Aşağıdaki plan bilgileri genel yapıyı anlatmak için verilmiştir; güncel sınırlar için Cloudflare'in kendi dokümantasyonunu kontrol etmek en sağlıklı yol. Görsel CDN'nin temel mantığı anlaşıldıktan sonra bu özellikleri doğru konumlandırmak çok daha kolaylaşır.
Üç özellik, üç farklı sorun
Polish, en basit anlatımla bir sıkıştırma ve format dönüşüm katmanıdır. Orijinal görsel dosyasına dokunmaz; görsel CDN kenarına ulaştığında tarayıcının gönderdiği Accept başlığına bakarak WebP veya AVIF sunup sunamayacağına karar verir. Siz origin'de JPEG ile devam edebilirsiniz; tarayıcı WebP destekliyorsa Cloudflare WebP gönderir. Kurulum gerektiren bir şey yok, dashboard'dan bir ayarı açıyorsunuz.
Image Resizing farklı bir katmandır. Boyutlandırma söz konusu olduğunda devreye girer. URL parametresiyle bir görsele genişlik, yükseklik, kırpma modu ve kalite değeri atayabilirsiniz; Cloudflare o parametrelerle görsel üretir ve önbelleğe alır. 4000 piksel genişliğinde bir fotoğrafı Polish sıkıştırır ama küçültmez. Aynı fotoğrafı 800 piksele indirmek istiyorsanız Image Resizing gerekir.
Mirage ise bant genişliğiyle ilgili bir özellik. Ziyaretçinin internet bağlantısı yavaşsa görselleri başlangıçta düşük kaliteli yer tutucularla gönderir, asıl görsel bağlantı iyileştiğinde yüklenir. Bu üç özelliği aynı anda düşünmek yerine sırayla ve ihtiyaca göre ele almak daha temiz bir yaklaşım sağlar.
Polish: format dönüşümü ve sıkıştırma CDN kenarında
Polish, Pro planında yer alan ve Cloudflare dashboard'ından etkinleştirilen bir özellik. Lossy ve lossless olarak iki moda sahip; isimleri biraz yanıltıcı olabilir. Lossy modda Cloudflare JPEG görsellerinizi ek bir kayıplı sıkıştırma geçişinden geçirir. Lossless modda bu ek adım atlanır, yalnızca metadata temizleme ve format dönüşümü yapılır.
Format dönüşümü tarafı daha ilginç. Polish, gelen isteğin Accept başlığında image/webp veya image/avif görürse desteklenen en iyi formatı sunar. Yani siz origin'de JPEG tutmaya devam ederken modern tarayıcılar WebP veya AVIF alır. WebP'nin dosya boyutu avantajı bu noktada otomatik olarak devreye girer; herhangi bir build adımı veya dönüştürme pipeline'ı gerektirmeden.
Lossless modda dikkat edilmesi gereken bir nokta var: PNG görseller bazen lossless WebP'ye dönüştürüldüğünde daha büyük çıkabilir. Bu durum sık olmaz ama özellikle küçük PNG'lerde ya da düz renk alanları olan grafiklerde zaman zaman karşılaşılır. Cloudflare hangisi küçükse onu gönderir; yine de lossless Polish'i açtıktan sonra bazı PNG dosyalarının boyutunun artıp artmadığını kontrol etmek yerinde bir adım.
Polish'in çözemediği tek şey boyuttur. Sıkıştırma ile 1 MB'lık bir görseli 400 KB'a indirebilirsiniz ama 3000×2000 piksellik bir dosyayı 600×400'e indirmek için Polish yetersiz kalır. Bu sınırı bilmeden Polish'ten her şeyi beklemeye başlamak, ölçülemeyen bir hayal kırıklığına yol açar.
Image Resizing ile URL parametresi üzerinden anlık boyutlandırma
Image Resizing, bir Workers entegrasyonu veya doğrudan /cdn-cgi/image/ yolu üzerinden çalışır. URL yapısı şöyle: /cdn-cgi/image/width=800,quality=80,format=webp/img/fotograf.jpg. Bu URL'ye ilk istek geldiğinde Cloudflare görseli işler ve önbelleğe alır; sonraki istekler edge'den gelir, origin'e ulaşmaz.
Her farklı parametre kombinasyonu ayrı bir önbellek girdisi oluşturur. width=800 ile width=400 farklı girdi demektir. Bu esneklik özellikle srcset ile responsive görsel zinciri kuruyorsanız değerli hale gelir. Origin'de beş farklı boyut üretip yönetmek yerine tek bir yüksek çözünürlüklü görsel tutup URL parametresiyle farklı boyutları talep edebilirsiniz.
fit parametresi de önemli. cover kırparak boyutlandırır, contain en-boy oranını koruyarak sığdırır, crop belirli bir alan keser, scale-down ise yalnızca istenen boyuttan büyükse küçültür. Kare thumbnail için cover, orantıyı korumak için contain en yaygın tercih. Bu parametreler tasarım kararlarını origin'den bağımsız hale getirir.
Image Resizing, Polish ile birlikte çalışabilir: Image Resizing boyutlandırır, Polish ek sıkıştırma ve format dönüşümü uygular. Ama plan gereksinimleri ayrıdır. Image Resizing Pro planına dahil değil; ayrı bir eklenti veya üst plan gerektirir. Bu ayrımı bilmeden iki özelliği aynı pakette beklememek gerekiyor.
Küçük bir site için Image Resizing'e gerçekten ihtiyaç var mı sorusu da önemli. CMS'inizde görsel boyutları sabitse ve origin'de zaten optimize edilmişse, URL tabanlı anlık boyutlandırmanın getirdiği karmaşıklık buna değmeyebilir. Bu özellik asıl gücünü çok sayıda farklı template boyutu veya dinamik kırpma ihtiyacı olan sitelerde gösterir.
Mirage mobil ağlara ne yapar, ne yapmaz
Mirage, ziyaretçinin bağlantı kalitesini tahmin ederek yavaş bağlantılarda görselleri başlangıçta düşük çözünürlüklü yer tutucu versiyonlarla gönderir. Bağlantı iyileştikçe veya kullanıcı aşağı kaydırdıkça tam görseller yüklenir. Pro planında mevcut, dashboard'dan açılıp kapatılabilir.
Asıl dikkat edilmesi gereken nokta şu: Mirage bir LCP aracı değildir ve çoğu durumda tam tersine hareket eder. Sayfanın en üstündeki hero görselini veya ilk ekranda görünen içeriği Mirage yönetirse tarayıcı önce düşük kaliteli versiyonu yükler, asıl görsel sonra gelir. Bu sıralama LCP metriğini doğrudan kötüleştirir. Mirage açıkken above-the-fold görsellerin performansını PageSpeed veya WebPageTest ile ölçmek yerinde bir kontrol.
Format seçimi ve sıkıştırma tarafı zaten çözülmüşse Mirage'ın fark yarattığı senaryo oldukça spesifik: çok sayıda below-the-fold görsel barındıran uzun sayfalar ve bu sayfaları gerçekten yavaş mobil bağlantılarla ziyaret eden kullanıcılar. Bu iki koşul aynı anda karşılanmıyorsa Mirage'ı açmanın ölçülebilir bir etkisi olmayabilir.
Pratikte Mirage'ı doğru değerlendirebilmek için önce gerçek kullanıcı verisi gerekiyor. Core Web Vitals raporunda mobil performans belirgin şekilde düşükse ve bunun nedeni below-the-fold görsel yükleme süreleriyle ilişkilendirilebiliyorsa, Mirage'ı test etmek anlamlı. Aksi halde kapalı tutmak genellikle daha güvenli başlangıç noktası.
Plan katmanı ve devreye alma kararı
Polish, Pro planında standart olarak geliyor ve kurulum gerektirmiyor. Cloudflare'e zaten Pro veya üzeri bir planla geçtiyseniz Polish'i açık tutmak ve lossy modu denemek iyi bir başlangıç. Sonuçları kontrol etmek için tarayıcı geliştirici araçlarında cf-polished yanıt başlığını izleyebilirsiniz; bu başlık Polish'in görsele ne yaptığını raporlar.
Image Resizing için farklı plan gerekiyor. Bu özelliği kullanmadan önce Cloudflare hesabınızdaki mevcut plan ve eklenti seçeneklerini kontrol etmek gerekiyor. Kullanım bazlı fiyatlandırma olduğu için trafik hacmine göre maliyet değişir. Bir CDN üzerinden dinamik boyutlandırmaya gerçekten ihtiyaç duyuluyorsa bu adım anlamlı; ama origin'de sabit boyutlarda görsel yönetiliyorsa ve bu düzgün çalışıyorsa Image Resizing'e geçmek için acele etmemek daha sağlıklı.
Workers entegrasyonu gündeme geldiğinde tablo biraz karmaşıklaşır. Image Resizing'i Workers üzerinden kullanmak, URL oluşturma mantığını programatik olarak yönetmek anlamına gelir; farklı cihaz sınıflarına farklı boyutlar, A/B testi için farklı kalite ayarları veya içerik türüne göre değişen format kararları gibi senaryolar. Bu düzey esneklik büyük e-ticaret siteleri veya medya platformları için değerli, ancak çoğu içerik sitesi için Workers'a geçmeden önce aşılması gereken ciddi bir karmaşıklık eşiği var.
Kısa karar çerçevesi şu şekilde işliyor: Polish her zaman açık ve lossy modda, Image Resizing gerçek dinamik boyutlandırma ihtiyacı varsa, Mirage ise mobil performans verisini inceledikten sonra. Bu sırayla ilerlenmediğinde hem maliyet hem de beklenti yönetimi güçleşiyor.
Üç özelliği aynı anda açmak teknik olarak mümkün, ancak her birinin etkisini ayrı ayrı görmek ve hangi soruyu çözdüğünü net tutmak daha iyi sonuç verir. Polish format dönüşümünü ve temel sıkıştırmayı halleder; Image Resizing boyut sorununu URL katmanına taşır; Mirage bant genişliği tahminini devreye sokar. Sıralama önemli çünkü her katman farklı bir soruya yanıt veriyor.
Çoğu site için yol Polish ile başlar. Origin görselleriniz makul boyutlarda ve modern formatlara geçiş için bir CDN katmanı istiyorsanız Polish bu ihtiyacı karşılar. Image Resizing'e geçiş için gerçek bir senaryo — farklı templateler, dinamik kırpma, origin'de yönetilemeyen çözünürlük çeşitliliği — görünür hale geldikten sonra bu adımı atmak çok daha temiz olur.