Perbandingan Implementasi Grafik Vektor Dan Raster Pada HTML Dan JavaScript


Vektor (SVG, VML, dll) dan raster (JPEG, BMP, GIF, dll) adalah 2 format gambar yang memiliki keunggulan dan kekurangan masing-masing bergantung pada implementasinya. Vektor yang berbasis teks bertolak belakang dengan raster yang berbasis kumpulan pixel. Perbedaan yang mencolok selain cara penyimpanan data gambar dari kedua tipe tersebut adalah:

  1. Tipe Grafik
    Vektor hanya dapat menampilkan tipe grafik yang bersifat primitif yang artinya dapat dikalkulasikan secara matematis seperti lingkaran, segitiga, dan kotak. Sedangkan raster dapat menampilkan gambar bertipe apa saja.
  2. Ukuran file
    Ukuran file pada vektor umumnya lebih kecil daripada raster karena vektor menyimpan data dalam bentuk teks
  3. Modifikasi gambar
    Modifikasi gambar pada vektor dapat dilakukan tanpa merusak gambar asli sedangkan raster kebalikannya. Hal ini dikarenakan pada vektor data disimpan dalam bentuk teks yang terformat.

Masih ada beberapa hal yang membedakan antara gambar vektor dan raster. Namun perbedaan inti dari kedua format tersebut adalah fleksibilitasnya, vektor mempunyai tingkat fleksibilitas yang tinggi sedangkan raster tidak. Hal ini mempunyai dampak yang besar dalam pengimplementasiannya pada HTML. Seperti yang telah diketahui sebelumnya, dengan tingkat fleksibiltas gambar vektor sehingga gambar dapat dizoom atau dimodifikasi tanpa merusak gambar asli, vektor pada HTML untuk menampilkan grafik harus mengkalkulasikan data-data yang telah disediakan dalam file vektor tersebut pada sisi end-user. Hal ini berarti grafik harus diproses terlebih dahulu sebelum dapat dilihat oleh pengguna. Pada raster, grafik sudah diproses sedemikian rupa sehingga gambar yang ada dapat ditampilkan pada user tanpa melalui proses yang panjang dan kompleks.

Dari penjelasan diatas berarti vektor memerlukan waktu proses yang lebih lama daripada raster agar dapat ditampilkan. Hal ini akan dapat semakin jelas dilihat jika gambar vektor dan raster ditampilkan pada halaman web dan gambar tersebut dapat digerakkan sesuka hati dengan menggunakan javascript. Setiap terjadi perubahan pada gambar di web seperti perubahan letak gambar, gambar berbasis vektor harus diproses ulang sedangkan gambar berbasis raster hanya perlu disesuaikan dengan posisi yang baru. Hal ini akan berakibat pada performa penampilan gambar pada web, gambar berbasis vektor besar kemungkinan akan memperlambat proses modifikasi gambar pada web melalui javascript sedangkan gambar berbasis raster sebaliknya.

Berikut adalah perbandingan gambar vektor dan raster dalam pengimplementasinnya pada halaman web dengan menggunakan JavaScript:

Vektor
Raster
Pemprosesan gambar dilakukan pada end-user
Pemprosesan gambar sudah dilakukan ketika pembuatan sehingga hanya perlu pemprosesan untuk penampilan gambar
Dapat memperberat kinerja JavaScript dalam menampilkan gambar pad web
Mempercepat kinerja JavaScript dalam menampilkan gambar pada web
Mempercepat page load halaman web karena ukuran filenya yang rata-rata kecil daripada raster
Memperlambat page load halaman web karena ukuran filenya yang rata-rata lebih besar daripada vektor
Modifikasi gambar lebih mudah dilakukan karena sifatnya yang fleksibel
Modifikasi gambar lebih sering dilakukan melalui pengubahan gambar aslinya