Bir yıldan biraz daha uzun bir süre önce Chrome Aurora ekibi Angular NgOptimizedImage yönergesini kullanıma sundu. Bu direktif, temel olarak Core Web Vitals metrikleriyle ölçülen performansı iyileştirmeye odaklanmıştır. Yaygın 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 yönergeyi yeni özelliklerle iyileştirdik. Bu gönderide, bu yeni özelliklerden en önemli olanları açıklanmakta, ayrıca her bir özelliğe neden öncelik verdiğimiz ve bu özelliğin Angular uygulamalarının performansını iyileştirmeye nasıl yardımcı olabileceği vurgulanmaktadır.
Yeni özellikler
NgOptimizedImage, aşağıdaki yeni özellikler de dahil olmak üzere zaman içinde önemli ölçüde gelişti.
Dolgu modu
Resimlerinizi width ve height özelliği sağlayarak boyutlandırmak, düzen kaymasını azaltmak açısından son derece önemli bir optimizasyondur. Çünkü tarayıcıların yer açmak için resmin en boy oranını bilmesi gerekir. Ancak resimleri boyutlandırmak, uygulama geliştiricilerinin ekstra iş yükü anlamına gelmesini sağlar ve bazı görsel kullanım durumlarında böyle bir anlam ifade etmez.
Bu gerilimin giderilmesine yardımcı olmak, geliştirici sonrasında resim bileşenine eklenen ilk önemli özelliktir: dolgu modu. Bu, geliştiricilerin resimleri açıkça boyutlandırmadan ve düzen kaymasına neden olmadan eklemelerine olanak tanır.
Dolgu moduyla, resim boyutlandırma gereksinimi devre dışı bırakılır ve resmin stili, kapsayıcı öğesini dolduracak şekilde otomatik olarak ayarlanır. Bu, resmin en boy oranını sayfada kapladığı alandan ayırır ve resimlerin sayfa düzeninize nasıl uyum sağlayacağı konusunda size daha fazla kontrol sağlar.
Dolgu modu, background-image css özelliğine daha iyi performans gösteren bir alternatif olarak NgOptimizeImage öğesini kullanır. <div> öğesinin veya background-image stiline sahip olacak başka bir öğenin içine resim yerleştirin. Ardından, önceki kod örneğinde gösterildiği gibi dolgu modunu etkinleştirin. Resmin arka planda nasıl konumlandırıldığını kontrol etmek için <div> öğesinde 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 optimizasyonu tekniklerinden biri, uygulamanıza erişen tüm cihazlara uygun boyutlu resimlerin indirilmesini sağlamak için 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'ınızı ö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 birden fazla işaretleme satırı eklemek ve her srcset için birden fazla özel URL eklemek anlamına gelir. Ayrıca, yaygın kullanılan cihazların hem ekran yoğunluklarını hem de görüntü alanı boyutlarını temsil edebildikleri için karmaşık olan bir dizi ayrılma noktası belirlemeniz gerekir.
Bu nedenle, NgOptimizeImage direktifine otomatik srcset oluşturma özelliğini eklemek lansman sonrası önemli bir dönüm noktasıydı. Bu eklemeyle birlikte resim yeniden boyutlandırmayı destekleyen CDN kullanan tüm uygulamalar, NgOptimizedImage yönergesiyle oluşturulan her resme tam, özelleştirilebilir, srcsetleri otomatik olarak ekleyebilir.
sizes özelliğinin ayarlanması için her görüntünün doğru srcset türünü almasını sağlamak üzere kullanılan basitleştirilmiş bir API ekledik. sizes özelliği eklemezseniz resmin sabit boyutlu olması gerektiğini ve aşağıdaki gibi yoğunluğa bağlı bir srcset alması gerektiğini biliyoruz:
<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ğunun dikkate alındığı bir boyutta sunulmasını sağlar.
Diğer yandan, sizes özelliğini eklerseniz NgOptimizedImage, bu varsayılan ayrılma noktası listesini kullanarak birçok yaygın cihaz ve resim boyutu için ayrılma noktalarını 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 indirirken harcadığı süreyi azaltmanız önemlidir. Önceki bölümde srcset ürününün daha küçük resim dosyalarını aktararak nasıl yardımcı olabileceğini görmüştünüz. Ancak bir o kadar önemli bir optimizasyon da aktarımı mümkün olan en kısa sürede başlatmaktır. Bunu yapmanın bir yolu link rel="preconnect" etiketlerini kullanarak resim alanınızla bağlantıyı hızlı bir şekilde başlatmaktır.
NgOptimizeImage başından beri, LCP görüntünüzün alanına önceden bağlanamazsanız uyarıda bulunmuştur. Ancak uyarı ideal bir çözüm değildir. Biz yalnızca sorunu sizin yerinize düzeltmeyi tercih ederiz. Otomatik önceden bağlantı oluşturma sayesinde NgOptimizeImage şimdi tam olarak bunu yapıyor.
Bu özelliği desteklemek amacıyla statik kod analizini kullanarak NgOptimizeImage yükleyicilerinde resim alanlarını tespit etmeyi ve bu alanlar için önceden bağlanma bağlantı etiketlerini otomatik olarak oluşturmayı deneriz. 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 görüntü performansı için bir adım daha az zaman gerektiği anlamına gelir.
Özel yükleyiciler için gelişmiş destek
NgOptimizeImage'ın temel öğelerinden biri, direktifin uygulamanın resim CDN'sine göre uyarlanmış URL'leri otomatik olarak oluşturmasına olanak tanıyan yükleyici mimarisidir. Yaygın olarak kullanılan CDN'ler için bir dizi yerleşik yükleyici dahildir. Ayrıca, NgOptimizeImage'ı hemen hemen 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, rastgele verilerin resim öğesinden özel yükleyiciye aktarılmasına olanak tanıyan özelleştirilebilir bir loaderParams veri yapısı desteği ekledik. Genişlemeyle birlikte özel yükleyiciler, bir uygulamanın görüntü altyapısının gerektirdiği kadar basit veya karmaşık olabilir.
Aşağıdaki örnekte, basit bir özel yükleyicinin iki alternatif resim alanı arasında seçim yapmak için loaderParams API'yi nasıl kullanabileceği gösterilmektedir:
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ı için genişletilmiş rehberlik
Şimdiye kadar Angular'a eklediğimiz her resim performansı uyarısı, NgOptimizeImage yönergesinin bir parçasıydı. Bu yönergeyi uygulamada kullanmıyorsanız resim performansı sorunlarıyla ilgili herhangi bir yönlendirme almazsınız.
Angular 17'de, resim performansı kılavuzunun kapsamını tüm Angular uygulamalarını içerecek şekilde genişletiyoruz. LCP resminizi geç yükleme veya sayfa için çok büyük bir dosya indirme gibi performansa zarar veren hatalar olduğunu bildiğimiz resim kalıpları tespit edersek NgOptimizeImage'ı kullanmıyor olsanız bile size bilgi vereceğiz.
Resim performansı tüm uygulamalar için önemlidir. Bu yüzden, Angular uygulamalarında yaygın hataları önlemeye yardımcı olacak önlemler oluşturmaya devam etmekten heyecan duyuyoruz.
Beklenenler
NgOptimizeImage için bir sonraki özellik grubunu geliştirmek için yoğun şekilde çalışıyoruz. Resim performansı asıl endişemiz olmaya devam etse de, NgOptimizeImage'ın Angular uygulamalarına resim ekleme konusunda ilgi çekici bir seçenek olarak kalmasını sağlamak için geliştirici deneyimini iyileştiren özellikler de eklemek istiyoruz.
Öncelik verdiğimiz özelliklerden biri resim yer tutucularıdır. 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. NgOptimizeImage üzerinde performansa öncelik veren bir resim yer tutucu sistemi oluşturmayı umuyoruz. Yeni duyurular için blogumuzu takip etmeye devam edin!