Categories: Opini

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
Share
Published by
Firman Nugraha

Recent Posts

Cisco Peringkatkan Kerentanan Kritis Dalam Cisco Data Center Network Manager

Cisco mengungkapkan tiga kerentanan dalam layanannya. Ini dia penanganannya!

January 7, 2020

Optimal idM Meluncurkan OptimalCloud Partner Platform

Ini ulasan mengenai keuntungan OptimalCloud Partner Platform, platform baru milik Optimal idM!

January 6, 2020

Google Siapkan Coral Accelerator Module dan Coral Dev Board Mini untuk Tahun 2020

Google kenalkan dua koleksi baru dari Coral. Dua koleksi baru ini bakal menambah kemampuan pengembangan…

January 3, 2020

Google Kembangkan Model Kecerdasan Buatan Untuk Deteksi Kanker Payudara

Raksasa Google baru saja mengembangkan sistem pemindaian kanker payudara berbasis kecerdasan buatan. Bagaimana hasilnya, berikut…

January 3, 2020

Google Dorong Fitur Bubbles Notifications Ke Versi Stabil

Meski dikenalkan bersamaan dengan Android 10 Beta, sampai kini Bubbles Notifications masih dalam tahap pengembangan.…

December 31, 2019

Samsung Siapkan Lima Proyek dan Empat Startup C-Lab Untuk CES 2020

Samsung akan kembali memamerkan hasil program C-Lab ke ajang CES 2020. Ini dia proyek dan…

December 30, 2019