Resim içeriği yayınlama ağları (CDN'ler), web için görselleri optimize etme konusunda mükemmeldir. Web sitenizi bir resim CDN'ye geçirmek, resim dosyası boyutunda % 40-80 tasarruf sağlayabilir ve çoğu durumda resimlerinizi derleme zamanında bir resim optimizasyonu komut dosyasından daha iyi optimize edebilir.
Görüntü CDN nedir?
Resim CDN'ler; görüntüleri dönüştürme, optimize etme ve yayınlama konusunda uzmanlaşmıştır. Bunları, sitenizde kullanılan görüntülere erişmek ve bunları değiştirmek için kullanılan API'ler olarak da düşünebilirsiniz. Resim CDN'den 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 belirtir. Bu, bir resmin farklı kullanım alanları için varyasyonlarını oluşturmanıza olanak tanır.
Resim CDN'leri, ihtiyaç duyuldukça resimlerin yeni sürümlerini oluşturmaları açısından derleme zamanı resim optimizasyonu komut dosyalarından farklıdır. Sonuç olarak CDN'ler genellikle bireysel istemciler için yoğun şekilde özelleştirilmiş görüntüler oluşturmaya, derleme komut dosyalarına kıyasla daha uygundur.
Resim CDN'leri, optimizasyon seçeneklerini belirtmek için URL'leri nasıl kullanır?
Resim CDN'leri tarafından kullanılan resim URL'leri, resimlerle ilgili önemli bilgileri ve resme uygulanması gereken dönüşümleri ve optimizasyonları aktarır. URL biçimleri, kullandığınız resim CDN'sine bağlı olarak değişir ancak genel olarak tüm benzer özelliklere sahiptir. En yaygın özelliklerden bazıları aşağıda verilmiştir.
Köken
Görüntü CDN, kendi alanınızda veya görüntü CDN'nizin alanında çalışabilir. Üçüncü taraf görüntü CDN'leri genellikle ücret karşılığında özel bir alan kullanma seçeneği sunar. URL değişikliği gerekmeyeceğinden, kendi alanınızı kullanmanız daha sonra görüntü CDN'leri arasında geçiş yapmayı kolaylaştırır.
Önceki örnekte, resim CDN'sinin alan adı ("example-cdn.com") özel bir alan yerine kişiselleştirilmiş bir alt alanla kullanılmaktadır.
Resim
Görüntü CDN'leri genellikle gerektiğinde mevcut konumlarından otomatik olarak görüntü alacak şekilde yapılandırılabilir. Bu özellik genellikle resim CDN tarafından oluşturulan resmin URL'sine mevcut resmin tam URL'sinin eklenmesiyle sağlanır. Örneğin, şuna benzer bir URL görebilirsiniz: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto
Bu URL, https://flowers.com/daisy.jpg adresindeki resmi alır ve optimize eder.
İstenen dosya biçimi (örnekteki JPG), döndürülen resim dosyası biçimiyle (örnekteki WebP) aynı olmayabilir. content-type HTTP üst bilgisi, tarayıcıya URL'yi uygun şekilde işleyebilmesi için URL'nin hangi biçimde olduğunu bildirir. Bu durum, dosya diske kaydedilir ve biçimin dosya uzantısıyla eşleşmesini bekleyen başka bir program tarafından
kullanılırsa karışıklığa neden olabilir.
Resim CDN'sine resim yüklemenin yaygın olarak desteklenen bir başka yolu da, bunları resim CDN'sinin API'sine bir HTTP POST isteği içinde göndermektir.
Güvenlik anahtarı
Güvenlik anahtarı, başka kişilerin resimlerinizin yeni sürümlerini oluşturmasını önler. Bu özellik etkinleştirildiğinde, bir görüntünün her yeni sürümü benzersiz bir güvenlik anahtarı gerektirir.
Birisi 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. Görüntü CDN'niz, güvenlik anahtarlarını oluşturma ve izleme ayrıntılarını sizin için halleder.
Dönüşümler
Görüntü CDN'leri onlarca ve bazı durumlarda yüzlerce farklı görüntü dönüşümü sunar. Bu dönüşümler URL dizesinde belirtilir ve aynı anda birden fazla dönüşüm kullanmayla ilgili 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, bir resim CDN'sine geçiş yapmanın genellikle sitenizin resim dosyalarını küçültmesinin nedenidir.
Performans dönüşümleri için genellikle nesnel olarak en iyi bir ayar bulunduğundan bazı resim CDN'leri bu dönüşümler için "otomatik" modunu destekler. Örneğin, görüntülerin WebP biçimine dönüştürüleceğini belirtmek yerine, CDN'nin en uygun biçimi otomatik olarak seçip sunmasına izin verebilirsiniz. Görüntü CDN'si, diğer sinyallerin yanı sıra aşağıdaki sinyalleri kullanarak görüntüyü dönüştürmenin en iyi yolunu belirleyebilir:
- İstemci ipuçları (örneğin, görüntü alanı genişliği, DPR ve resim genişliği)
Save-Dataüst bilgisi- User-Agent istek başlığı
- Network Information API
Örneğin, resim CDN'si bir Chrome tarayıcıya AVIF, bir Edge tarayıcısına WebP ve çok eski bir tarayıcıya JPEG sunabilir. Otomatik ayarlar, resim CDN'si desteklemeye başladığında yeni teknolojileri kullanmaya başlamak için kodunuzu değiştirmenize gerek kalmadan resim CDN'lerinin resim optimizasyonu uzmanlığından yararlanmanıza olanak tanıdığından popülerdir.
Resim CDN türleri
Görüntü CDN'lerinin iki ana kategorisi vardır: kendi kendine yönetilen ve üçüncü taraf tarafından yönetilen.
Otomatik yönetilen resim CDN'leri
Otomatik yönetilen CDN'ler, kendi altyapılarını yönetme konusunda rahat olan mühendislik personeline sahip siteler için iyi bir seçim olabilir.
- Thumbor, kendi kendine yönetilen en popüler resim CDN'sidir. Açık kaynaktır ve kullanımı ücretsizdir, ancak çoğu ticari CDN'den daha az özelliğe sahiptir ve belgeleri biraz sınırlıdır. Wikipedia, Square ve 99designs mizah içeren sitelerdir. Ayarlamayla ilgili talimatlar için Küçük resim CDN'sini yükleme bölümünü inceleyin.
- Hayali
- Görsel tasarım aracı
Üçüncü taraf resim CDN'leri
Üçüncü taraf resim CDN'leri, hizmet olarak resim CDN'leri sağlar. Bulut sağlayıcılarının, ücret karşılığında sunucuları ve diğer altyapıları sağlaması gibi görüntü CDN'leri de ücret karşılığında görüntü optimizasyonu ve yayını sunar. Üçüncü taraf görüntü CDN'leri temel teknolojiyi sağlar. Bu nedenle, büyük bir site için tam taşıma daha uzun sürse de, genellikle bu teknolojiyi oldukça hızlı bir şekilde kullanmaya başlayabilirsiniz. Üçüncü taraf görüntü CDN'leri genellikle kullanım katmanlarına göre fiyatlandırılır. Çoğu görüntü CDN'si, ürünlerini denemeniz için ücretsiz katman veya ücretsiz deneme sağlar.
Görüntü CDN seçin
Görüntü CDN'leri için birçok iyi seçenek vardır. Bazıları diğerlerinden daha fazla özelliğe sahiptir, ancak herhangi bir özellik, resimlerinizde baytlardan tasarruf etmenize ve böylece sayfalarınızı daha hızlı yüklemenize yardımcı olabilir. Görüntü CDN'si seçerken özellik gruplarının yanı sıra dikkate alınması gereken diğer faktörler de maliyet, destek, belgeler ve kurulum veya taşıma kolaylığıdır.
Largest Contentful Paint (LCP) üzerindeki etkiler
Resimler, birçok web sitesinde kullanıcı deneyiminin hayati bir parçasıdır. Bu nedenle, sitelerin Largest Contentful Paint metriğinde önemli bir rol oynarlar. Bir görüntü CDN'si kullanmaya karar verirseniz göz önünde bulundurmanız gereken birkaç nokta aşağıda belirtilmiştir:
- CDN'lerden sunulan görüntüler, kaynaklar arası bir sunucudan gelebilir ve bu da sitenizin bağlantı kurulum süresini uzatabilir. Mümkün olduğunda, birincil kaynak üzerinden proxy yapan bir görüntü CDN'si kullanmayı deneyin. Böylece, tarayıcının bağlanacağı ekstra kaynaklar eklemezsiniz. Birincil kaynakta kendi kendini barındıran görüntülerle aynı etkiye sahiptir.
- Tarayıcının bu resmi en kısa sürede yüklemeye başlayabilmesi için LCP resim öğesinde
fetchpriorityözellik değerini"high"kullanmayı düşünün. - Bir görüntü ilk HTML'de hemen bulunamazsa tarayıcının bu resmi önceden yükleyebilmesi için LCP aday resminiz için bir
rel=preloadipucu kullanabilirsiniz. - Kaynağınız üzerinden proxy uygulayamıyorsanız ve tarayıcı, sayfa yükleme işleminin sonraki aşamalarına kadar hangi resmin yükleneceğini bilemezse olası LCP aday resimleri için kaynak yükleme aşamasını kısaltmak için kaynaklar arası resim CDN'si ile mümkün olan en kısa sürede bağlantı kurun.