Öğeleri kullanıcılara hızlı ve etkili bir şekilde sunan, dağıtılmış ancak birbirine bağlı sunuculardan oluşan bir ağ olan içerik yayınlama ağının (CDN) temel kavramını zaten biliyor olabilirsiniz. Bir dosya CDN sağlayıcısına yüklendiğinde, dünya genelindeki CDN ağının diğer düğümlerinde bir kopya oluşturulur. Bir kullanıcı dosya isteğinde bulunduğunda, veriler kullanıcıya coğrafi olarak en yakın düğüm tarafından gönderilir, böylece gecikme azaltılır. CDN'lerin dağıtılmış yapısı, ağ kesintileri veya donanım arızası durumunda yedeklilik ve trafikteki ani artışları azaltmak için yük dengeleme de sağlar.
Resim CDN, önemli bir fark dışında tüm bu avantajları sağlayabilir: URL'nin erişmek için kullandığı dizelere bağlı olarak bir resmin içeriğini dönüştürme ve optimize etme özelliğidir.
Kullanıcı, sağlayıcıya standart, yüksek çözünürlüklü bir resim yükler ve bu resim, bu resme erişmek için kullanılacak bir URL'yi oluşturur:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Kullanılan kesin söz dizimi sağlayıcılar arasında farklılık gösterse de en azından tüm resim CDN'leri kaynak resmin boyutlarını, kodlamasını ve sıkıştırma ayarlarını değiştirmenize imkan tanır. Örneğin bulutsal, yüklenen bir resmin dinamik yeniden boyutlandırmasını şu söz dizimiyle gerçekleştirir: h_, ardından piksel cinsinden sayısal yükseklik, w_ genişlik ve resmin nasıl ölçeklenmesi veya kırpılması gerektiğiyle ilgili ayrıntılı bilgileri belirtmenize olanak tanıyan c_ değeri.
URL'ye dosya adı ve uzantıdan önce virgülle ayrılmış değerler eklenerek çeşitli dönüştürme işlemleri yapılabilir. Yüklenen resim, istekte bulunan img öğesinin src özelliği ile gereken şekilde değiştirilebilir.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
Bir kullanıcı bu dönüşümleri içeren URL'yi ilk kez ziyaret ettiğinde, resmin 400 piksel (w_400) genişliğine orantılı olarak ölçeklendirilmiş yeni bir sürümü oluşturulur ve gönderilir. Yeni oluşturulan bu dosya daha sonra CDN'de önbelleğe alınır. Böylece, isteğe bağlı olarak yeniden oluşturulmak yerine aynı URL'yi isteyen kullanıcılara gönderilebilir.
Görüntü CDN sağlayıcılarının çeşitli teknoloji yığınlarıyla gelişmiş kullanımı ve entegrasyonu kolaylaştırmak için yazılım geliştirme kitleri sunması alışılmadık bir durum olmasa da, bu öngörülebilir URL kalıbı tek başına, yüklenen tek bir dosyayı başka bir geliştirme aracına gerek olmadan kolayca uygulanabilir bir srcset özelliğine dönüştürmemize olanak tanır:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
İstediğimiz sıkıştırma düzeyini, şu anda bilindik bir söz dizimi olarak tanımladık: q_,"kalite" anlamına geliyor ve ardından sıkıştırma seviyesi için sayısal kestirme kullanılıyor:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Ancak çoğu resim CDN'sinin sağladığı tam otomatik sıkıştırma, kodlama ve içerik pazarlığı gibi inanılmaz derecede güçlü bir dizi özellik sayesinde, bu bilgileri manuel olarak eklemeniz nadiren gerekebilir.
Otomatik sıkıştırma
CDN'lerin ellerindeki bilgi işlem gücü sayesinde inanılmaz derecede güçlü bir özellik sunulurlar. Bir görüntünün içeriğini analiz ederek ideal sıkıştırma düzeyini ve kodlama ayarlarını algoritmik olarak belirleriz. Görüntülerimizin her biri için sıkıştırma konusunda sizin veya benim elle ince ayar yaptığımız gibi.
Bu algoritmalar, dosya boyutu ile algı kalitesini dengeleyerek alacağınız kararları otomatikleştirir, görüntü içeriğini bozulmanın ölçülebilir belirtileri için analiz eder ve sıkıştırma ayarlarını buna göre düzenler. Bu, sıkıştırma ayarlarında herkese uyan tek bir manuel yaklaşıma kıyasla çoğu zaman dosya boyutunda büyük düşüşler anlamına gelir.
Bu süreç kulağa karmaşık gelebilir ancak uygulama çok daha basit olamaz. Cloudinary için resim URL'sine q_auto eklenmesi şu özelliği etkinleştirir:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
Otomatik kodlama ve içerik müzakeresi
Bir resim isteği alındıktan sonra resim CDN'leri, öğe istekleriyle (özellikle Accept üst bilgisi) birlikte tarayıcı tarafından gönderilen HTTP üst bilgileri aracılığıyla tarayıcının desteklediği en modern kodlamayı belirler. Bu başlık, bir <picture> öğesinin <source> özelliğinin type özelliğini doldurmak için kullanacağımız medya türlerini kullanarak tarayıcının anlayabildiği kodlamaları gösterir.
Örneğin, bir öğe URL'sindeki resim dönüşümleri listesine f_auto parametresini eklediğinizde Cloudinary, tarayıcının anlayabileceği en verimli kodlamayı sunmasını açıkça bildirir:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Ardından sunucu, resmin bu kodlamaya sahip bir sürümünü oluşturur ve sonucu aynı tarayıcı desteğine sahip sonraki tüm kullanıcılar için önbelleğe alır. Bu yanıt, dosya uzantısından bağımsız olarak tarayıcıya dosyanın kodlamasını açıkça bildirmek için bir Content-Type üst bilgisi içerir. Modern bir tarayıcıya sahip bir kullanıcı .jpg ile biten bir dosya için istekte bulunsa bile, bu istekle birlikte sunucuya AVIF'in desteklendiğini bildiren bir başlık gelir ve sunucu, AVIF olarak kodlanmış dosyayla birlikte bunu AVIF olarak ele almak için açık bir talimat gönderir.
Sonuç olarak, sizi alternatif olarak kodlanmış dosyalar oluşturmaktan ve sıkıştırma ayarlarınızda manuel olarak ince ayar yapmaktan (veya bu görevleri sizin için yapan bir sistemi yönetmekten) kurtulmakla kalmaz, aynı zamanda bu dosyaları kullanıcılara etkili bir şekilde iletmek için <picture> ve type özelliklerini kullanma ihtiyacını da ortadan kaldırır. Dolayısıyla, srcset ve sizes söz dizimini tek başına kullandığınızda, kullanıcılarınıza en mantıklı eski kodlamanın kullanıldığı WebP (veya yalnızca Safari için JPEG-2000) kullanılacak şekilde kodlanmış görseller sağlayabilirsiniz (örneğin, AVIF).
Görüntü CDN kullanmanın dezavantajları, teknikten daha lojistiktir. Başlıca başta maliyettir. Resim CDN'lerinin kişisel kullanım için özelliklere sahip, güçlü ücretsiz planlar sunması yaygın bir uygulamadır. Ancak resim öğeleri oluşturmak için yüklemeler için bant genişliği ve depolama alanı, resimleri dönüştürmek amacıyla sunucuda işleme ve önbelleğe alınan dönüştürme sonuçları için ek alan gerekir. Bu nedenle gelişmiş kullanım ve yüksek trafik alan uygulamalar ücretli bir plan gerektirebilir.