Mayıs 2022'de Aurora ve Angular ekipleri, Angular için resim yönergesi üzerinde birlikte çalışacaklarını duyurdu. Direktif, kısa süre önce Angular 14.2 sürümü kapsamında geliştirici önizlemesi için yayınlandı. Bu yayında, yeni resim yönü NgOptimizedImage'ün Angular'da resim optimizasyonunu nasıl desteklediği ele alınmaktadır.
Arka plan
Web kullanıcı deneyiminin yaygın ve önemli bir bileşeni olan resimler, web sayfalarının %99,9'unda bir veya daha fazla resim isteği oluşturur. Resimler, sayfa ağırlığına en çok katkıda bulunan öğedir ve sayfa başına ortalama 982 kilobayt ağırlığındadır.
Artan sayıları ve boyutları nedeniyle resimler, web sayfalarının performansını engelleyebilir ve Önemli Web Verileri metriklerini etkileyebilir. 2021'de masaüstü sayfalarının% 79, 4'ünde Largest Contentful Paint (LCP) öğesi bir resimdi. Bu nedenle, optimize edilmiş resimler bulmak çoğumuz için sürekli bir çaba haline geldi.
Aurora ekibi, geliştiricilerin sık karşılaştıkları zorluklara hazır çözümler sunmak için çerçevelerin gücünden yararlanmaya inanıyor. Resim optimizasyonu alanına ilk girişimleri Next.js resim bileşeni oldu. Bu bileşeni, resim optimizasyonunun geliştirici deneyimini (DX) iyileştirmenin, çerçeve kullanan daha fazla uygulamanın performansında kazanımlar sağlayıp sağlayamayacağını test etmek için bir test alanı olarak değerlendirdiler.
Next.js kullanıcısı Leboncoin'in ilk sonuç grubu cesaret vericiydi. Leboncoin, next/image'ü kullanmaya başladıktan sonra LCP'de önemli bir iyileşme (2,4 saniyeden 1,7 saniyeye) elde etti. next/image'ün daha sonra toplulukta benimsenmesi, LCP eşiklerini karşılayan Next.js kaynaklarının artmasında rol oynadı. Kısa süre sonra, diğer çerçevelerde de benzer özellikler için istekler geldi. Bunlardan biri Angular idi.
Sonuç olarak Aurora, bu çerçeveler için resim bileşenlerinin prototipini oluşturmak üzere Angular ve Nuxt ile iletişime geçti. Nuxt resim bileşeni geçen yıl kullanıma sunuldu. Artık Angular resim yönergesi (NgOptimizedImage), resim optimizasyonu varsayılanlarını Angular'a getirmek için kullanıma sunuldu.
Fırsat
Angular, günümüzde geliştiriciler tarafından kullanılan önde gelen JavaScript çerçevelerinden biridir. Mobil cihazlarda HTTPArchive tarafından taranan 50.000'den fazla kaynak tarafından kullanılır ve NPM'de haftalık yaklaşık 3 milyon indirme sayısına sahiptir.