Lebih dari setahun yang lalu, tim Chrome Aurora meluncurkan perintah Angular NgOptimizedImage. Perintah ini difokuskan terutama pada peningkatan performa, seperti yang diukur dengan metrik Data Web Inti. Library ini menggabungkan pengoptimalan gambar umum dan praktik terbaik ke dalam API yang ditampilkan kepada pengguna yang tidak jauh lebih rumit daripada elemen <img> standar.
Pada tahun 2023, kami telah meningkatkan perintah dengan fitur baru. Postingan ini menjelaskan sebagian besar fitur baru tersebut, dengan penekanan pada alasan kami memilih untuk memprioritaskan setiap fitur, dan bagaimana fitur ini dapat membantu meningkatkan performa aplikasi Angular.
Fitur baru
NgOptimizedImage telah meningkat secara substansial dari waktu ke waktu, termasuk fitur baru berikut.
Mode pengisian
Menyesuaikan ukuran gambar dengan memberikan atribut width dan height merupakan pengoptimalan yang sangat penting untuk mengurangi pergeseran tata letak, karena browser perlu mengetahui rasio aspek gambar untuk menghemat ruang. Namun, mengubah ukuran gambar adalah pekerjaan tambahan bagi developer aplikasi, dan tidak masuk akal dengan beberapa kasus penggunaan gambar.
Fitur utama pertama yang ditambahkan ke pratinjau pasca-developer untuk komponen gambar adalah mode pengisian yang dapat membantu mengatasi ketegangan ini. Ini adalah cara bagi developer untuk menyertakan gambar tanpa mengubah ukurannya secara eksplisit, dan tanpa menyebabkan pergeseran tata letak.
Dengan mode isian, persyaratan ukuran gambar dinonaktifkan, dan gambar secara otomatis diberi gaya untuk mengisi elemen yang memuatnya. Hal ini memisahkan rasio aspek gambar dari ruang yang ditempatinya di halaman, dan memberi Anda kontrol yang lebih besar atas kesesuaian gambar dengan tata letak halaman Anda.
Mode pengisian menggunakan NgOptimizedImage sebagai alternatif yang berperforma lebih baik untuk properti css background-image. Tempatkan gambar di dalam <div> atau elemen lain yang memiliki gaya background-image, lalu aktifkan mode pengisian, seperti yang ditunjukkan dalam contoh kode sebelumnya. Gunakan properti CSS object-fit dan object-position di <div> untuk mengontrol cara gambar diposisikan di latar belakang.
// 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>
Pembuatan srcset
Salah satu teknik pengoptimalan gambar yang paling efektif adalah penggunaan atribut srcset untuk memastikan gambar dengan ukuran yang tepat didownload untuk setiap perangkat yang mengakses aplikasi Anda. Menggunakan srcset di seluruh aplikasi dapat mencegah Anda membuang-buang bandwidth dan meningkatkan kualitas LCP Core Web Vital Anda secara signifikan.
Kelemahan dari atribut srcset adalah bahwa penerapannya dapat menjadi rumit. Menuliskan nilai srcset secara manual berarti menambahkan beberapa baris markup ke setiap elemen gambar di aplikasi Anda, lengkap dengan beberapa URL kustom untuk setiap srcset. Anda juga harus menentukan sekumpulan titik henti sementara yang rumit, karena titik henti sementara dapat mewakili kepadatan layar dan ukuran area pandang perangkat umum.
Itulah sebabnya menambahkan pembuatan srcset otomatis ke perintah NgOptimizedImage merupakan pencapaian besar pasca-peluncuran. Dengan penambahan ini, aplikasi apa pun yang menggunakan CDN yang mendukung pengubahan ukuran gambar bisa mendapatkan secara penuh dan dapat disesuaikan, srcset akan otomatis ditambahkan ke setiap gambar yang dihasilkan dengan direktif NgOptimizedImage.
Kami telah menyertakan API yang disederhanakan untuk menyetel properti sizes, yang digunakan untuk memastikan bahwa setiap gambar mendapatkan jenis srcset yang benar. Jika Anda tidak menyertakan atribut sizes, kita tahu bahwa gambar dimaksudkan untuk berukuran tetap, dan harus mendapatkan srcset yang bergantung pada kepadatan, seperti berikut:
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
Jenis srcset ini memastikan bahwa gambar disajikan pada ukuran yang mempertimbangkan kepadatan piksel perangkat pengguna.
Di sisi lain, jika Anda menyertakan properti sizes, NgOptimizedImage akan menghasilkan srcset responsif yang menyertakan titik henti sementara untuk berbagai ukuran perangkat dan gambar yang umum, menggunakan daftar titik henti sementara default ini:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
Pembuatan prakoneksi
Untuk meningkatkan LCP, penting untuk mengurangi waktu yang dihabiskan pengguna untuk mendownload gambar LCP. Di bagian sebelumnya, Anda telah melihat cara srcset dapat membantu dengan mentransfer file gambar yang lebih kecil, tetapi pengoptimalan yang sama pentingnya adalah memulai transfer sesegera mungkin. Salah satu cara untuk melakukannya adalah dengan menggunakan tag link rel="preconnect" untuk memulai koneksi ke domain gambar Anda.
Sejak awal, NgOptimizedImage telah memberikan peringatan jika Anda gagal melakukan prakoneksi ke domain gambar LCP, tetapi peringatan tersebut bukanlah solusi yang ideal. Kami hanya akan memperbaiki masalah ini untuk Anda. Dan itulah yang dilakukan NgOptimizedImage sekarang, dengan pembuatan preconnect otomatis.
Untuk mendukung fitur ini, kami menggunakan analisis kode statis untuk mencoba mendeteksi domain gambar di loader NgOptimizedImage dan secara otomatis membuat tag link prakoneksi untuk domain tersebut. Mungkin masih ada kasus yang memerlukan link prakoneksi manual, tetapi bagi sebagian besar pengguna, prakoneksi otomatis berarti satu langkah lebih sedikit diperlukan untuk performa gambar yang baik.
Peningkatan dukungan untuk loader kustom
Elemen utama NgOptimizedImage adalah arsitektur loader, yang memungkinkan perintah untuk secara otomatis menghasilkan URL yang disesuaikan dengan CDN gambar aplikasi. Serangkaian loader bawaan disertakan untuk CDN yang banyak digunakan. Kami juga menyediakan penggunaan loader kustom, yang memungkinkan Anda mengintegrasikan NgOptimizedImage dengan hampir semua solusi hosting gambar.
Saat peluncuran, loader kustom ini memiliki cakupan yang terbatas, dan hanya dapat membaca atribut width dari elemen gambar. Sebagai respons terhadap masukan pengguna, kami menambahkan dukungan untuk struktur data loaderParams yang dapat disesuaikan, yang memungkinkan data arbitrer diteruskan dari elemen gambar ke loader kustom. Dengan perluasan tersebut, loader kustom bisa menjadi sederhana atau serumit yang dibutuhkan oleh infrastruktur image aplikasi.
Contoh berikut menunjukkan cara loader kustom sederhana menggunakan loaderParams API untuk memilih di antara dua domain gambar alternatif:
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
Contoh loader kustom yang lebih kompleks tersedia di dokumentasi Angular.
Panduan yang diperluas untuk performa gambar
Hingga saat ini, setiap pemberitahuan performa gambar yang telah kami tambahkan ke Angular telah menjadi bagian dari perintah NgOptimizedImage. Jika tidak menggunakan perintah dalam aplikasi, Anda tidak akan mendapatkan panduan tentang masalah performa gambar.
Di Angular 17, kami memperluas cakupan panduan performa gambar untuk menyertakan semua aplikasi Angular. Sekarang, jika kami mendeteksi pola gambar yang dapat merusak performa, seperti memuat gambar LCP dengan lambat, atau mendownload file yang ukurannya terlalu besar untuk halaman, kami akan memberi tahu Anda, meskipun Anda tidak menggunakan NgOptimizedImage.
Performa gambar sangat penting untuk semua aplikasi, dan kami dengan senang hati akan terus membuat batasan untuk membantu mencegah kesalahan umum dalam aplikasi Angular.
Harapan ke depan
Kami sudah bekerja keras mengembangkan rangkaian fitur berikutnya untuk NgOptimizedImage. Meskipun performa gambar tetap menjadi perhatian utama kami, kami juga ingin menambahkan fitur yang meningkatkan pengalaman developer, untuk memastikan bahwa NgOptimizedImage tetap menjadi opsi yang menarik untuk menyertakan gambar dalam aplikasi Angular.
Salah satu fitur yang menjadi prioritas kami adalah placeholder gambar. Hal ini biasanya digunakan untuk membuat pemuatan gambar terlihat lebih baik di aplikasi web, tetapi dapat menurunkan performa jika tidak diterapkan dengan benar. Kami berharap dapat membangun sistem placeholder gambar yang mengutamakan performa ke dalam NgOptimizedImage. Ikuti terus blog kami untuk mendapatkan pengumuman selanjutnya.