Neden görüntü CDN'yi kullanmalısınız?
Resim içeriği yayınlama ağları (CDN'ler) resimleri optimize etme konusunda mükemmeldir. Resim CDN'ye geçmek resim dosyası boyutunda % 40-80 tasarruf sağlayabilir. Teoride, yalnızca derleme komut dosyalarını kullanarak aynı sonuçları elde etmek mümkündür, ancak pratikte nadir görülen bir durumdur.
Görüntü CDN nedir?
Resim CDN'ler; resimlerin dönüştürülmesi, optimizasyonu ve yayınlanması konusunda uzmandı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 belirtir. Bu, bir resmin farklı kullanım alanları için varyasyonlarını oluşturmayı kolaylaştırı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 her bir istemci için ayrı ayrı özelleştirilen 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, resim CDN'sine bağlı olarak değişir ancak genel olarak tüm benzer özelliklere sahiptir. En yaygın özelliklerden bazılarına göz atalım.
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 sonraki bir tarihte görüntü CDN'leri arasında geçiş yapmayı kolaylaştırır.
Yukarıdaki örnekte, resim CDN'sinin alan adı ("example-cdn.com") özel bir alan yerine kişiselleştirilmiş bir alt alan adıyla 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. Genellikle bu özellik, 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.
Resim CDN'sine resim yüklemenin yaygın olarak desteklenen bir başka yolu, resimleri bir HTTP POST isteği aracılığıyla resim CDN'sinin API'sine göndermektir.
Güvenlik anahtarı
Güvenlik anahtarı, başka kişilerin resimlerinizin yeni sürümlerini oluşturmasını önler. Bu özellik etkinleştirilmişse görüntülerin 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 izlemeyle ilgili ayrıntıları 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 dizesi aracılığıyla belirtilir ve aynı anda birden fazla dönüşüm kullanmayla ilgili herhangi bir kısıtlama yoktur. Web performansı bağlamında 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 resim boyutunda önemli ölçüde küçülmesinin nedenidir.
Performans dönüşümleri için nesnel olarak en iyi ayar genellikle budur. Bu nedenle, bazı resim CDN'leri bu dönüşümler için "otomatik" modu 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çmesine ve sunmasına izin verebilirsiniz. Görüntü CDN'nin bir görüntüyü dönüştürmenin en iyi yolunu belirlemek için kullanabileceği sinyaller şunlardır:
- İstemci ipuçları (örneğin, görüntü alanı genişliği, DPR ve resim genişliği)
Save-Databaşlığı- 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'lerinin yeni teknolojileri kullanmaya başlamak için resim CDN tarafından desteklenen yeni teknolojileri kullanmaya gerek kalmadan, resimleri optimize etme konusundaki önemli uzmanlığından yararlanmanıza olanak sağladığından popülerdir.
Resim CDN türleri
Görsel CDN'ler iki kategoriye ayrılabilir: 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 kaynaklı ve kullanımı ücretsiz olsa da genellikle ticari CDN'lerden daha az özelliğe sahiptir ve belgeleri biraz daha sınırlıdır. Wikipedia, Square ve 99designs Thumbor'ı kullanan üç sitedir. Ayarlamayla ilgili talimatlar için Küçük resim CDN'sini yükleme başlıklı makaleyi 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 sunucuları ve diğer altyapıları ücret karşılığında sunması gibi, görüntü CDN'leri de bir ücret karşılığında görüntü optimizasyonu ve yayını sağlar. Üçüncü taraf görüntü CDN'leri altta yatan teknolojiyi kullandığı için, işe koyulmak oldukça basittir ve genellikle 10-15 dakikada tamamlansa da büyük bir sitenin taşınması çok daha uzun sürebilir. Üçü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, size ürünlerini deneme fırsatı sunmak için ücretsiz katman veya ücretsiz deneme sağlar.
Görüntü CDN seçme
Görüntü CDN'leri için birçok iyi seçenek vardır. Bazıları diğerlerinden daha fazla özelliğe sahip olacaktır, ancak tüm bu özelliklerin tamamı, büyük olasılıkla resimlerinizde baytlardan tasarruf etmenize ve dolayısıyla sayfalarınızı daha hızlı yüklemenize yardımcı olacaktır. 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.
Karar vermeden önce bunları kendiniz denemeniz de yararlı olabilir. Aşağıda, çeşitli görüntü CDN'lerini kullanmaya hızlı bir şekilde başlamayla ilgili talimatların yer aldığı codelab'leri bulabilirsiniz.
Largest Contentful Paint (LCP) üzerindeki etkiler
Resimler, birçok web sitesinde kullanıcı deneyiminin çok önemli bir parçasıdır ve bu nedenle, Largest Contentful Paint konusunda sitelerin ne kadar başarılı olduğunu etkiler. 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 bağlantı kurulumu için ek süre gerektirir. Mümkün olduğunda birincil kaynak üzerinden proxy yapan bir resim CDN'si kullanmayı deneyin. Böylece, tarayıcının bağlanacağı ekstra kaynaklar eklemezsiniz. Bu durum, 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örsel 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 kullanmak mümkün değilse ve yüklenecek tam resim, sayfa yükleme işleminin sonraki aşamalarına kadar bilinmiyorsa sayfanızın LCP aday resmi olabilecek kaynak yükleme aşamasını kısaltmak için kaynaklar arası resim CDN'si ile en kısa sürede bağlantı kurmanız gerekir.
Resim CDN'ler, resimleri manuel olarak optimize etme zahmetini ortadan kaldıran vazgeçilmez araçlardır ve dikkate alınmalıdır. Ancak her zaman olduğu gibi, göz önünde bulundurulması gereken dezavantajlar vardır ve web sitenizin LCP aday resimlerini takip etmek ve uygun şekilde ipuçları eklemek bu önemli isteklere yönelik ek gecikmeleri azaltabilir.