Resimleri optimize etmek için resim CDN'lerini kullanma

Resim içeriği yayınlama ağları (CDN'ler), bu ağlar için resimleri optimize etmede yardımcı olur. Web sitenizi bir resim CDN'ye geçirmek, Resimde % 40-80 tasarruf ve çoğu durumda resimlerinizi bir masaüstünden çok daha iyi derleme zamanı görüntü optimizasyonu komut dosyası.

Resim CDN'leri, resimleri dönüştürme, optimize etme ve yayınlama konusunda uzmandır. Siz bunları, kullanılan resimlere erişmek ve bunları değiştirmek için API'ler olarak da düşünebilirsiniz hakkında bilgi edindiniz. Bir resim CDN'sinden yüklenen resimler için resim URL'si ve boyut, biçim ve kalite gibi parametreleri de kapsar. Bu, bir resmin farklı kullanım alanları için varyasyonlarını oluşturmanıza olanak tanır.

Resim CDN'si ve istemci arasındaki istek/yanıt akışını gösterir. Boyut ve biçim gibi parametreler, aynı resmin varyasyonlarını istemek için kullanılır.
Resim URL'lerindeki parametrelere göre resim CDN'lerinin gerçekleştirebileceği dönüşüm örnekleri.

Resim CDN'leri, oluşturma sırasında görsel optimizasyonu komut dosyalarından gereken şekilde resimlerin yeni sürümlerini oluşturun. Bunun sonucunda, CDN'ler genellikle büyük ölçüde her bir kullanıcının kitlesine yönelik daha fazla satış olanağı sunar.

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, bir resim hakkında önemli bilgileri iletir ve dönüşüm ve optimizasyonların nasıl yapıldığını göreceğiz. URL biçimleri kullandığınız resim CDN'sine bağlı olarak değişiklik gösterir ancak yüksek düzeyde benzer özellikler. En yaygın özelliklerden bazıları aşağıda verilmiştir.

Görsel URL'leri genellikle şu bileşenlerden oluşur: kaynak, resim, güvenlik anahtarı ve dönüşümler.
Bir resim CDN'sindeki resim URL'sinin temel bölümleri.

Köken

Bir resim CDN'si kendi alanınızda veya resim CDN'nizin alanında olabilir. Üçüncü taraf resim CDN'leri genellikle ücret. Kendi alanınızı kullanmanız, daha sonra resim CDN'leri arasında geçiş yapmayı kolaylaştırır çünkü URL değişikliği gerekmez.

Yukarıdaki örnekte, resim CDN'sinin alan adı ("example-cdn.com") ve kişiselleştirilmiş bir alt alan adı kullanmanız önerilir.

Resim

Resim CDN'leri genellikle mevcut konumlarınızı belirleyebilirsiniz. Bu yetenek genellikle resmin URL'sine mevcut resmin tam URL'si eklenmelidir tarafından oluşturulur. Örneğin, Bu öğe: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Bu URL, https://flowers.com/daisy.jpg adresindeki resmi alıp optimize eder.

İstenen dosya biçimi (örnekte JPG) resim dosyası biçimi döndürüldü (örnekte WebP). content-type HTTP başlık, URL'yi işleyebilmesi için tarayıcıya URL'nin hangi biçimde olduğunu bildirir sağlayabilir. Bu durum, dosya diske kaydedilir ve biçimin dosya uzantısıyla eşleşmesini bekleyen başka bir program olabilir.

Resimleri resim CDN'sine yüklemenin yaygın olarak desteklenen bir başka yolu da içinde görüntü CDN'sinin API'sine gönderilen bir HTTP POST isteğinde bulunur.

Güvenlik anahtarı

Güvenlik anahtarı, diğer kullanıcıların resimlerinizin yeni sürümlerini oluşturmasını önler. Bu özellik etkinleştirildiğinde, bir resmin her yeni sürümü benzersiz bir Güvenlik anahtarı.

Birisi resim URL'sinin parametrelerini değiştirmeye çalışır ancak geçerli bir güvenlik anahtarı sağlamadığı takdirde yeni bir güvenlik anahtarı sürümünü değil. Resim CDN'niz, oluşturma ve izleme ayrıntılarını yapar güvenlik anahtarları.

Dönüşümler

Resim CDN'leri onlarca, bazı durumlarda yüzlerce farklı görsel sunar. dönüşümlerine dahil edilir. Bu dönüşümler URL dizesinde belirtilir ve aynı anda birden fazla dönüşümün kullanımıyla ilgili herhangi bir kısıtlama yoktur. Web performansı için en önemli resim dönüşümleri boyut, piksel yoğunluk, biçim ve sıkıştırmayı içerir. Bu dönüşümler, ekibinizin Resim CDN'ye geçmek genellikle sitenizin resim dosyalarını küçültür.

Çünkü genellikle performans için nesnel olarak en iyi ayar vardır. dönüştürmelerde, bazı resim CDN'leri "otomatik" bunlar için mod dönüşümlerine dahil edilir. Örneğin, görüntülerin dönüştürüleceğini belirtmek yerine webP biçiminde, CDN'nin otomatik olarak ilgili dosyayı seçmesine ve yayınlamasına izin verebilirsiniz: en uygun biçimdir. Görüntü CDN'si, bir görüntüyü dönüştürmenin en iyi yolunu belirleyebilir aşağıdaki sinyalleri kullanır:

Örneğin, resim CDN'si bir Chrome tarayıcıya AVIF, Edge'e WebP'yi sunabilir ve JPEG dosyasını çok eski bir tarayıcıya yükleyebilirsiniz. Otomatik ayarlar popülerdir çünkü Resim CDN'lerinden yararlanmanıza olanak tanır. olmadan resimleri optimize etme görüntü CDN'si başladığında yeni teknolojileri benimsemek için kodunuzu değiştirmeniz gerekmesi destek olmanız beklenebilir.

Resim CDN türleri

Resim CDN'lerinin iki ana kategorisi vardır: kendi kendine yönetilen ve üçüncü tarafça yönetiliyor.

Otomatik yönetilen resim CDN'leri

Kendi kendine yönetilen CDN'ler, bu alanda uzmanlaşmış mühendislik personeli olan siteler için iyi bir seçim olabilir rahatlıkla koruyabilir.

  • Thumbor, kendi kendine yönetilen en popüler platformdur resim CDN'si. Açık kaynaktır ve kullanımı ücretsizdir, ancak ve bunların belgeleri biraz sınırlıdır. Küçük resim kullanan siteler arasında şunlar bulunur: Wikipedia, Kare, ve 99 tasarım. Thumbor resim CDN'sini yükleme başlıklı makaleye göz atın. kurulum talimatlarını uygulayın.
  • Hayali
  • Hayalet

Üçüncü taraf resim CDN'leri

Üçüncü taraf resim CDN'leri, hizmet olarak görüntü CDN'leri sağlar. Tıpkı Bulut sağlayıcıları, hizmetleri ve diğer altyapıları ücretli olarak sunar. Görüntü CDN'leri ve ücret karşılığında resim optimizasyonu ve gönderim olanağı sunar. Çünkü üçüncü taraf resim CDN'ler temel teknolojiyi sağlar. Genellikle bir CDN kullanarak başlayabilirsiniz. oldukça hızlıdır ancak büyük bir site için tam bir taşıma daha uzun. Üçüncü taraf görüntü CDN'leri genellikle kullanım katmanlarına göre fiyatlandırılır ve Denemenize olanak tanımak için ücretsiz katman veya ücretsiz deneme sağlayan çoğu görüntü CDN'si nasıl sağlayabileceğini de öğreneceksiniz.

Resim CDN'si seçin

Resim CDN'leri için birçok iyi seçenek vardır. Bazıları diğerlerinden daha fazla özelliğe sahip, ama içlerinden herhangi biri, resimlerinizde bayt tasarrufu yapmanıza ve bu nedenle resimlerinizi daha hızlı çalışır. Özellik grupları dışında, anahtar kelime seçiminde Bunlar maliyet, destek, belgeleme ve kurulum veya taşıma kolaylığıdır.

Largest Contentful Paint (LCP) üzerindeki etkiler

Resimler, birçok web sitesinde kullanıcı deneyiminin kritik bir parçası olduğundan sitenin Largest Contentful Paint önemli faktörü vardır. İşte resim CDN'si kullanmaya karar verirseniz aklınızda bulundurmanız gereken birkaç nokta:

  • CDN'lerden yayınlanan görüntüler, kaynaklar arası bir sunucudan gelebilir. sitenizin bağlantı kurulum süresini uzatabilirsiniz. Mümkün olduğunda bir resim kullanmayı deneyin Ek kaynak eklememeniz için birincil kaynak üzerinden proxy yapan CDN'ler için de geçerli olur. Bu, kendini barındıran resimlerle aynı etkiye sahiptir. birincil kökene göre belirlenir.
  • "high" olan fetchpriority özellik değerini kullanabilirsiniz. LCP resim öğesinde; tarayıcının söz konusu resmi hemen yüklemeye başlayabilmesi için yardımcı olabilirsiniz.
  • Bir resim, ilk HTML'de hemen bulunabilir değilse şunu kullanmayı düşünün: rel=preload LCP adayı resminiz için bir ipucudur. Böylece tarayıcı bu resmi önceden yükleyebilir. gerekir.
  • Kaynağınız üzerinden proxy kullanamıyorsanız ve tarayıcı hangi resmin sonraki bir zamana kadar yüklenmesini bekleyebilir. Kaynaklar arası görüntü CDN'siyle mümkün olduğunca erken bağlantı oluşturun kullanarak potansiyel LCP adayı resimleri için kaynak yükleme aşamasını kısaltmak önemlidir.