CDN görüntüsü nedir ve neden görüntü optimizasyonu için kullanılır?
Image CDN (İçerik Dağıtım Ağı), görüntü optimizasyonu için mevcut en iyi araçlardan biridir.Madden ve ağır bir görüntü, kötü bir kullanıcı deneyimi üretmek için web sitenizin yavaş olmasının ana nedenlerinden biridir.Olası performans sorunlarından kaçınmak için neden Image CDN’yi uygulamaya çalışmıyorsunuz?Web.dev’e göre, bu görüntü dosyası boyutlarında% 40-80 tasarruf sağlayabilir!
CDN Image – Kaynak: Web.dev tarafından gerçekleştirilen görüntü dönüşümü örnekleri Bu yazıda, CDN görüntüleri ile geleneksel olanlar arasındaki temel farkları açıklığa kavuşturuyoruz.Ayrıca CDN’nin görüntü optimizasyonuna nasıl yardımcı olabileceğini de açıklıyoruz.Bir bonus olarak, Imagify kullanarak web için görüntüleri hazırlamak ve optimize etmek için ek yollar paylaşıyoruz.Resimler için CDN nedir? Görüntüler için CDN, tüm dünyaya görüntüleme, dönüştürme ve gönderme konusunda uzmanlaşmıştır. Onları sunucudan daha hızlı dağıtmak için görüntüleri ziyaretçi ekranınıza dağıtan yangın ağları gibidir. Görüntü CDN görüntü ücretlerini azaltır ve hemen optimize edilmiş görüntüleri varoluş noktasından (POPS) kullanıcılara gönderir. Geleneksel CDN ve Image CDN arasındaki fark nedir? Geleneksel CDN’den CDN görüntüsü arasındaki temel fark, görüntüleri olduğu gibi göndermek yerine hızlı bir şekilde optimize etme ve değiştirme kapasitesidir. Geleneksel CDN, CSS, JS ve görüntüler gibi tüm varlıkları depolarken, CDN görüntüleri görüntülere adanmış bir dizi varsayılan özelliğe sahiptir: kesme, boyut değiştirme, hizalama, dönme, dönme, diğer formatlara dönme, filtreler, su izleri, vb. . Ayrıca, bir cep telefonu veya masaüstünde doğru görüntü boyutunu sunmak için kullanıcı cihazını algılar.
Kullanıcı isteklerini işlerken optimize eden görüntülere odaklanan CDN. Görüntü CDN, URL sorgu dizesini (parametre olarak da adlandırılır) kullanarak görüntü, filtre ve su işaretinin boyutlarını otomatik olarak ayarlar. Örneğin, bu CDN görüntüsünün URL görüntülenmesidir:
Biçim (örneğin, JPG, PNG, WebP)
Boyut ve Kalite (boy ve ağırlık, artış, kesme, düzleştir, döndür)
Duyarlılık: Varyantlar (filigran, akıllı mahsul vb.) Yapmak için kullanıcı ekranına (iPhone veya Sıradan Dizüstü bilgisayar) sezgisel görüntü API’sına göre optimize edilmiş bir boyut sunar.
CDN görüntüleri tarafından yapay zeka kullanılarak yapılan “akıllı” katliam örnekleri
CDN Nasıl Çalışır: 4 Ana Adım – Kaynak: Hayali Yükle – Hücresel, masaüstü ve tablet için aynı görüntünün birkaç sürümünü kaydetmek yerine görüntünün bir sürümü. Bulutta depolanan görüntüleri kaydedin ve kullanıcının isteği girdiğinde, CDN görüntüsü otomatik olarak doğru cihaz için bir görüntü oluşturur. Aynı resim aynı tür cihazdan tekrar talep edildiğinde, CDN tarafından önbellek olmuştur. Bu çok zaman kazandırır ve görüntü bu sefer daha hızlı görüntülenir.
Dönüştürme – Görüntü URL’si kullanarak CDN görüntüsü, görüntüleri çalışma ve filtre ile optimize etmek için yeni bir parametre uygular. Örneğin, bu, CloudImage ile uygulayabileceğiniz bir kural ve ayar türüdür:
CloudImage Kullanarak Dönüşüm Önlemleri Örneği – Kaynak: CloudImage Gösterge Tablosu
Gönder – Optimize edilmiş yeni görüntüler son kullanıcıya en yakın sunucu aracılığıyla (katılım noktası olarak da adlandırılır) gönderilir. Sonuç, CDN görüntüsünüzün tüm kütüphanesini kullanıcılara daha hızlı göndermek için değiştirebilir, optimize edebilir ve saklayabilir. Dünya. Tüm optimizasyon ve dönüşümün web sitenizin hızı ve SEO’su için de yararlı olduğunu biliyor muydunuz? Bizi bir sonraki bölüme götürüyor: Görüntüyü optimize etmek için neden bir görüntü CDN kullanmalısınız? Görüntü optimizasyonu açısından neden optimize etmek için neden bir görüntü CDN kullanın, görüntü CDN’nin önemli avantajları vardır: 1. Artan yükleme süresi CDN görüntüsü ile sıkıştırma ve görüntü boyutunu değiştirme dosya boyutunu azaltarak daha hızlı yükleme siteleri üretir. Image CDN, görüntüleri sıkıştırmanıza, değiştirmenize ve gerçek zamanlı olarak optimize etmenize olanak tanır: Ana ayarları ayarlar ve içerik ve cihazlara göre mevcut en küçük dosyaları kalitelerini azaltmadan alırsınız.
Örneğin, CloudImage için mevcut görüntünün boyutunu değiştirmek için bir işlem:
Görüntünün boyutunu değiştirmek için kullanılabilir işlemler – Kaynak: CloudImage Ayrıca, CDN görüntüsü yükleme süresini artırır, çünkü JPEG veya PNG’den WebP veya AVIF gibi yeni nesil formata dönüştürebilirler. Google tarafından yapılan bir araştırmaya göre, en son iki format görüntü dosyasının boyutunu büyük ölçüde azaltır ve sitenizi hızlandırır. Aşağıdaki tablo, görüntüleri WebP’ye dönüştürmenin dosya boyutunu%25 azalttığını göstermektedir.
% 25’e kadar tasarruf etmek için görüntüleri WebP’ye dönüştürün – Kaynak: Google Geliştiriciler
WebP ve yeni nesil format Görüntü boyutu Önbellek politikası
Kodlama ve yanıt verme
Ekranın dışındaki görüntüleri yavaş yükleme ile erteleyin
PSI’ya aşina değilseniz, fırsatın görünümü:
Görüntülerle ilgili sorunlara örnekler – Kaynak: PSI. Yukarıda belirtilen problemler, pagespeed içgörülerde performans düzeyinde bir artışla sonuçlanan CDN görüntüsü sayesinde genellikle düzeltilebilir. CDN görüntüsü önbellekleme kullanır ve her bir cihaz türü için görüntünün boyutunu değiştirmenizi sağlar. Ayrıca JPG görüntüsünüzü WebP gibi yeni nesil formata dönüştürebilir.
Dahası, CDN görüntüleri temel web verilerinizi, Google tarafından 2021’de tanıtılan kullanıcı merkezli performans metriklerini artırır. Görüntü CDN, daha iyi bir kullanıcı deneyimi üretmek için her cihaz için en uygun görüntü sürümü üretir. Kısacası, görüntünüzü optimize ederseniz, deniz feneri performans puanınızı artıracak ve daha iyi bir web hayati temel değer elde edeceksiniz. CDN görüntüsünün her bir çekirdek web verilerine etkisini takiben:
İlk girişte gecikme (etkileşim): Yavaş yükleme görüntüleri yürütme süresini geciktirebilir. CDN görüntüsünün kullanılması Bu sorundan kaçınma, özellikle görüntünün boyutunu önbelleğe alma ve değiştirme sayesinde. En büyük içerik (yükleme): Görüntü yüklerini azaltarak ve görüntü içeriğini optimize ederek, en büyük içerik daha hızlı hale getirilecektir.
Kümülatif Düzen Değişimi (Görsel Kararlılık): Görüntünün doğru boyutlara sahip birkaç sürümünü oluşturarak, tarayıcı, gerçek görüntü yüklendiğinde saklanması gereken mükemmel “ekran” miktarını bulacaktır. Ani içerik hareketi yok! 3. SEO CDN görüntüsünün arttırılması SEO sıralamalarınızı artırmaya da yardımcı olabilir. Çekirdek web verileri Google sayfasının genel deneyiminin sadece bir parçasıdır – diğer faktörler hücresel misafirperverlik, güvenli keşif, HTTPS ve can sıkıcı reklamlardan kaçınmaktır.
Google Sayfa Deneyimi – Kaynak: Google CDN Arama Merkezi Resmi, her faktörü göz önünde bulundurarak içeriği son kullanıcı cihazına göre optimize eder: ekran boyutu, piksel oranı, işletim sistemi vb. Sonuç, görüntünüzü mobil dostu oluşturacaksınız. Buna ek olarak, CDN, DDOS saldırılarından koruduğu için Web Sitesine içeriğin güvenli bir şekilde sunulmasını sağlar. Doğru yapılandırılmış CDN, Edge sunucusu (varoluş noktası) sayesinde trafiği bilgisayar korsanlarından koruma avantajına sahiptir. CDN, genellikle orijinal sunucuya çok hızlı vuran gelen saldırıların sayısını azaltır.
Güvenli keşif, hücresel dostluk ve çekirdek web verileri, Google’daki konumunuzu belirleyen üç temel unsurdur. CDN görüntülerini kullanmak bu faktörlerle olumlu ilişkilidir ve daha iyi bir sıralama elde etmenize yardımcı olabilir. 4. Bant genişliği maliyetlerinizi azaltma Duyarlı bir görüntü ile sık sık, görüntüler her zaman gerektiğinden daha büyüktür, işe yaramaz bant genişliği kullanımı üretir. CDN görüntüsünü kullanırken, kod her kullanıcının ekran boyutlarına göre doğru görüntüyü almasını sağlar. Bu “Cihaz Algılama” özelliği, kullanıcı ekranına göre tasarlanmış mükemmel bir düzen alırken bant genişliği kaynaklarını azaltır. Değiştirilen görüntüler çeşitli formatlar için hazırdır- Kaynak: CloudImage 5. Görüntü varyantları (su işaretleri ve metnin genişliği) üretme CDN görüntüleri otomatik olarak olabilir Korumak, logonuzu veya bazı özel metinleri eklemek istiyorsanız, su işaretini görüntünüze otomatik olarak yerleştirin. Gerçekten zaman kazandırır!
Su İşaretleri için Mevcut Filtreler- Kaynak: CloudImage Görüntüleri optimize etme ve görüntünüze birkaç sıkıştırma katmanı ekleme işleminde daha da ileriye gitmek istiyorsanız, görüntüleri optimize etmenin güçlü bir yolu, Imagify (CDN’nizle) gibi araçları kullanabilirsiniz. CDN görüntüleri pahalı olabilir, böylece daha ucuz bir çözüm seçebilir ve yine de bütçenizin sınırlı olup olmadığını Imagify’ı kullanabilirsiniz. Imafy, CDN görüntüsüne çok benzeyen özelliklere sahip görüntüyü optimize eden bir eklentidir: Bu eklenti, görüntü boyutunuzu birkaç saniye içinde optimize edebilir, sıkıştırabilir ve değiştirebilir. Daha fazla görüntüyü optimize etmenize yardımcı olabilecek Imagify’ın ana özelliklerini tartışalım: Üç Sıkıştırma Seviyesi
Görüntü kalitenizi azaltmadan en fazla üç kompresyon seviyesi kullanabilirsiniz:
Optimizasyon Seviyesi – Kaynak: Hayal Etme Normal (Kayıpsız Sıkıştırma)
Agresif (kayıplı sıkıştırma) Ultra (maksimum dosya tasarrufu için daha agresif kayıplı sıkıştırma) Örneğin, kaliteyi azaltmadan görüntü dosyasının (Ultra Mode) boyutunda alabileceğimiz tasarruf türü budur. 797 kb’lik bir zahmetli olmayan görüntüden (PNG) 240 kb’lik WebP görüntüsüne geçtik (Imagify ile Ultra Sıkıştırma Modu):
WebP Resmi
A-La-Cart’ın Sıkıştırma ve Kütle ve Optimizasyonu Imagify ile, boyutları değiştirme ve bunları tek tek optimize etme veya optimize etme seçeneğine sahipsiniz. WordPress Medya Kütüphanesi)
WordPress eklentileri ve web uygulamaları
Bir WordPress kullanıcısıysanız, görüntünüzü optimize etmek ve bunları WebP’ye dönüştürmek için ücretsiz Imagify eklentisini indirmek daha kolay olacaktır. WordPress kullanmadan görüntüleri optimize etmek istiyorsanız, web uygulamaları ücretsiz olarak (2MB’ye kadar olan dosyalar için).
Imafy, PNG, JPG, GIF, PDF ve WebP formatlarını sıkıştırabilir ve optimize edebilir.
WebP’ye dönüşüm
Boyutu ve sıkıştırmayı değiştirme seçeneği
Boyut ve optimizasyonun değiştirilmesi, yüklenirken veya yayınlanan görüntüdeki optimizasyon işlemi sırasında yapılabilir.
Daha büyük bir görüntünün boyutunu otomatik olarak değiştirin – Kaynak: Hayal Etme
Rezerv ve kurtarma seçenekleri mevcuttur
Image, fikrinizi değiştirirseniz birkaç kurtarma ve rezerv seçeneği sunar. Ancak, eklentiyi silmeye karar verseniz bile görüntü saklanır.