Sebagai pengembang web dan insinyur perangkat lunak, kami ingin memberikan apa yang mereka inginkan. Jika Anda sudah familiar dengan NextJS , Anda pasti sudah familiar dengan fitur optimasi gambar yang termasuk dalam versi 10. NextJS adalah framework yang dapat digunakan baik di backend dan frontend aplikasi React. Ia mampu melakukan berbagai manipulasi, termasuk mengubah gambar ke format WebP yang ramah web, mengunggah gambar sesuai kebutuhan pengguna, dan banyak lagi.
Jika Anda sudah bekerja dengan NextJS, ini sangat membantu. Tetapi bagaimana jika Anda menginginkan fungsionalitas pengoptimalan, gaya sebaris, dan kesederhanaan komponen React tanpa rintangan yang terkait dengan kerangka kerja baru?
— , . , , ( !) .
, BetterImage
BetterImage adalah alat sumber terbuka yang meniru banyak fitur pengoptimalan dengan cara yang sederhana dan nyaman dalam format React. Ini mengubah gambar ke WebP yang dioptimalkan 30% lebih kecil dari JPEG tanpa mengorbankan kualitas. Ini meningkatkan tampilan, serta SEO, aksesibilitas di Google Lighthouse melalui tag standar. Ini juga merampingkan pemformatan CSS, termasuk manipulasi paling populer di luar kotak. Komponen mengambil properti, mengabstraksi manipulasi dan impor, memungkinkan lebih banyak fokus pada aplikasi. BetterImage kompatibel dengan komponen berbasis kelas dan fungsional, sehingga Anda dapat memasukkannya ke dalam aplikasi Anda apa pun bumbu yang Anda sajikan dengan React Anda. Mengaktifkan gambar cadangan,serta dimensi tinggi dan lebar, CSS mencegah penerapan metrik pergeseran tata letak agregat saat mengevaluasi situs di Google Lighthouse.
Hasil Google Lighthouse untuk tag standar (kiri) versus hasil BetterImage (kanan).
Komponen ini masih dalam versi beta, dengan fungsionalitas baru dan paket NPM dalam pengembangan. Jika Anda ingin mencoba casing komponen atau memiliki pertanyaan, silakan kunjungi Github dan situs webnya !
Apa yang ada di balik BetterImage?
Pengujian Lighthouse menunjukkan bahwa komponen tersebut dapat meningkatkan kinerja pemuatan gambar. Kerangka kerja lain seperti Next.JS memberikan pengoptimalan yang bagus. Tim kami ingin mengadopsi ini di React sehingga kerangka kerja lain tidak diperlukan. Kami membuat BetterImage sehingga pengembang dapat menulis gaya secara langsung dalam kode React sebagai string. Styling adalah opsional dan tidak dapat digunakan sama sekali.
Komponen Gambar Lebih Baik
Apa yang ada di balik tenda? Properti diteruskan ke komponen, yang kemudian mengabstraksi informasi untuk memanipulasi gambar. Tidak perlu mengimpor gambar itu sendiri ke dalam komponen React, hanya diperlukan jalur relatif dan BetterImage akan secara dinamis mengimpor gambar yang dikonversi. BetterImage mengonversi file sumber ke WebP menggunakan panggilan API paket NPM eksternal dan menyimpan gambar yang dikonversi di folder lokal. Ini akan membantu membuat gambar lebih cepat setelah manipulasi pertama. Semua fungsi lainnya - selalu fleksibel - diterapkan sesuai kebutuhan. Untuk pratinjau komponen yang saat ini dalam versi beta, selamat datang di Github dan situs webnya !
Terima kasih telah membaca ulasan kecil ini!
