Görsel içerik yayınlama ağları (CDN'ler), görselleri web için optimize etme konusunda mükemmeldir. Web sitenizi bir resim CDN'sine geçirmek, resim dosyası boyutunda %40-80 tasarruf sağlayabilir ve çoğu durumda resimlerinizi derleme zamanı resim optimizasyonu komut dosyasından daha iyi optimize edebilir.
Görsel CDN'si nedir?
Resim CDN'leri; resimleri dönüştürme, optimize etme ve yayınlama konusunda uzmanlaşmıştır. Bunları, sitenizde kullanılan resimlere erişmek ve bunları değiştirmek için kullanılan API'ler olarak da düşünebilirsiniz. Resim CDN'sinden yüklenen resimler için resim URL'si yalnızca hangi resmin yükleneceğini değil, aynı zamanda boyut, biçim ve kalite gibi parametreleri de gösterir. Bu sayede, farklı kullanım alanları için bir resmin varyasyonlarını oluşturabilirsiniz.
Resim CDN'leri, derleme zamanı resim optimizasyonu komut dosyalarından farklı olarak, gerektiğinde resimlerin yeni sürümlerini oluşturur. Bu nedenle CDN'ler, tek tek istemciler için yoğun şekilde özelleştirilmiş görüntüler oluşturmak için genellikle derleme komut dosyalarından daha uygundur.
Resim CDN'leri, optimizasyon seçeneklerini belirtmek için URL'leri nasıl kullanır?
Görsel CDN'leri tarafından kullanılan görsel URL'leri, bir görsel ve bu görsele uygulanması gereken dönüşümler ve optimizasyonlar hakkında önemli bilgiler verir. URL biçimleri, kullandığınız resim CDN'sine göre değişir ancak genel olarak hepsi benzer özelliklere sahiptir. En yaygın özelliklerden bazıları şunlardır:
Köken
Resim CDN'si kendi alanınızda veya resim CDN'nizin alanında bulunabilir. Üçüncü taraf resim CDN'leri genellikle ücret karşılığında özel alan kullanma seçeneği sunar. Kendi alanınızı kullanmak, daha sonra resim CDN'lerini değiştirmeyi kolaylaştırır çünkü URL değişikliği gerekmez.
Önceki örnekte, özel alan adı yerine kişiselleştirilmiş bir alt alan adı ile resim CDN'sinin alanı ("example-cdn.com") kullanılmaktadır.
Resim
Resim CDN'leri genellikle, gerektiğinde resimleri mevcut konumlarından otomatik olarak alacak şekilde yapılandırılabilir. Bu özellik genellikle, mevcut resmin tam URL'sinin, resim CDN'si tarafından oluşturulan resmin URL'sine eklenmesiyle elde edilir. Örneğin, https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto gibi bir URL görebilirsiniz.
Bu URL, https://flowers.com/daisy.jpg adresindeki resmi alır ve optimize eder.
İstenen dosya biçimi (örnekte JPG), döndürülen resim dosyası biçimiyle (örnekte WebP) aynı olmayabilir. content-type HTTP üstbilgisi, tarayıcıya URL'nin hangi biçimde olduğunu bildirir. Böylece tarayıcı, URL'yi uygun şekilde işleyebilir. Dosya diske kaydedilirse ve biçimin dosya uzantısıyla eşleşmesini bekleyen başka bir program tarafından kullanılırsa bu durum kafa karışıklığına neden olabilir.
Resimleri bir resim CDN'sine yüklemenin yaygın olarak desteklenen bir başka yolu da resimleri HTTP POST isteğiyle resim CDN'sinin API'sine göndermektir.
Güvenlik anahtarı
Güvenlik anahtarı, diğer kullanıcıların resimlerinizin yeni sürümlerini oluşturmasını engeller. Bu özellik etkinleştirildiğinde bir görüntünün her yeni sürümü için benzersiz bir güvenlik anahtarı gerekir.
Bir kullanıcı, resim URL'sinin parametrelerini değiştirmeye çalışır ancak geçerli bir güvenlik anahtarı sağlamazsa yeni bir sürüm oluşturamaz. Resim CDN'niz, güvenlik anahtarlarını oluşturma ve izleme ayrıntılarını sizin için halleder.
Dönüşümler
Resim CDN'leri onlarca, hatta bazen yüzlerce farklı resim dönüşümü sunar. Bu dönüşümler URL dizesinde belirtilir ve aynı anda birden fazla dönüşüm kullanma konusunda herhangi bir kısıtlama yoktur. Web performansı için en önemli resim dönüşümleri boyut, piksel yoğunluğu, biçim ve sıkıştırmadır. Bu dönüşümler, resim CDN'sine geçişin genellikle sitenizin resim dosyalarını küçültmesinin nedenidir.
Performans dönüşümleri için genellikle nesnel olarak en iyi ayar bulunduğundan, bazı resim CDN'leri bu dönüşümler için "otomatik" modu destekler. Örneğin, resimlerin WebP biçimine dönüştürülmesini belirtmek yerine CDN'nin en uygun biçimi otomatik olarak seçip sunmasına izin verebilirsiniz. Resim CDN'si, diğerlerinin yanı sıra aşağıdaki sinyalleri kullanarak bir resmi dönüştürmenin en iyi yolunu belirleyebilir:
- İstemci ipuçları (ör. görüntü alanı genişliği, DPR ve resim genişliği)
Save-Dataüstbilgisi- Kullanıcı Aracısı istek başlığı
- Network Information API
Örneğin, resim CDN'si Chrome tarayıcıya AVIF, Edge tarayıcıya WebP ve çok eski bir tarayıcıya JPEG sunabilir. Otomatik ayarlar, resim CDN'lerinin resimleri optimize etme konusundaki uzmanlığından yararlanmanıza olanak tanıdığı için popülerdir. Resim CDN'si yeni teknolojileri desteklemeye başladığında kodunuzu değiştirmeniz gerekmez.
Resim CDN'lerinin türleri
İki ana resim CDN'si kategorisi vardır: kendi kendine yönetilen ve üçüncü taraf tarafından yönetilen.
Kendi kendine yönetimli resim CDN'leri
Kendi kendini yöneten CDN'ler, kendi altyapılarını koruma konusunda rahat olan mühendislik personeline sahip siteler için iyi bir seçim olabilir.
- Thumbor, en popüler kendi kendine yönetilen resim CDN'sidir. Açık kaynaklı ve ücretsizdir ancak çoğu ticari CDN'den daha az özelliğe sahiptir ve dokümanları biraz sınırlıdır. Thumbor kullanan siteler arasında Wikipedia, Square ve 99designs yer alır. Kurulum talimatları için Thumbor resim CDN'sini yükleme başlıklı makaleyi inceleyin.
- Hayali
- Imagor
Üçüncü taraf resim CDN'leri
Üçüncü taraf resim CDN'leri, resim CDN'lerini hizmet olarak sunar. Bulut sağlayıcıların sunucuları ve diğer altyapıları ücret karşılığında sağlaması gibi, görsel CDN'leri de görsel optimizasyonu ve yayınını ücret karşılığında sağlar. Üçüncü taraf resim CDN'leri temel teknolojiyi koruduğundan, genellikle birini oldukça hızlı bir şekilde kullanmaya başlayabilirsiniz. Ancak büyük bir sitenin tamamen taşınması daha uzun sürebilir. Üçüncü taraf resim CDN'leri genellikle kullanım katmanlarına göre fiyatlandırılır. Çoğu resim CDN'si, ürünlerini denemeniz için Ücretsiz Katman veya ücretsiz deneme sürümü sunar.
Resim CDN'si seçme
Resim CDN'leri için birçok iyi seçenek vardır. Bazıları diğerlerinden daha fazla özelliğe sahiptir ancak hepsi resimlerinizin boyutunu küçültmenize ve dolayısıyla sayfalarınızı daha hızlı yüklemenize yardımcı olabilir. Özellik gruplarının yanı sıra, resim CDN'si seçerken göz önünde bulundurulması gereken diğer faktörler maliyet, destek, dokümanlar ve kurulum veya taşıma kolaylığıdır.
Largest Contentful Paint (LCP) üzerindeki etkiler
Görseller, birçok web sitesindeki kullanıcı deneyiminin hayati bir parçasıdır. Bu nedenle, sitenin Largest Contentful Paint değerinde önemli bir faktördür. Resim CDN'si kullanmaya karar verirseniz dikkat etmeniz gereken birkaç nokta vardır:
- CDN'lerden sunulan resimler, sitenizin bağlantı kurulum süresini artırabilecek bir çapraz kaynak sunucudan gelebilir. Mümkün olduğunda, birincil kaynak üzerinden proxy oluşturan bir resim CDN'si kullanmaya çalışın. Böylece, tarayıcının bağlanması için ek kaynaklar eklemezsiniz. Bu, resimleri birincil kaynakta barındırmakla aynı etkiye sahiptir.
- Tarayıcının bu resmi mümkün olan en kısa sürede yüklemeye başlayabilmesi için LCP resim öğesinde
fetchpriorityözellik değerini"high"olarak kullanabilirsiniz. - Bir resim ilk HTML'de hemen bulunamıyorsa tarayıcının bu resmi önceden yükleyebilmesi için LCP adayı resminizde
rel=preloadipucu kullanabilirsiniz. - Kaynağınız üzerinden proxy oluşturamıyorsanız ve tarayıcı, sayfa yükleme işleminin ilerleyen aşamalarına kadar hangi resmin yükleneceğini bilmiyorsa potansiyel LCP adayı resimlerin kaynak yükleme aşamasını kısaltmak için mümkün olan en kısa sürede çapraz kaynak resim CDN'sine bağlantı oluşturun.