Sekitar setahun yang lalu, tim Chrome Aurora meluncurkan direktif Angular NgOptimizedImage. Perintah ini terutama berfokus pada peningkatan performa, seperti yang diukur dengan metrik Core Web Vitals. API ini memaketkan 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 directive dengan fitur baru. Postingan ini menjelaskan sebagian besar fitur baru tersebut, dengan penekanan pada alasan kami memilih untuk memprioritaskan setiap fitur, dan bagaimana fitur tersebut dapat membantu meningkatkan performa aplikasi Angular.
Fitur baru
NgOptimizedImage telah meningkat secara substansial dari waktu ke waktu, termasuk fitur-fitur baru berikut.
Mode Fill
Menentukan ukuran gambar dengan memberikan atribut width dan height adalah pengoptimalan yang sangat penting untuk mengurangi pergeseran tata letak, karena browser perlu mengetahui rasio aspek gambar untuk menghemat ruang. Namun, menentukan ukuran gambar adalah pekerjaan tambahan bagi developer aplikasi, dan tidak masuk akal dengan beberapa kasus penggunaan gambar.
Untuk membantu mengatasi ketegangan ini, fitur utama pertama yang ditambahkan ke pratinjau komponen gambar pasca-developer adalah: mode isi. Ini adalah cara bagi developer untuk menyertakan gambar tanpa menentukan ukurannya secara eksplisit, dan tanpa menimbulkan pergeseran tata letak.
Dengan mode pengisian, persyaratan ukuran gambar dinonaktifkan, dan gambar secara otomatis ditata gayanya untuk mengisi elemen yang dimuatnya. Tindakan ini memisahkan rasio aspek gambar dari ruang yang ditempatinya di halaman, dan memberi Anda kontrol yang lebih besar atas cara gambar sesuai dengan tata letak halaman.
Mode isi menggunakan NgOptimizedImage sebagai alternatif yang berperforma lebih baik daripada properti css background-image. Tempatkan gambar di dalam <div> atau elemen lain yang akan memiliki gaya visual background-image, lalu aktifkan mode isi, 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 perangkat apa pun yang mengakses aplikasi Anda. Menggunakan srcset di seluruh aplikasi dapat mencegah Anda membuang bandwidth dan secara substansial meningkatkan LCP Core Web Vital.
Kelemahan atribut srcset adalah sulit diterapkan. Menulis 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 serangkaian titik henti sementara, yang rumit, karena dapat mewakili kepadatan layar dan ukuran area pandang perangkat umum.
Itulah sebabnya menambahkan pembuatan srcset otomatis ke perintah NgOptimizedImage adalah pencapaian utama pasca-peluncuran. Dengan penambahan ini, aplikasi apa pun yang menggunakan CDN yang mendukung pengubahan ukuran gambar bisa mendapatkan set srcsets yang lengkap dan dapat disesuaikan secara otomatis ditambahkan ke setiap gambar yang dihasilkan dengan perintah NgOptimizedImage.
Kami telah menyertakan API sederhana untuk menetapkan properti sizes, yang digunakan untuk memastikan setiap gambar mendapatkan jenis srcset yang benar. Jika Anda tidak menyertakan atribut sizes, kami 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 ditayangkan pada ukuran yang memperhitungkan 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 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 memperingatkan jika Anda gagal melakukan prakoneksi ke domain gambar LCP, tetapi peringatan bukanlah solusi yang ideal. Sebaiknya kami memperbaiki masalah tersebut untuk Anda. Dan itulah yang sekarang dilakukan NgOptimizedImage, dengan pembuatan pra-koneksi 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 yang diperlukan untuk performa gambar yang baik.
Meningkatkan dukungan untuk loader kustom
Elemen utama NgOptimizedImage adalah arsitektur loader, yang memungkinkan perintah untuk otomatis membuat 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 cakupannya 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 ini, loader kustom dapat sesederhana atau serumit yang diperlukan oleh infrastruktur gambar aplikasi.
Contoh berikut menunjukkan cara loader kustom sederhana dapat menggunakan loaderParams API untuk memilih 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 di aplikasi, Anda tidak akan mendapatkan panduan apa pun 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 kami ketahui sebagai kesalahan yang merugikan performa, seperti memuat lambat gambar LCP, atau mendownload file yang terlalu besar untuk halaman, kami akan memberi tahu Anda, meskipun Anda tidak menggunakan NgOptimizedImage.
Performa gambar penting untuk semua aplikasi, dan kami bersemangat untuk terus membangun pagar pembatas untuk membantu mencegah kesalahan umum dalam aplikasi Angular.
Harapan ke depan
Kami sedang berupaya keras mengembangkan kumpulan 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. Ini biasanya digunakan untuk membuat pemuatan gambar terlihat lebih baik di aplikasi web, tetapi dapat menurunkan performa jika diterapkan dengan tidak benar. Kami berharap dapat membangun sistem placeholder gambar yang mengutamakan performa ke dalam NgOptimizedImage. Nantikan pengumuman lebih lanjut di blog kami.