Imas Indra A detail-oriented and innovative writer. She developed her creative talent and expertise after years of practice in journalism, academic research, essay writing, and blogging. Currently in Niagahoster, she boosted more people to #BuildSuccessOnline using SEO and content marketing strategies. When it comes to writing, her goal is to make complex topics enjoyable.

Memilih Format Gambar yang Tepat untuk Website Anda

5 min read

Gambar adalah elemen yang penting dalam sebuah website. Selain membuat website terlihat lebih menarik, gambar juga membantu pengunjung website “beristirahat sejenak” sebelum melanjutkan membaca konten teks.

Namun, menampilkan gambar di desain web tak bisa dilakukan sembarangan. Salah-salah, website terlihat kurang estetis. Lebih buruk lagi, salah menampilkan gambar bisa mempengaruhi performa teknis website.

Di artikel ini, Anda akan menemukan lebih banyak hal soal penggunaan gambar di website. Mulai dari alasan di balik penggunaan gambar yang tepat, macam-macam format gambar untuk website, dan cara mengoptimalkan gambar pada website.

Mengapa Perlu Format Gambar yang Tepat?

Pemilihan gambar untuk website lebih sering didasari oleh alasan estetika dan strategi marketing. Sebanyak 60% pengguna internet juga mengaku cenderung mengklik hasil pencarian yang memiliki gambar. Itu mengapa konten visual 32% lebih dipilih sebagai medium marketing. Bandingkan dengan blog (27%), video (24%), live video (9%), ataupun podcast (1%).

Namun, Anda juga perlu tahu bahwa format gambar ikut mempengaruhi performa website. Terutama dalam hal waktu loading atau yang lebih familiar disebut page load speed.

Format, pixel, dan resolusi gambar menentukan besarnya ukuran gambar. Semakin rapat pixel sebuah gambar dan besar resolusinya, maka semakin besar ukuran gambar. Tentu saja gambar yang besar akan lebih lama untuk dimuat. Itu mengapa gambar yang demikian bisa mempengaruhi kecepatan loading sebuah website.

Sayangnya, dampak buruk tidak berhenti sampai di situ.

Di tahun 2010, Google secara resmi mengumumkan satu faktor yang dipertimbangkan dalam algoritma ranking: kecepatan. Hal ini karena Google menyadari bahwa website yang cepat dan responsif disukai oleh pengguna. Praktis, waktu loading yang lambat berdampak ke SEO atau ranking di mesin pencarian.

Tanpa website yang cepat, besar kemungkinan pula untuk pengunjung meninggalkan website. Hal ini tentunya merugikan pemilik website, baik dari sisi bounce rate maupun conversion.

Baca juga:

Semakin lama waktu yang dibutuhkan website untuk termuat sempurna, semakin besar bounce rate website tersebut. Dalam sebuah percobaan, website dengan waktu load dua detik memiliki rerata bounce rate sebesar 9%. Angka ini melonjak tajam pada website dengan waktu load lima detik, yaitu 38%.

Dari sisi conversion, sebanyak 79% pelanggan online shopping merasa kapok dengan website ecommerce yang lamban atau bermasalah.

Statistik di atas tentunya sudah cukup menjelaskan bagaimana pentingnya gambar yang tepat di sebuah website.

Baca Juga: Pentingnya Memilih Foto untuk Desain Website

Jenis-jenis Format Gambar untuk Website

Terdapat berbagai macam format gambar untuk website. Di bawah ini, kami membahas macam-macam format gambar yang banyak digunakan di website.

1. Vektor

Vektor adalah jenis grafis yang dibuat dari sambungan garis atau kurva. Sambungan ini kemudian membentuk berbagai bentuk seperti poligon atau bangun segi-n.

Jenis gambar yang satu ini sangat fleksibel. Ia tidak akan kehilangan kualitas dan ketajaman gambar, meskipun diperbesar sekian kali lipat. Vektor juga sangat mudah diedit dan memiliki ukuran file yang cukup kecil. Hal ini tentu sangat menguntungkan bagi grafik desainer.

Meski begitu, vektor tidak bisa digunakan langsung di web. Hal ini karena format vektor tidak mampu menjaga konsistensinya di berbagai jenis mesin pencari. Untuk dapat digunakan, grafik vektor perlu diubah dalam format raster.

2. Raster

Raster adalah grafik yang dibuat dari kumpulan kotak membentuk pixel. Berbeda dengan vektor, raster cukup konsisten dilihat dari berbagai mesin pencarian. Itu mengapa Anda pasti familiar dengan turunan dari format gambar ini.

Meski konsisten dilihat, gambar raster perlu dioptimasi untuk web. Ini karena gambar raster cenderung memiliki ukuran file yang besar. Sesuatu hal yang perlu dihindari jika tak ingin performa website menurun.

Berikut adalah macam-macam format turunan dari raster.

3. GIF

Graphic Interchange Format atau GIF (baca: JIF) adalah format gambar yang cukup populer. Format ini terdiri dari 8-bit per pixel atau terbatas pada 256 warna dalam satu gambar. Dengan warna yang terbatas, format ini kurang cocok untuk menampilkan visual yang detail. Sebagai gantinya, format ini sering dipakai memunculkan animasi singkat di website.

4. JPEG / JPG

JPEG atau Joint Photographic Experts Group adalah format yang paling umum dipakai. Gambar berformat JPEG dipakai oleh 72,5% website di seluruh dunia. Format gambar ini mampu menampilkan berbagai warna dan gradient. Bisa dikatakan format ini mampu menampilkan ilustrasi visual dengan cukup detail.

Baca Juga: Tips Desain Website

Selain itu, format JPEG cukup terkenal karena dapat dikompresi. Cara ini digunakan untuk mengecilkan ukuran file dengan sedikit mempengaruhi kualitas gambar, seperti Progressive JPEG. Meski begitu, disarankan untuk tidak menggunakan format JPEG untuk gambar yang sangat detail seperti desain tipografi. Karena kemungkinan besar detail tersebut akan menjadi blur.

Kekurangan lain dari JPEG adalah tidak mampu memuat latar belakang transparan.

Baca Juga: Warna Efektif Desain Website

5. PNG

PNG atau Portable Network Graphics adalah yang memiliki lossless compression. Artinya, meski gambar dikompresi, kualitasnya tetap mendekati gambar sebelum dikompresi. Karenanya format ini cocok dimanfaatkan untuk menampilkan gambar yang detail seperti logo, tipografi, screenshot tulisan, dan sebagainya.

Format gambar PNG juga mendukung latar belakang transparan. Hal ini cocok dimanfaatkan untuk membuat logo.

Baca Juga: WebP: Format Gambar Digital yang Bisa Mempercepat Website

Cara Mengoptimalkan Gambar untuk Website

Seperti yang disampaikan sebelumnya, gambar berformat raster perlu dioptimalisasi sebelum diunggah ke website. Ini bisa dilakukan dengan memperkecil resolusi gambar atau dengan mengurangi ukuran file gambar itu sendiri.

Jika Anda terlanjur mengunggah gambar tanpa optimasi, maka Anda perlu mengecek ulang gambar mana yang perlu diganti. Untuk itu, Anda bisa menggunakan GTMetrix atau Google PageSpeed Insight. Cukup masukkan alamat website, tunggu sebentar, dan daftar gambar yang kurang optimal akan keluar.

Di bawah ini adalah tampilan hasil analisis website Niagahoster oleh GTMetrix.

Baca Juga : Cara Mudah Cek Website Dengan GTMetrix

Setelah mengetahui gambar apa saja yang perlu dioptimalkan, Anda bisa memilih salah satu dari beberapa cara optimasi gambar berikut:

  • Microsoft Paint
  • Media Library WordPress
  • Kompres gambar via online
  • Smush Image Compression and Optimization

Ketiganya akan dijelaskan dengan lebih lengkap, sebagai berikut.

1. Microsoft Paint

Microsoft Paint adalah software paling versatile yang pernah ada. Program ini selalu ada di komputer berbasis operating system Windows. Lebih baik lagi, karena Anda bisa menggunakannya untuk mengoptimalkan gambar di website.

Setelah mengetahui gambar mana yang perlu dioptimalkan, Anda hanya perlu membuka gambar tersebut di program Paint.

Lalu, pilih Resize di bagian tab Home. Klik pilihan pixel dan masukkan resolusi yang diinginkan atau sesuai dengan rekomendasi GT Metrix.

Setelah itu unggah gambar yang sudah diubah ke website untuk menggantikan gambar yang kurang optimal.

Baca Juga: Trend Web Design

2. Media Library WordPress

Mengoptimasi gambar di software offline mungkin dianggap kurang efisien. Anda perlu berulang kali mengunggah untuk menggantikan gambar yang kurang pas. Jika Anda sepakat dengan pikiran ini, mungkin Anda perlu mengoptimasi gambar langsung dari Media Library di WordPress.

Anda hanya cukup membuka tab Media di Dashboard WordPress. Lalu klik dua kali di gambar yang diinginkan dan klik pilihan Edit Image di bawah gambar.

Anda akan mendapati tampilan seperti di atas.

Di bagian ini, Anda bisa memotong (crop) gambar sesuai dengan keinginan. Caranya dengan mengklik tombol paling kiri di bagian atas gambar. Anda bisa juga hanya mengurangi resolusi gambar dengan memasukkan angka dan mengklik tombol Scale.

Anda juga bisa mengatur di mana saja perubahan ini ditampilkan: semua ukuran gambar, thumbnail saja, atau semua gambar kecuali thumbnail.

3. Kompres gambar via online

Terkadang, optimasi gambar bukan sekedar memperkecil resolusi gambar. Ketika dilakukan pun, masih ada kemungkinan gambar memiliki ukuran file yang besar. Itu artinya, Anda perlu melakukan langkah tambahan, yaitu mengkompres gambar.

Gambar pada umumnya memiliki metadata yang tersembunyi. Metadata ini memuat informasi tambahan seputar jarak fokus kamera, profil warna, serta lokasi dan waktu pengambilan gambar.

Informasi ini hanya penting bagi fotografer. Bagi pengguna lain, informasi ini hanya akan menambah ukuran file tanpa efek yang signifikan. Maka dari itu, lebih baik metadata ini dihapus.

Untuk menghapusnya, Anda bisa menggunakan berbagai pilihan kompresi gambar yang tersedia online. Akan tetapi, dari segi efektivitas dan user interface kami merekomendasikan Anda untuk memakai TinyPNG atau TinyJPG. Cukup unggah gambar yang diperlukan, biarkan software bekerja sejenak, dan Anda tinggal unduh ulang gambar yang sudah selesai dioptimasi.

Demi menghemat waktu Anda bisa mengunggah maksimal 20 gambar sekaligus.

Baca Juga: Kesalahan Umum Pembuatan Desain Website

4. Smush Image Compression and Optimization

Smush adalah plugin WordPress yang mempermudah optimasi gambar di website. Plugin ini mampu mengoptimasi gambar tanpa mengorbankan kualitas gambar itu sendiri.

Anda juga tak perlu khawatir dengan gambar yang Anda unggah di web. Karena dengan sekali aktivasi, plugin ini secara otomatis mengoptimalkan gambar Anda sesuai pengaturan. Dengan fitur Bulk Smush, Anda juga bisa mengoptimasi 50 gambar sekaligus.

Selain itu, Smush juga mampu menunjukkan gambar-gambar spesifik yang perlu dioptimasi. Untuk mengaktifkan fitur ini, Anda cukup menggeser pilihan Detect and show incorrectly sized images hingga berwarna biru.

Setelah fitur tersebut aktif, Anda bisa mengevaluasi gambar di web Anda secara live.

Fitur tersebut akan memunculkan notifikasi berwarna kuning. Jika diklik, terdapat rekomendasi optimasi gambar beserta ukurannya. Anda bisa mengganti resolusi gambar secara manual dengan cara-cara yang disebutkan sebelumnya.

Namun, jika Anda memiliki Smush Pro, plugin ini akan mengoptimasi gambar secara otomatis.

Baca juga:

Kesimpulan

Gambar bukanlah elemen remeh dalam website. Gambar yang kurang tepat bisa memperlambat waktu loading website. Akibatnya, Anda bisa kehilangan ranking di mesin pencarian, kehilangan pengunjung dalam sekejap, bahkan kehilangan transaksi dari calon pelanggan.

Untuk itu Anda perlu menggunakan format gambar yang tepat di website. Berikut contekannya:

  • GIFs ⎼ cocok untuk menambahkan animasi singkat, cara menarik untuk mengambil perhatian pembaca web.
  • JPEG / JPG ⎼ pas untuk ilustrasi yang kaya warna.
  • PNG ⎼ pilihan yang tepat untuk menampilkan logo, screenshot yang detail dan tipografi.

Selain memperhatikan format gambar, Anda juga perlu mengoptimasi gambar untuk hasil yang lebih maksimal. Pada prinsipnya, ada dua cara untuk optimasi gambar: mengubah resolusi dan mengkompresi gambar. Anda bisa melakukan keduanya dengan berbagai cara yang kami ulas di atas.

Kini, tak ada lagi alasan untuk mempunyai website yang lamban dan ketinggalan di sisi SEO. Ingat, gambar adalah koentji.

Baca Juga: Cara Memasukkan dan Mengatur Gambar di HTML

Imas Indra A detail-oriented and innovative writer. She developed her creative talent and expertise after years of practice in journalism, academic research, essay writing, and blogging. Currently in Niagahoster, she boosted more people to #BuildSuccessOnline using SEO and content marketing strategies. When it comes to writing, her goal is to make complex topics enjoyable.

Leave a Reply

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