İçerik yayınlama ağının (CDN) temel kavramını zaten biliyor olabilirsiniz: Dağıtılmış ancak birbirine bağlı bir ağ reklam öğelerini kullanıcılara hızlı ve verimli bir şekilde teslim eden sunucular bulunur. Bir dosya CDN sağlayıcısına yüklendiğinde bir kopya oluşturulur . Kullanıcı dosya isteğinde bulunduğunda veriler, düğüm tarafından coğrafi olarak gönderilir. kullanıcıya en yakın konuma getirerek gecikmeyi azaltır. CDN'lerin dağıtılmış yapısı, ağ kesintileri veya durumlarında trafikteki ani artışları azaltmak için donanım arızası ve yük dengelemeden oluşur.
Resim CDN, tüm bu avantajları sağlayabilir. Yalnızca tek bir fark vardır: dönüştürme ve resim öğeleri bir resme erişmek için kullanılan URL'nin dizelerine göre bir resmin içeriğini optimize eder.
Kullanıcı, sağlayıcıya standart, yüksek çözünürlüklü bir resim yükler ve bu resim, görüntüye erişmek için kullanılacak bir URL oluşturur:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Kullanılan tam söz dizimi, sağlayıcıdan sağlayıcıya değişse de, tüm resim CDN'leri en azından bir kaynağı değiştirmenize olanak tanır.
ve sıkıştırma ile ilgili ayarları değiştirebilirsiniz. Örneğin, Cloudinary
bir dosyanın dinamik yeniden boyutlandırmasını
şu söz dizimilerle yüklenen bir resim: h_ ve ardından piksel cinsinden sayısal yükseklik, w_ ve ardından genişlik,
ve resmin nasıl ölçeklendirileceği veya kırpılacağıyla ilgili ayrıntılı bilgileri belirtmenize olanak tanıyan bir c_ değeri.
Dosya adı ve uzantısından önce URL'ye virgülle ayrılmış değerler eklenerek istenilen sayıda dönüşüm uygulanabilir.
Yani yüklenen resim, istekte bulunan img öğesinin src öğesi aracılığıyla gerektiği gibi 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ği oluşturulur ve gönderilir. Yeni oluşturulan bu dosya, daha sonra gönderilebilmesi için CDN'de önbelleğe alınır
aynı URL'yi isteyen herhangi bir kullanıcıya
gösterir.
Görüntü CDN sağlayıcılarının yazılım geliştirme kitleri sunması alışılmadık bir durum değildir
gelişmiş kullanımı ve çeşitli teknoloji yığınlarıyla entegrasyonu kolaylaştıran bu tahmin edilebilir URL kalıbı tek başına
yüklenen tek bir dosyayı başka herhangi bir geliştirme aracına gerek kalmadan geçerli bir srcset özelliğine dönüştürün:
<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="…">
Artık bilindik bir söz dizimini kullanarak istediğimiz sıkıştırma düzeyini manuel olarak belirleyebiliyoruz: q_, kısa
"kalite", ve ardından sıkıştırma düzeyinin sayısal kısaltmasıdır:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Ancak bir dizi olağanüstü güçlü özellik sayesinde bu bilgileri manuel olarak eklemeniz nadiren gereken durumlar olabilir. Çoğu resim CDN tarafından sağlanır: tamamen otomatik sıkıştırma, kodlama ve içerik görüşmesi.
Otomatik sıkıştırma
Görüntü CDN'lerinin ellerinde bulunan bilgi işlem gücü, son derece güçlü bir özellik sunmalarına olanak tanır: için ideal sıkıştırma düzeyini ve kodlama ayarlarını algoritmik olarak belirlemek üzere bir resmin içeriğini resimlerimizin her biri için manuel olarak hassas ayar yapma olanağı sunuyoruz.
Bu algoritmalar, dosya boyutu ile algısal kalite arasında denge kurma konusunda vereceğiniz kararları otomatikleştirir. Resim içeriğini analiz ederek ve buna göre sıkıştırma ayarlarının hassaslaştırılması ile ilgili ölçümler yapabilirsiniz. Bu durum, çoğu zaman dosyada büyük azalmalar olduğu anlamına gelir daha yüksek bir boyut elde etti.
Bu süreç kulağa çok karmaşık gelse de uygulama çok daha kolay olamazdı: Cloudinary içinq_auto
resim URL'si bu ö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 görüşmesi
Bir resim isteği alındığında, resim CDN'leri tarayıcının
Tarayıcı tarafından öğe istekleriyle birlikte gönderilen HTTP üst bilgileri (özellikle de
Accept üstbilgisi. Bu başlık, tarayıcının anlayabileceği kodlamaları gösterir. Aynı
type alanını doldurmak için kullanacağımız medya türlerini
<picture> öğesinin <source> özelliğidir.
Örneğin, bir öğe URL'sindeki resim dönüşümleri listesine f_auto parametresinin eklenmesi, Cloudinary'ye açıkça şunu bildirir:
tarayıcının anlayabileceği en verimli kodlamayı sunar:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Daha sonra sunucu, resmin bu kodlamayla bir sürümünü oluşturur ve sonucu aynı
emin olmanız gerekir. Bu yanıt bir Content-Type üst bilgisi içeriyor
kodunu tarayıcıya açıkça bildirir (dosya uzantısından bağımsız olarak). Modern bir tarayıcıya sahip bir kullanıcı, bir bilgisayar korsanı tarafından
.jpg ile biten bir dosya için yapılan isteklere, bu istekle birlikte AVIF'nin desteklendiğini ve sunucuyu AVIF'nin desteklendiğini bildiren bir başlık ekler.
bu dosyayı AVIF olarak ele alacak açık bir talimatla birlikte AVIF kodlamalı bir dosya gönderir.
Sonuç olarak sadece alternatif olarak kodlanmış dosyalar oluşturmaktan ve sıkıştırma ayarlarınızda manuel olarak ince ayar yapmaktan kurtulmanızı sağlayan bir süreç ortaya çıkar.
(ya da bu görevleri sizin için yapan bir sistem kullanmaya devam edebilirsiniz) ancak etkili bir şekilde <picture> ve type özelliğini kullanma ihtiyacını ortadan kaldırır.
ve bu dosyaları kullanıcılara teslim eder. Dolayısıyla, yalnızca srcset ve sizes söz diziminin kullanılması, kullanıcılarınıza örneğin AVIF,
WebP'ye (veya yalnızca Safari için JPEG-2000'e) ve en mantıklı eski kodlamaya başvurur.
Görüntü CDN'si kullanmanın dezavantajları teknikten çok lojistiktir ve en önemli neden maliyettir. Resim CDN'leri genellikle Gelişmiş özelliklere sahip ücretsiz planlar sunar. Resim öğeleri oluşturmak, yüklemeler için bant genişliği ve depolama alanı gerektirir. resmi dönüştürmek için sunucuya ek alan ve önbelleğe alınan dönüştürme sonuçları için ek alan sağlar. Bu nedenle, gelişmiş kullanım ve yüksek trafik alan uygulamalar ücretli bir plan gerektirebilir.