CDN ve Teslimat

Image CDN Nedir?

Image CDN çalışma diyagramı: kaynak görsel sunucusundan edge node üzerinden tarayıcıya optimize görsel teslimatı

Bir web sayfasındaki görseller, toplam sayfa ağırlığının çoğu zaman yüzde altmış ile seksenini oluşturur. Bu oran her yeni yüksek çözünürlüklü ekranla birlikte büyümeye devam eder. Görselleri sıkıştırmak, doğru formatta sunmak ve doğru boyuta getirmek — bunların hepsi teorik olarak çözülmüş problemler gibi görünür. Pratikte ise bu dönüşümlerin kim tarafından, nerede ve ne zaman yapılacağı sorusu çok daha karmaşık bir hal alabilir.

Image CDN, bu soruya belirli bir yaklaşım getirir. Standart bir CDN statik dosyaları dağıtır; Image CDN ise o dosyaları sunarken aynı anda dönüştürür. Boyutlandırma, format değişimi, kalite ayarı — bunların tamamı sunucu tarafında, her istek için ayrı ayrı gerçekleşebilir. Bu fark küçük görünür; ama birkaç yüz farklı ekran boyutuna, birkaç farklı tarayıcıya ve değişen ağ koşullarına karşı tutarlı bir görsel teslimat sağlamaya çalışıyorsanız, aradaki mesafe önemli hale gelir.

Bu farkın ne anlama geldiğini, hangi koşullarda gerçek kazanım sağlandığını ve ne zaman gereksiz karmaşıklık getirdiğini anlamak için her katmanı ayrı ele almak gerekiyor.

Standart CDN ile temel fark

Standart bir CDN, bir dosyayı origin sunucusundan alır ve onu coğrafi olarak dağıtılmış edge node'lara kopyalar. Kullanıcıya yakın bir node'dan teslimat yapılır; bu gecikmeyi düşürür ve origin üzerindeki yükü azaltır. Ancak CDN bu süreçte dosyayı olduğu gibi taşır. Kaynak dosya 4K çözünürlükte JPEG olarak yüklendiyse, 400 piksel genişliğindeki bir telefona da aynı dosya gider.

Image CDN ise teslimat katmanına bir dönüşüm motoru ekler. Aynı dosya, gelen isteğin parametrelerine göre farklı biçimlerde sunulur. Bir masaüstü tarayıcısı AVIF destekliyorsa AVIF alır; AVIF desteklemiyorsa WebP; ikisi de yoksa JPEG. Ekran genişliği 480 piksel ise görsel 480 piksel genişliğinde gelir. Bu kararlar dinamik olarak, istek anında alınır. Standart CDN'in site hızına katkısı büyük ölçüde coğrafi yakınlıktan gelirken, Image CDN katkısı hem yakınlıktan hem de dosyanın daha küçük ve daha uygun biçimde teslim edilmesinden kaynaklanır.

Görsel dönüşüm motoru nasıl çalışır

Image CDN'in temel mekanizması URL tabanlıdır. Klasik bir kullanım şöyle görünür: images.example.com/photo.jpg?w=800&f=webp&q=80. Bu parametreler CDN'e genişliği 800 piksel yap, formatı WebP kullan, kaliteyi 80'e ayarla talimatını verir. Bazı servisler bu parametreleri kendi sözdiziminde uygular; bazıları ise parametresiz akıllı otomatik dönüşüm sunar.

Dönüşüm süreci genellikle ilk istek geldiğinde gerçekleşir. Sunucu bu parametrelerle ilk kez karşılaştığında görseli işler ve sonucu edge'de depolar. Sonraki aynı istekte depolanan sürüm sunulur; dönüşüm tekrarlanmaz. Bu yaklaşım hem esneklik hem de verimlilik sağlar. Ancak ilk istek her kombinasyon için ayrı bir işlem gerektirdiğinden, nadir erişilen parametre kombinasyonlarında ilk yanıt süresi belirgin biçimde uzayabilir.

İstek başı boyutlandırma mekanizması

Boyutlandırma, Image CDN'in en çok kullanılan özelliğidir. Origin'de tek bir yüksek çözünürlüklü dosya saklanır; teslimat anında istenen boyuta getirilir. Bu depolama açısından da avantajlıdır: onlarca farklı boyut önceden üretilip saklanmak zorunda değildir.

Ancak boyutlandırmanın doğru çalışması için isteği yapan tarafın doğru genişliği bildirmesi gerekir. Bu bilgi çoğunlukla HTML'deki sizes ve srcset nitelikleriyle sağlanır; bazen de CDN servisinin JavaScript SDK'sı tarayıcı genişliğini otomatik olarak tespit eder. Parametreler yanlış kurgulanırsa ya da her istek aynı genişlik değerini gönderirse boyutlandırmanın pratikte anlamlı bir katkısı kalmaz. Mekanizma ne kadar güçlü olursa olsun, gelen parametre ne kadar isabetliyse sonuç o kadar iyi olur.

Format seçiminde kararı kim veriyor

Format kararı farklı Image CDN servislerinde farklı biçimlerde işler. Bir kısmı kararı tamamen otomatik hale getirir: gelen Accept başlığını okur, tarayıcının desteklediği formata göre dönüştürür, parametreye gerek duymaz. Bir kısmı ise URL parametresiyle açık format belirtilmesini bekler; belirtilmezse kaynak dosyanın orijinal formatını sunar.

Otomatik format seçiminde dikkat edilmesi gereken bir nokta vardır: her tarayıcının Accept başlığı aynı değildir ve CDN bu başlığa göre farklı cache anahtarları üretmek zorunda kalır. Aynı URL için WebP ve AVIF sürümleri ayrı ayrı önbelleğe alınır. Bazı CDN yapılandırmalarında bu durum beklenmedik cache bölünmelerine yol açabilir. Format seçimi basit bir optimizasyon gibi görünse de cache mimarisini doğrudan etkiler.

WebP ve AVIF: iki formatın gerçek farkı

WebP, JPEG ve PNG'ye kıyasla genellikle yüzde yirmi ile otuz daha küçük dosya boyutu üretir. Tarayıcı desteği artık oldukça geniştir; yüzde doksanın üzerinde. AVIF ise daha yeni bir format olup WebP'ye kıyasla ek yüzde on ile yirmi kazanım sağlayabilir. Özellikle fotoğraf ve ayrıntılı görsellerde bu fark belirginleşir.

Ancak AVIF'in iki önemli maliyeti vardır. Kodlama süreci WebP'ye göre önemli ölçüde daha ağırdır; ilk kez işlenen bir görsel için AVIF dönüşümü birkaç yüz milisaniyeden birkaç saniyeye kadar uzayabilir. Image CDN bu yükü ilk istekte bir kez üstlenir, ardından sonucu depolar. İkinci sorun ise AVIF tarayıcı desteğinin WebP'nin biraz gerisinde olmasıdır. Bu nedenle otomatik format seçimi genellikle AVIF → WebP → JPEG şeklinde bir geri dönüş zinciri uygular; hangi katmanın devreye gireceğini gelen Accept başlığı belirler.

Kalite parametreleri ve görsel bütünlüğü

Kalite değeri (quality factor), sıkıştırma oranını belirleyen en doğrudan parametredir. JPEG ve WebP için 0–100 arasında bir değer; düşük değer daha küçük dosya ama daha fazla görsel kayıp anlamına gelir. Pratikte fotoğrafik içerik için 75–85 arası değerler çoğu kullanım senaryosunda iyi bir denge sağlar.

Image CDN bu değeri URL parametresiyle almak yerine otomatik olarak da belirleyebilir. Bazı servisler "perceptual quality" yaklaşımıyla görselin içeriğine göre kalite değerini dinamik ayarlar: sade arka planlı bir görsel için kalite değerini düşürürken ayrıntı yoğun bir görsel için yüksek tutar. Bu yöntem dosya boyutunu tutarlı bir görsel deneyim altında minimuma çekmeyi hedefler. Ama bu tür akıllı analizin ne kadar doğru çalıştığı servis kalitesine göre önemli ölçüde değişir; ürün fotoğrafları üzerinde test etmeden varsayılan ayarlara güvenmek hatalı kararlar doğurabilir.

Edge'de depolama ve cache stratejisi

Image CDN'de cache yönetimi standart CDN'e göre daha karmaşıktır, çünkü önbelleğe alınması gereken birim tek bir dosya değil, her dosyanın her parametreli kombinasyonudur. Bir görsel dosyası için onlarca farklı boyut ve format kombinasyonu edge'de saklanabilir.

Bu durum iki soruyu beraberinde getirir: depolama maliyeti ve cache geçerliliği. Kaynak dosya güncellendiğinde türetilmiş tüm kombinasyonların geçersiz sayılması gerekir. Bazı Image CDN servisleri bunu otomatik olarak yönetir; bazılarında açık bir purge işlemi gerekmektedir. Browser Cache Control mantığı bu katmanda da geçerliliğini korur, ancak hem edge hem de origin düzeyinde koordineli biçimde uygulanması gerekir. Purge mekanizmasının nasıl çalıştığını anlamadan Image CDN'e taşınmak, güncellenmiş görsellerin eski halleriyle uzun süre servis edilmesine yol açabilir.

Origin yükünü kimin taşıdığı

Standart bir CDN'de origin sunucu görsel dönüşümünden sorumlu değildir; yalnızca var olan dosyaları depolar ve ister. Image CDN kullanıldığında ise bu yük büyük ölçüde CDN tarafına geçer. Origin sunucu yalnızca kaynak dosyaları sağlar; boyutlandırma, format dönüşümü ve kalite ayarı CDN edge'inde gerçekleşir.

Bu değişim özellikle yüksek trafikli sitelerde önemlidir. Onlarca farklı boyut sürümünü dinamik olarak üretmek yerine tek bir kaynak dosyası tutmak, hem depolama hem de sunucu kaynak kullanımı açısından avantaj sağlar. Bununla birlikte, her yeni parametre kombinasyonu ilk kez işlenirken edge üzerinde geçici bir işlem yükü oluşur. Bu yük popüler görseller için cache dolduğunda hızla ortadan kalkar; ancak uzun kuyruklu içerik ağırlıklı sitelerde — yani her gün onlarca yeni görsel eklenen platformlarda — ilk istek gecikmeleri daha belirgin olabilir.

Hangi site tiplerinde anlamlı fark yaratır

Image CDN en çok görsel çeşitliliği yüksek sitelerde anlamlı kazanım sağlar. E-ticaret siteleri, haber portalları, stok görsel platformları bu kategorinin başında gelir. Her ürün için beş farklı ekran boyutuna ve iki farklı formata ayrı görsel üretmek ve sürdürmek, build sürecinde ciddi karmaşıklık yaratır. Image CDN bu yükü teslimat katmanına taşır ve her güncelleme sonrasında elle müdahaleyi ortadan kaldırır.

Görsel sayısı az, değişim sıklığı düşük ve hedef kitle homojen bir tarayıcı profilinden oluşan sitelerde ise ek karmaşıklık ve maliyet, sağlanan faydanın önüne geçebilir. Beş ila on statik görseli olan bir blog için build sürecinde üretilen srcset sürümleri çoğunlukla yeterlidir. LCP süresini iyileştirmeye çalışıyorsanız, Image CDN'e geçmeden önce hero görsel boyutunu ve formatını optimize etmek genellikle daha düşük maliyetli bir başlangıç noktasıdır.

Image CDN olmadan çözülemeyen senaryo

Build sürecinde türetilemeyen görseller için Image CDN pratik bir çözüm haline gelir. Kullanıcıların yüklediği içerikler bu kategorinin en açık örneğidir: bir e-ticaret satıcısının yüklediği ürün fotoğrafının boyutu, formatı ve kalitesi önceden bilinmez. Her yükleme anında dönüşüm yapacak ayrı bir sunucu katmanı kurmak mümkündür; ama bu sorumluluğu Image CDN'e devretmek işin ölçeklenmesini çok daha yönetilebilir kılar.

Benzer bir senaryo, A/B test edilecek görsel varyantları ya da kişiselleştirme gerektiren durumlar için de geçerlidir. Bunların yanı sıra görsel içerik arşivi büyük ve heterojen olan sitelerde — yüzlerce farklı kaynak formatı ve çözünürlük içeren platformlarda — Image CDN merkezi bir normalizasyon noktası işlevi görür ve kaynak görsel kalitesindeki tutarsızlıkları teslimat anında giderir.

Maliyet ve ölçekleme dengesi

Image CDN servisleri genellikle üç ayrı değişken üzerinden fiyatlandırılır: işlenen görsel sayısı (dönüşüm işlemi), sunulan bant genişliği ve depolanan türev sayısı. İlk bakışta karmaşık görünen bu yapı, yüksek trafikte doğrudan maliyet avantajına dönüşebilir; çünkü görsel boyutlarının küçülmesi bant genişliği tüketimini de azaltır. Bu denklem çoğunlukla Image CDN lehine çalışır; ancak düşük trafikli sitelerde sabit platform maliyeti baskın unsur haline gelir.

Ölçekleme açısından Image CDN'in doğrusal bir yapısı vardır: site büyüdükçe görsel çeşitliliği artar ama altyapı değişmez. Bu tutarlılık büyüme sürecindeki mühendislik yükünü azaltır. Öte yandan başlangıç fazında, özellikle küçük servisler için konfigürasyon zamanı ve öğrenme maliyeti, parasal maliyetin önüne geçebilir. Pilot aşamada tek bir görsel kategorisini Image CDN üzerinden test etmek, genel geçişten önce bu denklemi doğrulamak için iyi bir yöntemdir.

Servis seçiminde değerlendirme kriterleri

Image CDN pazarında birkaç farklı yaklaşım bulunur. Cloudinary ve Imgix gibi hizmetler ağır özellik setiyle öne çıkar; format desteği, akıllı kırpma, yüz algılama ve efekt zinciri bunlara dahildir. Fastly Image Optimizer ve CloudFront Image Handler gibi alternatifler mevcut CDN altyapısıyla entegrasyon üzerine kuruludur. Cloudflare Images veya Bunny Optimizer ise daha sadeleştirilmiş, kullanım kolaylığını ön planda tutan seçenekler arasındadır.

Servis seçerken bakılacak ilk noktalar şunlardır: mevcut origin ve CDN altyapısıyla entegrasyon kolaylığı, cache geçersiz kılma mekanizmasının ne kadar kontrol edilebilir olduğu, ilk istek gecikmesi ve desteklenen format geri dönüş zinciri. Özellikle TTFB üzerinde hassas olan siteler için ilk istek gecikmesi kritik bir kriter haline gelir; cache'de olmayan bir kombinasyon için yapılan ilk istek, standart bir CDN'den belirgin biçimde daha yavaş olabilir ve bu gecikme hero görsel gibi kritik kaynaklarda lazy loading stratejisini doğrudan etkiler.

Image CDN, temel olarak bir görsel teslimat problemi için ölçeklenen bir çözümdür. Standart CDN'in görsel dosyaları olduğu gibi dağıtma yaklaşımına dinamik dönüşüm katmanı ekler. Bu ekleme bazı durumlarda şeffaf ve etkilidir; bazı durumlarda ise gereksiz karmaşıklık getirir.

Görsel ağırlıklı, kullanıcı üretimli içerik barındıran ya da farklı ekran boyutlarına tutarlı deneyim sunmak zorunda olan siteler için bu katman genellikle operasyonel zamanı kısaltır ve performans kazanımını kolaylaştırır. Görsel sayısı az veya değişim ihtiyacı sınırlı sitelerde ise aynı sonuca build sürecindeki basit araçlarla ulaşmak daha pratik kalabilir.

Karar nihayetinde görsel pipeline'ınızın ne kadar karmaşık olduğuyla ilgilidir. Kaynak görsel setiniz homojen, boyut ihtiyacınız tahmin edilebilir ve teslimat altyapınız zaten stabilse Image CDN ek bant genişliği maliyetinden fazlasını getirmeyebilir. Ama her gün yeni içerik ekleniyor, format gereksinimleri değişiyor ya da kullanıcılar doğrudan görsel yüklüyorsa, bu işi teslimat katmanına devretmek mühendislik yükünü önemli ölçüde azaltır.