Görsel CDN ne yapar?
CDN, dosyalarınızın kopyalarını ziyaretçilerinize yakın sunucularda tutar ve onlara oradan gönderir. Çoğu dosya için iş bundan ibarettir: edge'den çıkan baytlar, origin'inizin verdiği baytların aynısıdır. Görsel CDN buna bir adım ekler: önbelleği ile ziyaretçi arasında görselin kendisini değiştirebilir, hem de dört nedenle.
Biçim. Fotoğraflarda WebP ve AVIF, yüklediğiniz JPEG'den genellikle çok daha küçüktür: ölçümümüzde 262.025 baytlık bir haber fotoğrafı WebP olarak 113.860, AVIF olarak 86.936 bayt tuttu. Görsel CDN her görseli ziyaretçinin tarayıcısının kabul ettiği bir biçime dönüştürür; AVIF gösterebilen tarayıcı AVIF alır, eski bir tarayıcı da yine gösterebileceği bir görsel alır.
Boyut. Bir fotoğrafı 400 piksel genişliğinde gösteren bir telefonun 2.400 piksellik yüklemeye ihtiyacı yoktur. URL'de bir genişlik ya da yükseklik varsa görsel CDN, görseli sayfanın gerçekte gösterdiği boyuta küçültür.
Sıkıştırma. Biçim değişmese bile makul bir kalitede yeniden kodlamak ve ekranın hiç kullanmadığı verileri atmak çoğu yüklemeden bayt kazandırır: aynı haber fotoğrafı JPEG olarak yeniden kodlanınca 262.025 bayttan 186.137 bayta indi.
Önbellek. Her sonuç edge'de saklanır. Dönüşüm her varyant için bir kez çalışır; sonraki her ziyaretçi saklanan kopyayı normal CDN hızında alır.
Orijinalleriniz yerinde kalır: kaliteli tek bir dosya yüklersiniz, her varyant dağıtım yolunda ondan üretilir. Yeni bir biçim çıktığında ya da bir tasarımın boyutları değiştiğinde hiçbir şeyi yeniden dışa aktarmanız gerekmez.
Tek URL, birden çok biçim: Accept ve Vary
Tarayıcının yaptığı her görsel isteği, gösterebildiği biçimleri sıralayan bir Accept başlığı taşır. Chrome image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8 gönderir; AVIF desteklemeyen bir tarayıcı listeye image/avif yazmaz. Görsel CDN bu listeyi her istekte okur ve aynı URL'ye AVIF, WebP ya da orijinal biçimle yanıt verir. Dosya adı değişmez, yani photo.jpg AVIF olarak gelebilir: gerçekte ne gönderildiğini Content-Type başlığı söyler.
Artık tek bir URL'nin birden çok doğru yanıtı olduğu için yanıt bunu Vary: Accept ile belirtmelidir. Bu başlık edge ile ziyaretçi arasındaki her önbelleğe, şirket proxy'sinden tarayıcının kendi önbelleğine kadar, yanıtın Accept değerine bağlı olduğunu söyler. Başlık yoksa paylaşılan bir önbellek, bir ziyaretçiye giden AVIF'i saklayıp onu çözemeyen bir sonraki ziyaretçiye verebilir.
CDN'in kendi önbelleği de aynı kurala uyar ve burada bir ayrıntı önemlidir. Accept dizesi tarayıcıdan tarayıcıya, hatta aynı tarayıcının sürümleri arasında değişir; ham başlığa göre anahtarlanan bir önbellek her yazım için neredeyse aynı bir kopya tutar. İyi kurulmuş bir görsel CDN başlığı taşıdığı karara indirger (AVIF, WebP ya da hiçbiri) ve her biri için tek kopya tutar.
Öteki yol seçimi HTML'de yapmaktır: bir <picture> öğesi bir AVIF ve bir WebP <source> listeler, tarayıcı desteklediği ilk türü alır. Bu yol pazarlık gerektirmez ama her varyantı kendiniz üretir, saklar ve işaretlemede belirtirsiniz. Görsel CDN'de işaretleme düz bir <img> olarak kalır; <picture> ise sanat yönetimi için, yani telefonun aynı görselin küçük bir kopyası yerine farklı bir kırpımını alması gerektiğinde kullanılacak araç olmayı sürdürür.
URL ile boyutlandırma
Biçim pazarlığı sayfalarınızda değişiklik gerektirmez; boyutlandırma gerektirir, çünkü bir görselin ne genişlikte gösterileceğini yalnızca sayfa bilir. Görsel CDN'ler boyutu URL'den, çoğunlukla sorgu parametresi olarak alır: photo.jpg?w=640 640 piksel genişliğinde bir kopya ister. Makul bir servis tek boyut verdiğinizde en-boy oranını korur, ikisini birden verdiğinizde görseli o kutunun içine sığdırır ve bir görseli asla orijinal boyutunun üstüne büyütmez.
srcset ve sizes ile birlikte tek bir kaynak dosya her ekrana yeter. Aynı URL'nin birkaç genişliğini listeler ve görselin ne genişlikte gösterildiğini belirtirsiniz; tarayıcı, ziyaretçinin ekran yoğunluğunda hâlâ net görünen en küçük kopyayı indirir. Görsel CDN listedeki her genişliği biri ilk kez istediğinde üretir ve o andan sonra önbellekten verir.
Listeyi kısa ve sabit tutun. Her farklı genişlik ayrı bir dönüşüm ve ayrı bir önbellek nesnesidir; tüm sitede kullanılan beş genişlik, her şablonun kendi hesapladığı sayılardan çok daha iyi önbelleğe alınır. Bazı servisler kırpma, kalite ya da odak noktası gibi başka parametreler de alır; her biri varyant sayısını aynı biçimde katlar.
Tek kaynak görsel, beş genişlik: tarayıcı ihtiyacı olanı seçer
<img
src="https://example.com/media/photo.jpg?w=960"
srcset="https://example.com/media/photo.jpg?w=320 320w,
https://example.com/media/photo.jpg?w=640 640w,
https://example.com/media/photo.jpg?w=960 960w,
https://example.com/media/photo.jpg?w=1280 1280w,
https://example.com/media/photo.jpg?w=1920 1920w"
sizes="(max-width: 720px) 100vw, 720px"
width="1920" height="1080" alt="">Her varyant ayrı bir önbellek nesnesidir
Görsel CDN tek bir dosyayı bir aileye dönüştürür. Üç biçimde ve beş genişlikte istenen bir fotoğraf, önbellekte her biri kendi anahtarıyla on beş nesnedir. Bundan üç sonuç çıkar.
Önbellek anahtarı boyutu taşımalıdır. İsabet oranını artırmak için sorgu dizesini yok sayan bir kuralda ?w=320 ile ?w=1920 aynı anahtarı paylaşır ve ilk istenen boyut herkese gider. Başka parametreleri atsanız bile boyut parametrelerini anahtarda tutun.
Dönüşümün bedelini ilk istek öder. Henüz kimsenin istemediği bir varyant istek anında üretilir: edge orijinali çeker, kodlar ve sonucu önbelleğe alır. O ziyaretçi biraz daha bekler; ondan sonraki herkes önbellekteki kopyayı alır. İlk görüntülemede bile hızlı olması gereken sayfalarda, bir deploy ya da purge sonrasında birkaç istek önbelleği önceden ısıtır.
Purge ve süre dolumu tüm aileye uygulanır. Bir orijinal aynı adla değiştiğinde ondan üretilen her biçim ve boyut gitmelidir. Yol önekiyle yapılan bir purge hepsine ulaşır; tek bir tam URL'nin purge'ü yeniden boyutlandırılmış kopyaları geride bırakabilir. Dönüşümü açmak ise kolay durumdur: biçim önbellek anahtarının parçasıysa her dönüştürülmüş kopya yeni bir nesnedir ve ilk istekten itibaren gönderilir. Yalnızca ziyaretçilerin tarayıcılarında zaten duran kopyalar, orada süreleri dolana kadar olduğu gibi kalır.
Kalite ve boyut: dönüşüm ne zaman kaybeder?
Her kayıplı biçim, bir kalite ayarıyla bayt ile ayrıntı arasında takas yapar; görsel CDN'ler normal bakış boyutunda değişmemiş görünen bir varsayılan seçer. Ayarı düşürürseniz fotoğraflar yumuşar ve bloklaşır; yükseltirseniz kazanç azalır. Hasarı ilk önce metin, keskin kenarlar ve düz renkler gösterir; ekran görüntüleri ve logoların fotoğraflardan daha nazik bir işleme ihtiyaç duymasının nedeni budur.
Biçim de ayar kadar önemlidir ve kazanan görsele göre değişir. 5 Ekim 2026'da üç görseli CDN.com.tr'nin arkasındaki görsel optimizer'dan üretim ayarlarıyla geçirdik ve baytları saydık.
Haber fotoğrafı, JPEG. Orijinal 262.025 bayt; WebP 113.860; AVIF 86.936. Ders kitabı örneği: AVIF aynı görüntüyü orijinalin baytlarının yaklaşık üçte biriyle taşıyor.
Panel ekran görüntüsü, PNG. Orijinal 105.078 bayt; optimize PNG 40.379; WebP 41.218; AVIF 27.942. Paletli PNG düz renkte ve metinde çok iyidir; burada WebP ondan büyük çıktı, AVIF ise yine kazandı.
Favicon, PNG, 16×16. Orijinal 701 bayt; optimize PNG 483; WebP 314; AVIF 682. Bu boyutta AVIF kabının sabit yükü daha iyi sıkıştırmasından ağır basar ve WebP açık farkla kazanır.
Hiçbir biçim her yerde kazanmaz; bir dönüşüm, orijinalin en iyi sürümünden daha ağır bir dosya da üretebilir. İyi bir görsel CDN kodlar, baytları karşılaştırır ve küçük olanı gönderir; körü körüne dönüştüren bir servis görsellerinizin bir kısmını ağırlaştırır ve onları yine de optimize edilmiş diye raporlar. Tüm ölçümler ve nedenleri AVIF mi WebP mi rehberimizde.
Görsel CDN mi, build sırasında resim optimizasyonu mu?
Aynı biçimleri görsel CDN olmadan da elde edebilirsiniz. Bir build adımı, bir yükleme kancası ya da bir eklenti her görseli bir kez dönüştürür, varyantları orijinallerin yanına yazar ve düz bir CDN bunları <picture> işaretlemesiyle sunar. Hangisinin daha iyi olduğu, görsellerinizin nereden geldiğine bağlıdır.
Build sırasında optimizasyon kazanır görselleri depoda duran bir sitede: bir tanıtım sitesi, dokümantasyon, statik bir uygulama. Görsel kümesi önceden bilinir, her dosya elle ayarlanabilir, ziyaretçi beklerken hiçbir şey işlenmez ve giden şey tam olarak test ettiğiniz şeydir.
Görsel CDN kazanır görseller kimsenin işleyemeyeceği hızda geldiğinde: bir mağaza panelinden yüklenen ürün fotoğrafları, bir haber sitesinin arşivi, yılların yüklemesini taşıyan bir WordPress medya kütüphanesi, kullanıcılarınızın paylaştığı resimler. Boyut sayısı her yeni tasarımla arttığında, işaretlemeyi bir tema ya da barındırılan bir CMS yazdığında ve kendi sunucunuzda bir dönüştürücü çalıştırmak istemediğinizde de kazanır.
İkisi iyi birleşir: elle ayarlanmış ana görseller build'den, CMS'e yüklenen her şey görsel CDN'den. Fotoğraf değil çizim olan logo ve ikonlar ise her iki durumda da en iyi SVG olarak kalır: dönüştürülecek bir şey yoktur ve her boyutta keskin kalırlar.
Açmadan önce kontrol edilecek tuzaklar
Görsel CDN'lerdeki sorunların çoğu birkaç yerden çıkar ve her biri bir ziyaretçi fark etmeden kontrol edilebilir.
Eksik Vary. Accept değerine göre değişen ama Vary: Accept taşımayan bir yanıt, bu listede ziyaretçiye bozuk görsel gösterebilecek olan hatadır. CDN'inizin ne gönderdiğini ve önündeki proxy'nin neyi geçirdiğini kontrol edin.
Önbellek anahtarının dışında kalan boyut parametreleri. Herkese tek boyut gider: aynı görselin iki genişliğini isteyin ve gelenleri karşılaştırın.
Sınırsız parametreler. Her genişlik kabul ediliyorsa herkes binlerce boyut isteyip her dönüşümün bedelini size ödetebilir. Şablonlarınızdaki sabit bir genişlik listesi kendi sayfalarınızı birkaç varyantla sınırlar; dışarıdan gelen istekleri ise yalnızca servis tarafındaki bir sınır, örneğin izin verilen genişlikler listesi ya da istek hızı sınırı durdurur.
Daha ağır çıktılar. Kendi görsel karışımınızı ölçün. Servis baytları karşılaştırmıyorsa acıyı düz grafikler ve ikonlar çeker.
Olduğu gibi geçen biçimler. Animasyonlu GIF'ler, SVG dosyaları ve zaten WebP olan görseller çoğu zaman değişmeden gider; servisinizin hangi biçimleri dönüştürdüğüne bakın.
İşleme maliyeti ve kotalar. Kodlama, özellikle AVIF, önbellekteki bir dosyayı göndermekten çok daha fazla CPU harcar ve servisler bunu ölçer: dönüşüm başına, işlenen bayt başına ya da bir paketin kotasından. Tüm görselleri bir anda açmadan önce sizinkinin nasıl saydığını okuyun.
Eski kopyalar. Tarayıcıların dönüşümü açmanızdan önce yüklediği görseller, süreleri dolana kadar onların önbelleğinde kalır ve hiçbir CDN purge'ü onlara ulaşmaz. Sonucu sayfayı yenileyerek değil, aşağıdaki denetleyici gibi yeni bir istekle değerlendirin.
Sitenizin ne sunduğunu denetleyin
Aşağıdaki denetleyici bir görsel CDN'in, ya da yokluğunun, gerçek bir sayfaya ne yaptığını gösterir. Sayfanın HTML'ini okur, <img>, srcset, <picture> ve og:image içinden en fazla 20 görsel alır ve her birini iki kez ister: bir kez güncel bir tarayıcı gibi (Accept: image/avif,image/webp,…), bir kez her şeyi kabul eden bir istemci gibi (Accept: */*). Dosya adı ne derse desin gerçek biçimi anlamak için her yanıtın ilk baytlarını okur, baytları sayar, Vary başlığını ve önbellek durumunu raporlar. Tek bir görsel adresi de girebilirsiniz.
Her görselde iki istek de orijinal biçimi alıyorsa yoldaki hiçbir şey görsellerinizi dönüştürmüyor demektir. Modern istek AVIF ya da WebP alıyor ama yanıtta Vary: Accept yoksa önce onu düzeltin. Her sonucu ve sınırlarını denetleyicinin kendi sayfası açıklar.
CDN.com.tr'de görsel optimizasyonu
Görsel optimizasyonu, tüm hesabınız ya da tek bir yayınlama kuralı için bir anahtardır. Edge, JPEG ve PNG görselleri WebP'ye, hesap için WebP + AVIF seçtiyseniz AVIF ve WebP'ye dönüştürür ve her tarayıcı kabul ettiği bir biçimi alır; ikisini de kabul etmeyen tarayıcılar görseli orijinal biçiminde alır. WebP + AVIF'te yanıt aynı URL'den, Vary: Accept ile gelir; yalnız WebP'de, WebP kabul eden tarayıcılar .webp uzantılı bir kopyaya yönlendirilir. 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. Dönüşüm başarısız olursa edge onun yerine orijinal görseli sunar. İşleme aylık kotanıza sayılır.
Yukarıdaki ölçümler bu optimizer'dan geliyor. WebP + AVIF'te 262.025 baytlık haber fotoğrafı 86.936 baytlık AVIF olarak, 105.078 baytlık panel ekran görüntüsü de 27.942 bayt olarak gider. Bir megapiksele kadar olan küçük ya da düz renkli PNG görseller (ikonlar, ekran görüntüleri, illüstrasyonlar) ayrıca bizim optimize PNG'mizi de geçmelidir; bu yüzden WebP kabul edip AVIF kabul etmeyen bir tarayıcı o ekran görüntüsünü 40.379 baytlık PNG olarak alır, favicon da 682 baytlık AVIF yerine 314 baytlık WebP olarak gider.
Boyutlandırma URL ile yapılır: görsel adresine ?w=, ?h= 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 bir görsel asla orijinal boyutunun üstüne büyütülmez. Yeniden boyutlandırılan görseller de dönüştürülür ama orijinalle karşılaştırılmaz. Bir kural sorgu dizesini önbellek anahtarında tuttuğu sürece (varsayılan budur) w ve h de anahtarda kalır; tüm sorgu parametrelerini yok sayan bir kural hepsi için tek bir boyutu önbelleğe alır.
Edge'in tam boyut karşılaştırması gelmeden önce dönüştürdüğü kopyalar, süreleri dolana ya da purge edilene kadar olduğu gibi kalır; bir görseli zaten yüklemiş tarayıcılar da kendi kopyalarını tarayıcıdaki süresi dolana kadar tutar. Yalnız WebP'de .webp kopyaya yönlendirme Vary: Accept taşımaz ve yukarıdaki denetleyicinin bildirdiği budur; WebP + AVIF her tarayıcıya tek URL'den Vary: Accept ile yanıt verir. AVIF kodlaması daha çok işlem gerektirdiği için kotaya WebP'den yüksek bir oranla sayılır; panel güncel oranı anahtarın altında gösterir. Anahtarları, biçim seçimini ve purge'ü görsel optimizasyonu yardım konusu adım adım anlatır.
WordPress. CDN.com.tr arkasındaki bir WordPress sitesinde dönüşümü edge yapar: medya kütüphanenizdeki görseller CDN'den geçerken dönüştürülür; böylece sunucunuz kodlamaya CPU harcamaz, kütüphaneye fazladan WebP ya da AVIF dosyası yazılmaz ve görsel URL'leri değişmediği için temalar ve sayfa oluşturucular çalışmayı sürdürür. Site CDN'imizde değilse ücretsiz CDNTR eklentisi görselleri sitenin kendi sunucusunda WebP'ye, sunucu destekliyorsa AVIF'e de dönüştürebilir. İkisinden birini kullanın: edge dönüşümü açıkken eklentinin yerel dönüşümünü kapalı tutun ki edge orijinallerinizden çalışsın.
Sık sorulan sorular
CDN ile görsel CDN arasındaki fark nedir?
CDN, dosyalarınızın kopyalarını ziyaretçilerinize yakın yerlerde saklar ve onları değiştirmeden gönderir. Görsel CDN bunu da yapar, ayrıca görselleri yolda değiştirir: her tarayıcının kabul ettiği bir biçime dönüştürür, URL bir boyut istediğinde yeniden boyutlandırır ve her sonucu önbelleğe alır. Birçok CDN görsel optimizasyonunu bir anahtar olarak sunar; yani ikisi çoğu zaman tek bir özelliği açık olan aynı ağdır.
Görsel CDN orijinal dosyalarımı değiştirir mi?
Hayır. Orijinaller sunucunuzda ya da depolamanızda yüklediğiniz gibi durur; dönüştürülmüş ve yeniden boyutlandırılmış kopyalar dağıtım yolunda üretilir ve CDN'in önbelleğinde yaşar. Dönüştürülmüş görseller orijinal URL'lerinden gidiyorsa, dönüşümü kapattığınızda önbellekteki kopyaların süresi doldukça ya da purge edildikçe ziyaretçiler yeniden orijinalleri alır.
<picture> öğesine hâlâ ihtiyacım var mı?
Biçim için hayır. Pazarlık yapan bir görsel CDN'de düz bir <img>, tarayıcıya göre AVIF, WebP ya da orijinali alır; <source type="image/avif"> satırlarını kaldırabilirsiniz. <picture> öğesini sanat yönetimi için tutun: küçük bir ekranın aynı görselin küçük bir kopyası yerine farklı bir kırpımını alması gerektiğinde.
Dönüştürülmüş bir görsel daha ağır çıkabilir mi?
Evet; servis karşılaştırmadan dönüştürüyorsa orijinalin en iyi sürümünden daha ağır çıkabilir. Ölçümümüzde 16×16 bir favicon AVIF olarak 682 bayt tuttu, optimize PNG 483, WebP 314 bayttı; bir panel ekran görüntüsü de WebP olarak (41.218 bayt) optimize PNG'den (40.379) büyük çıktı. İyi bir servis baytları kontrol eder ve küçük dosyayı gönderir. CDN.com.tr'de yeni dönüştürülen tam boyutlu bir görsel yalnızca orijinalden küçükse, bir megapiksele kadar olan küçük ya da düz renkli bir PNG ise ayrıca bizim optimize PNG'mizi de geçiyorsa gönderilir.
WordPress için görsel CDN'e değer mi?
Genellikle evet, çünkü görsellerin kimsenin optimize edemeyeceği hızda biriktiği yer WordPress siteleridir. Edge dönüşümü eski yüklemeler dahil tüm medya kütüphanesindeki JPEG ve PNG görselleri, sunucunuzda çalışan bir dönüştürücü ya da wp-content/uploads içinde fazladan dosya olmadan kapsar. CDN'de olmayan bir site için alternatif, CDNTR gibi yerelde dönüştüren bir eklentidir.
CDN.com.tr'de görsel işleme nasıl ücretlendirilir?
Trafik gibi hesabın aylık kotasına sayılır; ayrıca satın alınacak bir paket yoktur. AVIF kodlaması daha çok işlem gerektirdiği için WebP'den yüksek bir oranla sayılır; panel güncel oranı anahtarın altında gösterir.