Bir yıldan uzun bir süre önce Chrome Aurora ekibi, Angular NgOptimizedImage yönergesini kullanıma sundu. Bu direktif, Core Web Vitals metrikleriyle ölçülen performansı iyileştirmeye odaklanmaktadır. Yaygın görüntü 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 özelliklerin en önemlileri açıklanmakta, her özelliğe neden öncelik vermeyi seçtiğimiz ve Angular uygulamalarının performansını iyileştirmeye nasıl yardımcı olabileceği vurgulanmaktadır.
Yeni özellikler
NgOptimizedImage, aşağıdaki yeni özelliklerle birlikte zaman içinde önemli ölçüde iyileşti.
Dolgu modu
width ve height özelliği sağlayarak resimlerinizi boyutlandırmak, düzen kaymasını azaltmak için son derece önemli bir optimizasyondur. Çünkü tarayıcıların, resim üzerinde yer açmak için en boy oranını bilmesi gerekir. Ancak, resimleri boyutlandırmak uygulama geliştiriciler için ek bir çalışmadır ve bazı görsel kullanım alanlarında mantıklı değildir.
Bu gerilimin çözülmesine yardımcı olmak, geliştirici önizleme sonrası resim bileşenine eklenen ilk önemli özelliktir: dolgu modu. 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, bir resmin en boy oranını sayfada kapladığı alandan ayırır ve resimlerin sayfa düzeninize nasıl uyduğu konusunda daha fazla kontrol sahibi olmanızı sağlar.
Dolgu modu, background-image css özelliğine daha iyi performans gösteren bir alternatif olarak NgOptimizedImage'i kullanır. Bir resmi <div> veya background-image stiline sahip olacak başka bir öğenin içine 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 optimizasyonu tekniklerinden biri, uygulamanıza erişen tüm cihazlar için uygun boyutlardaki resimlerin indirilmesini sağlamak amacıyla srcset özelliğinin kullanılmasıdır. Uygulamanızın genelinde srcset kullanmak, bant genişliğini boşa harcamanızı önleyebilir ve LCP Core Web Vitals'ı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, bir dizi ayrılma noktasına karar vermeniz gerekir. Bu, yaygın cihazların hem ekran yoğunluklarını hem de görüntü alanı boyutlarını temsil edebildiği için karmaşıktır.
Bu nedenle, NgOptimizedImage yönergesine otomatik srcset oluşturma özelliği eklemek, lansman sonrası önemli bir aşamaydı. Bu eklemeyle, resim yeniden boyutlandırmayı destekleyen bir 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 özelliğinin ayarlanmasıyla ilgili 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 srcset türü, resimlerin kullanıcının cihaz piksel yoğunluğunu dikkate alan bir boyutta sunulmasını sağlar.
Diğer yandan, sizes özelliğini eklerseniz NgOptimizedImage, şu varsayılan ayrılma noktaları listesini kullanarak birçok yaygın cihaz ve resim boyutu için ayrılma 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ğlanma
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 ürününün daha küçük resim dosyalarını aktararak nasıl yardımcı olabileceğini görmüştünüz. Ancak, aktarım işlemini mümkün olan en kısa sürede başlatmak da eşit 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, başlangıçtan itibaren LCP resminizin alanına önceden bağlanamadığınızda uyarı vermiştir, ancak uyarı ideal bir çözüm değildir. Sorunu sizin yerinize çözmeyi tercih ederiz. NgOptimizedImage, otomatik önceden bağlanma oluşturma özelliğiyle tam olarak bunu yapıyor.
Bu özelliği desteklemek için statik kod analizini kullanarak NgOptimizedImage yükleyicilerindeki resim alanlarını tespit etmeyi dener ve bu alanlar için otomatik olarak önceden bağlantı bağlantısı etiketleri oluştururuz. 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 gerekenden daha az adım anlamına gelir.
Özel yükleyiciler için gelişmiş destek
NgOptimizedImage'ın temel öğelerinden biri, yönergenin, uygulamanın görüntü 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 bulunur. 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, rastgele verilerin resim öğesinden özel yükleyiciye iletilmesine olanak tanıyan özelleştirilebilir 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 Açısal dokümanlarda bulabilirsiniz.
Resim performansıyla ilgili kapsamlı yönergeler
Şu ana kadar, Angular'a eklediğimiz tüm resim performansı uyarıları NgOptimizedImage yönergesi kapsamındaydı. Uygulamada yönergeyi kullanmıyorsanız görüntü performansıyla ilgili sorunlarla ilgili bilgi alamazsınız.
Angular 17'de, resim performansı kılavuzunun kapsamını tüm Angular uygulamalarını içerecek şekilde genişletiyoruz. Artık LCP resminizi geç yüklemek veya sayfa için çok büyük bir dosya indirmek gibi performansa zarar veren hatalar olduğunu bildiğimiz resim kalıpları tespit edersek NgOptimizedImage'ı kullanmıyor olsanız bile bu durumu size bildiririz.
Resim performansı tüm uygulamalar için önemlidir. Bu nedenle, Angular uygulamalarında sık yapılan hataları önlemeye yardımcı olacak önlemler oluşturmaya devam etmekten heyecan duyuyoruz.
Beklenenler
NgOptimizedImage için yeni özellik grubunu geliştirmek üzere çalışmaya devam ediyoruz. Resim performansı temel endişemiz olmaya devam etse de, NgOptimizedImage'ın Angular uygulamalarına resim eklemek için cazip bir seçenek olarak kalmasını sağlamak amacıyla geliştirici deneyimini iyileştiren özellikler eklemek istiyoruz.
Öncelik verdiğimiz özelliklerden biri de resim yer tutucuları. Bunlar genellikle web uygulamalarında resim yüklemenin daha iyi görünmesi için kullanılır ancak yanlış uygulanırsa performansı olumsuz etkileyebilir. NgOptimizedImage'da performans odaklı bir resim yer tutucu sistemi oluşturmayı umuyoruz. Yeni duyurular için blogumuzu takip etmeye devam edin!