Chrome Aurora ekibi, bir yıldan biraz daha uzun bir süre önce Angular NgOptimizedImage yönergesini kullanıma sundu. Bu direktif, Core Web Vitals metrikleriyle ölçülen performansı iyileştirmeye odaklanmaktadır. Sık kullanılan resim optimizasyonlarını ve en iyi uygulamaları, standart bir <img> öğesinden çok daha karmaşık olmayan kullanıcılara yönelik bir API'de bir araya getirir.
2023'te directive yeni özelliklerle geliştirdik. Bu gönderide, her bir özelliğe neden öncelik vermeyi tercih ettiğimiz ve bu özelliklerin Angular uygulamalarının performansını nasıl iyileştirebileceğine vurgu yaparak bu yeni özelliklerden en önemlilerini açıklıyoruz.
Yeni özellikler
NgOptimizedImage, aşağıdaki yeni özellikler de dahil olmak üzere zaman içinde önemli ölçüde iyileştirildi.
Doldurma modu
Tarayıcıların, resim için yer açmak amacıyla resmin en boy oranını bilmesi gerektiğinden, resimlerinizi width ve height özelliğini sağlayarak boyutlandırmak düzen kaymasını azaltmak için son derece önemli bir optimizasyondur. Ancak resimleri boyutlandırmak, uygulama geliştiriciler için ek bir iş yükü oluşturur ve bazı resim kullanım alanlarında anlamlı değildir.
Geliştirici önizlemesinden sonra resim bileşenine eklenen ilk büyük özellik olan dolgu modu bu sorunu çözmeye yardımcı olur. Bu, geliştiricilerin resimleri açıkça boyutlandırmadan ve düzen kayması olmadan ekleyebilmelerinin bir yoludur.
Dolgu modunda resim boyutlandırma gereksinimi devre dışı bırakılır ve resim, kapsayıcı öğesini dolduracak şekilde otomatik olarak biçimlendirilir. Bu işlem, resmin en boy oranını sayfadaki kapladığı alandan ayırır ve resimlerin sayfa düzeninize nasıl sığacağı konusunda daha fazla kontrol sahibi olmanızı sağlar.
Doldurma modu, background-image CSS mülküne daha iyi performans gösteren bir alternatif olarak NgOptimizedImage'i kullanır. <div> veya background-image stilinin uygulanacağı başka bir öğenin içine bir resim yerleştirin, ardından önceki kod örneğinde gösterildiği gibi dolgu modunu etkinleştirin. Resmin arka planda nasıl konumlandırılacağını kontrol etmek için <div> üzerinde object-fit ve object-position CSS özelliklerini kullanın.
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
Srcset oluşturma
En etkili resim optimizasyon tekniklerinden biri, uygulamanıza erişen tüm cihazlar için uygun boyutta resimlerin indirilmesini sağlamak amacıyla srcset özelliğinin kullanılmasıdır. Uygulamanızda srcset'ü kullanmak bant genişliğinizi boşa harcamanızı önleyebilir ve LCP Core Web Vital metriğinizi önemli ölçüde iyileştirebilir.
srcset özelliğinin olumsuz tarafı, uygulanmasının zahmetli olabilmesidir. srcset değerlerini manuel olarak yazmak, uygulamanızdaki her resim öğesine her srcset için birden fazla özel URL içeren birden fazla işaretleme satırı eklemek anlamına gelir. Ayrıca, hem ekran yoğunluklarını hem de yaygın cihazların görüntü alanı boyutlarını temsil edebildikleri için karmaşık olan bir dizi kesme noktasına karar vermeniz gerekir.
Bu nedenle, NgOptimizedImage yönergesine otomatik srcset oluşturma özelliğinin eklenmesi, lansman sonrası önemli bir aşamaydı. Bu eklemeyle, resim yeniden boyutlandırmayı destekleyen CDN kullanan tüm uygulamalar, NgOptimizedImage yönergesiyle oluşturulan her resme tam, özelleştirilebilir, srcset'ler otomatik olarak eklenebilir.
Her resmin doğru srcset türünü almasını sağlamak için kullanılan sizes mülkünü ayarlamak üzere basitleştirilmiş bir API ekledik. sizes özelliği eklemezseniz resmin sabit boyutlu olması amaçlandığını ve aşağıdaki gibi yoğunluğa bağlı bir srcset değeri alması gerektiğini biliriz:
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
Bu tür bir srcset, resimlerin kullanıcının cihaz piksel yoğunluğunu hesaba katan bir boyutta yayınlanmasını sağlar.
Öte yandan, sizes mülkünü eklerseniz NgOptimizedImage, bu varsayılan kesme noktası listesini kullanarak birçok yaygın cihaz ve resim boyutu için kesme noktaları içeren duyarlı bir srcset oluşturur:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
Önceden bağlantı oluşturma
LCP'yi iyileştirmek için kullanıcılarınızın LCP resmini indirmek için harcadığı süreyi azaltmak önemlidir. Önceki bölümde, srcset'ün daha küçük resim dosyaları aktararak nasıl yardımcı olabileceğini gördünüz. Ancak aktarımı en kısa sürede başlatmak da aynı derecede önemli bir optimizasyondur. Bunu yapmanın bir yolu, link rel="preconnect" etiketlerini kullanarak resim alanınızla hızlı bir bağlantı başlatmaktır.
NgOptimizedImage, LCP resminizin alanına önceden bağlanamazsanız başlangıçtan beri uyarıyor. Ancak uyarı ideal bir çözüm değildir. Sorununuzu sizin için çözmeyi tercih ederiz. NgOptimizedImage, otomatik ön bağlantı oluşturma ile tam olarak bunu yapıyor.
Bu özelliği desteklemek için NgOptimizedImage yükleyicilerinde resim alanlarını algılamaya çalışmak ve bu alanlar için otomatik olarak ön bağlantı bağlantısı etiketleri oluşturmak üzere statik kod analizini kullanırız. Yine de manuel önceden bağlanma bağlantılarının gerekli olduğu durumlar olabilir. Ancak çoğu kullanıcı için otomatik önceden bağlanma, iyi resim performansı elde etmek için gereken adımların azalması anlamına gelir.
Özel yükleyiciler için gelişmiş destek
NgOptimizedImage'ın temel unsurlarından biri, talimatın uygulamanın resim CDN'sine göre özelleştirilmiş URL'leri otomatik olarak oluşturmasına olanak tanıyan yükleyici mimarisidir. Yaygın olarak kullanılan CDN'ler için yerleşik bir dizi yükleyici eklenmiştir. Ayrıca, NgOptimizedImage'ı neredeyse tüm resim barındırma çözümleriyle entegre etmenizi sağlayan özel yükleyicilerin kullanımını da sağlıyoruz.
Başlangıçta bu özel yükleyicilerin kapsamı sınırlıydı ve resim öğesinden yalnızca width özelliğini okuyabiliyordu. Kullanıcı geri bildirimlerine yanıt olarak, resim öğesinden özel yükleyiciye rastgele verilerin iletilmesine olanak tanıyan özelleştirilebilir bir loaderParams veri yapısı desteği ekledik. Genişletmeyle özel yükleyiciler, bir uygulamanın görüntü altyapısının gerektirdiği kadar basit veya karmaşık olabilir.
Aşağıdaki örnek, basit bir özel yükleyicinin iki alternatif resim alanı arasında seçim yapmak için loaderParams API'yi nasıl kullanabileceğini gösterir:
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
Daha karmaşık bir özel yükleyici örneğini Angular dokümanlarında bulabilirsiniz.
Resim performansıyla ilgili kapsamlı yönergeler
Şimdiye kadar Angular'a eklediğimiz her resim performansı uyarısı, NgOptimizedImage yönergesinin bir parçasıydı. Uygulamada talimatı kullanmıyorsanız resim performansıyla ilgili sorunlar konusunda herhangi bir yardım almazsınız.
Angular 17'de, resim performansı kılavuzunun kapsamını tüm Angular uygulamalarını içerecek şekilde genişletiyoruz. LCP resminizi gecikmeli yükleme veya sayfa için çok büyük bir dosya indirme gibi performansı olumsuz yönde etkileyen hata olduğunu bildiğimiz resim kalıplarını tespit edersek NgOptimizedImage kullanmasanız bile size haber veririz.
Resim performansı tüm uygulamalar için önemlidir. Angular uygulamalarında sık yapılan hataları önlemeye yardımcı olacak önlemler oluşturmaya devam etmekten heyecan duyuyoruz.
Gelecek için
NgOptimizedImage için bir sonraki özellik grubunu geliştirmek üzere yoğun şekilde çalışıyoruz. Resim performansı birincil önceliğimiz olsa da NgOptimizedImage'in Angular uygulamalarına resim eklemek için cazip bir seçenek olarak kalmasını sağlamak amacıyla geliştirici deneyimini iyileştiren özellikler de eklemek istiyoruz.
Resim yer tutucuları bizim için öncelikli bir özelliktir. Bunlar genellikle web uygulamalarında resim yüklemenin daha iyi görünmesini sağlamak için kullanılır ancak yanlış uygulanırsa performansı olumsuz etkileyebilir. NgOptimizedImage'e performans odaklı bir resim yer tutucu sistemi eklemeyi umuyoruz. Daha fazla duyuru için blogumuzu takip edin.