Lebih dari setahun yang lalu tim Chrome Aurora meluncurkan perintah Angular NgOptimizedImage. Perintah ini berfokus terutama pada peningkatan performa, yang diukur berdasarkan metrik Data Web Inti. Platform ini menggabungkan pengoptimalan gambar umum dan praktik terbaik ke dalam API yang ditampilkan kepada pengguna dan tidak jauh lebih rumit daripada elemen <img> standar.
Pada tahun 2023, kami telah meningkatkan perintah dengan fitur-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
Mengubah 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 untuk gambar tersebut. Namun, mengubah ukuran gambar merupakan pekerjaan tambahan bagi developer aplikasi, dan tidak masuk akal pada beberapa kasus penggunaan gambar.
Fitur utama pertama yang ditambahkan ke komponen gambar setelah pratinjau developer: mode isi akan membantu mengatasi ketegangan ini. Ini adalah cara bagi developer untuk menyertakan gambar tanpa mengubah ukurannya secara eksplisit, dan tanpa menimbulkan pergeseran tata letak.
Dengan mode isian, persyaratan ukuran gambar dinonaktifkan, dan gambar secara otomatis ditata untuk mengisi elemen yang ada di dalamnya. Hal ini memisahkan rasio aspek gambar dari ruang yang ditempati di halaman, dan memberi Anda kontrol yang lebih besar tentang kesesuaian gambar dengan tata letak halaman.
Mode pengisian menggunakan NgOptimizedImage sebagai alternatif yang berperforma lebih baik untuk properti css background-image. Tempatkan gambar di dalam <div> atau elemen lain yang akan memiliki gaya visual 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 LCP Core Web Vital secara signifikan.
Kelemahan dari atribut srcset adalah sulit untuk diimplementasikan. 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 memutuskan satu set titik henti sementara, yang cukup rumit, karena titik henti sementara dapat mewakili kepadatan layar dan ukuran area pandang perangkat yang umum.
Itulah sebabnya penambahan pembuatan srcset otomatis ke dalam perintah NgOptimizedImage merupakan tonggak 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 yang disederhanakan untuk menyetel properti sizes, yang digunakan untuk memastikan bahwa setiap gambar mendapatkan jenis srcset yang benar. Jika Anda tidak menyertakan atribut sizes, kami tahu bahwa gambar dimaksudkan untuk berukuran tetap, dan seharusnya 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 mempercepat 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, kami lebih suka memperbaiki masalah tersebut untuk Anda. Itulah yang dilakukan NgOptimizedImage, dengan pembuatan prakoneksi 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 ketika link prakoneksi manual diperlukan, tetapi bagi sebagian besar pengguna, prakoneksi otomatis berarti mengurangi satu langkah yang diperlukan untuk mendapatkan performa gambar yang baik.
Dukungan yang disempurnakan untuk loader kustom
Elemen utama NgOptimizedImage adalah arsitektur loader, yang memungkinkan direktif untuk secara otomatis menghasilkan URL yang disesuaikan dengan CDN gambar aplikasi. Satu set loader bawaan disertakan untuk CDN yang digunakan secara luas. Kami juga menyediakan untuk 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, loader kustom bisa sesederhana atau serumit yang dibutuhkan 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 dalam 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 ini di 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 kami tahu merupakan kesalahan yang mengganggu performa, seperti memuat gambar LCP yang lambat, atau mendownload file yang terlalu besar untuk halaman tersebut, 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 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 NgOptimizedImage tetap menjadi opsi yang menarik untuk menyertakan gambar dalam aplikasi Angular.
Satu fitur yang menjadi prioritas kami adalah placeholder gambar. Cara ini biasanya digunakan untuk membuat pemuatan gambar terlihat lebih baik di aplikasi web, tetapi dapat mengganggu performa jika tidak diterapkan dengan benar. Kami berharap dapat membangun sistem placeholder gambar yang mengutamakan performa ke dalam NgOptimizedImage. Ikuti terus blog kami untuk mengetahui pengumuman selanjutnya.