ANALISIS PERBANDINGAN PERFORMANSI WEBSITE BERBASIS REACT JS DAN JAVASCRIPT UNTUK MENAMPILKAN GAMBAR BERFORMAT WEBP DENGAN JPG OPTIMIZE DAN PNG OPTIMIZE = COMPARATIVE ANALYSIS OF PERFORMANCE BETWEEN REACT JS AND JAVASCRIPT-BASED WEBSITES FOR DISPLAYING WEBP FORMATTED IMAGES WITH JPG OPTIMIZE AND PNG OPTIMIZE

Salah satu faktor yang mempengaruhi kenyamanan pengguna dalam mengunjungi website adalah performa saat membuka website. Website yang memiliki ukuran file gambar yang besar akan menurunkan performa website dan waktu untuk menampilkan website menjadi lebih lama. Oleh sebab itu, dibutuhkan cara mengoptimalisasi gambar agar mendapatkan ukuran yang lebih kecil. Salah satu cara untuk mengoptimalisasi gambar yaitu dengan mengubah format gambar menjadi format WebP. WebP merupakan format gambar yang dapat membuat ukuran gambar yang lebih kecil tanpa mengurangi kualitas gambar sehingga web menjadi lebih cepat.
Adapun tujuan penelitian ini untuk mengetahui performansi dan kualitas format gambar WebP, JPG dan PNG pada website berbasis ReactJS dan Javascript.
Proses analisis penelitian ini, akan membandingkan format gambar JPG dan PNG dengan format gambar WebP dengan web berbasis ReactJS dan Javascript. Analisis yang dilakukan menggunakan web dev-tools di google chrome dan package Javascript untuk menghasilkan format gambar webp dan script python untuk menghitung nilai PSNR format gambar.
Hasil penelitian menunjukkan bahwa format webp menghasilkan ukuran file yang lebih rendah dibandingkan dengan format gambar sebelumnya yaitu JPG dan PNG, memiliki kualitas gambar yang tidak terlalu berbeda dan load time yang lebih rendah. Namun Jika format webp dibandingkan dengan format JPG yang sudah di optimize dan disamakan ukurannya dengan format gambar WebP, load time kedua format gambar sama. Tetapi untuk kualitas gambar, format webp jauh lebih baik dibandingkan dengan JPG dan PNG yang sudah di optimize.

Keywords : webp, kualitas gambar, load time, ReactJS, Javascript