Memilih Format Gambar Yang Tepat Untuk Desain Web Anda

Satu gambar sejuta makna, itulah peribahasa yang biasa kita dengar. TIdak heran saat ini, berdasarkan data bulan Maret 2017, gambar mendominasi content di internet sebesar 65%. Hal ini tidaklah mengherankan, karena gambar akan mempercantik tampilan web, membantu mengkomunikasikan content, menyampaikan cerita, dll. Akan tetapi bagaimana memilih format gambar yang tepat untuk web desain anda? mari kita bahas pada tulisan ini.

Meskipun penggunaan gambar memiliki banyak manfaat, akan tetapi apabila tidak tepat malah akan jadi penyebab website menjadi lambat atau bahkan menjadikan UX nya bermasalah.

Penggunaan gambar yang tepat perlu melibatkan dua hal, yakni:

  • Memilih format gambar yang tepat
  • Mengoptimalkan gambar

Pada tulisan ini hanya akan kita bahas hal pertama, yakni memilih format gambar yang tepat. Sebelum anda membaca lebih lanjut, pastikan anda telah memahami betul dua hal ini:

  • Raster/Bitmap vs Vector Image
  • Lossy vs Lossless

Apabila anda masih belum memiliki pengetahuan terhadap kedua hal diatas, silahkan berselancar di internet terlebih dahulu untuk mencari tahu lebih lanjut.

memilih format gambar

Memilih Format Gambar : JPEG

JPEG atau JPG merupakan format gambar lossy yang dikembangkan oleh Joint Photographic Experts Group(JPEG). Hampir sekitar 3% dari keseluruhan coneten yang ada di internet merupakan gambar format JPG.

Berikut ini beberapa hal yang membuat format JPG begitu populer:

  • format JPG dapat menampilkan jutaan warna. hal ini menjadikan format gambar ini pilihan tepat untuk menampilkan karya foto di internet
  • Karena tipenya lossy, anda dapat menerapkan kompresi untuk mengurangi ukuran file pada format gambar ini. JPG memiliki variasi level kompresi. Level kompresi sekitar 60% masih nampak bagus untuk gambar pada web. Akan tetapi kompresi hingga 75% akan mengakibatkan menurunnya kualitas gambar.
  • Semua perangkat yang menggunakan internet mendukung format gambar ini. Hal ini menjadikan JPG mudah digunakan pada web
  • Salah satu kekurangan dari JPG adalah tidak ada dukungan untuk gambar transparan. Apabila anda ingin menggunakan gambar yang membaur dengan gambar lain sebagai background, maka anda perlu menggunakan format gambar lainnya.

Format Gambar GIF

GIF merupakan kepanjangan dari Graphics Interchange Format. Gif merupakan format gambar lossless 8-bit dengan jumlah warna maksimum sebesar 256 warna. Batasan jumlah warna ini menyebabkan GIF tidak cocok untuk menampilkan hasil karya foto atau gambar-gambar dengan jumlah warna yang cukup banyak.

Akan tetapi apabila kita perhatikan saat ini, penggunaan GIF masih sering kita temui. Bagaimanapun format gambar GIF memiliki beberapa keunggulan, diantaranya:

  • Karena jumlah warnanya terbatas, maka ukuran gambar GIF biasanya kecil
  • GIF dapat digunakan untuk menampilkan gambar transparan
  • GIF juga dapat digunakan untuk menampilkan animasi. Inilah yang sering kita temui, daripada menampilkan dalam bentuk video, sering kali gif digunakan untuk menampilkan gambar dalam durasi pendek.
  • Baik untuk menampilkan gambar yang sederhana, dan sebaiknya tidak menampilkan foto dalam format GIF

Format Gambar PNG

PNG merupakan kepanjangan dari Portable Network Graphics. Format gambar ini merupakan alternatif dari GIF untuk gambar yang digunakan pada web. Format gambar ini dikembangkan oleh W3C. Format gambar PNG sama dengan GIF yakni menggunakan algoritma kompresi lossless. Format ini tersedia dalam 8-bit ataupun 24-bit. Keduanya sama-sama dapat digunakan untuk menampilkan gambar transparan.

Anda dapat menggunakan format PNG 24 bit untuk:

  • Gambar pada web dengan level tranparansi yang beragam
  • Foto atau grafik yang kompleks
  • format lossless menjadikan kualitasnya tidak turun.
  • Tidak seperti GIF, format PNG tidak dapat digunakan untuk animasi dan ukurannya bisa jadi lebih besar.

Format Gambar SVG

Kepanjangan SVG adalah Scalable Vector Graphics dan merupakan tipe file yang berbasis XML. Format file ini sudah sejak tahun 2001 akan tetapi hanya populer dikalangan para pengembang web desain. Salah satu hal yang menyebabkannya adalah kurangnya dukungan oleh browser terhadap format ini ditahun-tahun sebelumnya. Akan tetapi hal ini sudah berbeda saat ini dimana semua browser sudah mendukung format ini.

Kelebihan format SVG diantaranya:

  • SVG biasanya memiliki ukuran file yang lebih kecil dibanding format raster lainnya.
  • Skalable. SVG masih nampak tajam berapapun ukuran resolusi layar yang anda gunakan.
  • Dapat digunakan dalam markup HTML dan menghemat HTTP Request
  • Dapat dikustom melalui CSS
  • Format SVG dapat dianimasikan, bahkan bagian-bagian dari sebuah gambar SVG juga dapat dianimasikan dengan menggunakan CSS dan Javascript.

Ukuran file SVG bisa menjadi besar apabila gambarnya kompleks. Untuk menampilkan foto, SVG bukanlah pilihan. JPG tetap menjadi pilihan terbaik untuk menampilkan foto.

Kesimpulan Dalam Memilih Fotmat Gambar Untuk Desain Web

Format gambar JPG, PNG dan GIF merupakan format gambar yang sudah sangat populer. Berbeda dengan SVG. Sebenarnya ada satu format baru lagi yakni WebP, akan kita bahas pada tulisan yang lain. Untuk gambar yang sederhana atau transparan, anda dapat menggunakan PNG atau GIF. Apabila anda butuh gambar anda dianimasikan, maka GIF pilihan tepat. Untuk menampilkan foto, JPG tetap pilihan terbaik.

Anda memiliki pengalaman dalam memilih format gambar untuk desain web anda? kalau ya, silahkan anda tulis di bagian komentar.

Incoming search terms:

Be Sociable, Share!

Related Posts:

Add a Comment

Your email address will not be published. Required fields are marked *