Tips Mengoptimalkan Penggunaan Gambar Pada Website

Tips Mengoptimalkan Penggunaan Gambar Pada Website

Kemarin kita sudah membahas sedikit beberapa tips dalam mengoptimalkan penggunakan font dan warna pada website. Nah, salah satu elemen lainnya yang perlu diperhatikan adalah gambar nih teman – teman.


Tentunya bisa kita lihat hampir semua website di dunia pasti ada gambarnya yah? (kecuali website pertama di dunia yang memang hanya teks saja hehe). Gambar memang elemen lain yang sangat penting pada proses pembuatan website. Karena itulah ada profesi yang kita kenal sebagai Desainer  Grafis, betul? :)


Tetapi terlepas dari “seberapa bagus” gambar yang dibuat (karena tentunya itu kembali lagi ke penilaian subjektif masing – masing orang, serta keahlian gambarnya), yang tidak kalah penting dalam pembuatan website adalah bagaimana kita bisa menampilkan gambar tersebut secara OPTIMAL. Hmm.. maksudnya gimana nih?


Pastinya percuma dong walaupun gambar yang kita buat sudah cetar membahana badai (ala Syahrini), eh ternyata pas ditampilkan di website, tampilannya tidak sesuai harapan? (misalnya terpotong, atau bahkan tidak tampil karena terlalu berat). Nah, inilah yang dimaksud kita harus tahu bagaimana mengoptimalkan gambar di website.


Ini dia beberapa tips dasarnya teman – teman!


1. Atur Resolusi Gambar (Ukuran Panjang & Lebar)  Sesuai Dengan Yang Telah Ditentukan

Aturan pertama (dan bisa dibilang paling  penting) adalah selalu gunakan gambar sesuai dengan resolusi panjang & lebar yang telah ditentukan oleh website kita. Mengapa demikian?


Karena tentunya website yang baik yang telah kita buat (ataupun dibuat oleh jasa pembuatan website rekanan kita) telah diperhitungkan secara detail mengenai ukuran gambar yang paling optimal agar tampilan website tersebut tetap menarik.


Misalnya untuk tampilan elemen Slideshow (gambar bergerak yang biasa berada di halaman pertama website), biasanya hampir selalu bertipe landscape (persegi panjang memanjang ke samping), nah gunakan gambar yang bertipe landscape pula untuk gambar slideshow ini. Tentunya sekali lagi dengan menyesuaikan ukuran panjang & lebar yang telah ditentukan sebelumnya oleh jasa pembuatan website rekanan kita.

Gampang nya begini. Coba kita bayangkan gambar yang mestinya landscape, tetapi kita taruh gambar yang bentuknya portrait (memanjang ke bawah).


Hm… besar kemungkinan gambar tersebut tidak akan memenuhi bingkai landscape yang telah ditentukan, dan pastinya akan ada bagian gambar yang terpotong. Tentunya tidak enak dilihat bukan?

 

 

2. Lakukan Kompresi Gambar Seminimal Mungkin Tanpa  Mengurangi Kualitas Gambar

Kompresi gambar juga merupakan hal yang cukup penting dalam pembuatan website. Hal ini berhubungan dengan kenyamanan para pengunjung website dalam menjelajah website kita. Tentunya gambar yang “berat” (karena ukuran file yang besar) akan menyebabkan pengunjung website harus menunggu sedikit lebih lama sampai gambar tersebut ditampilkan seluruhnya. Yah kalau hanya satu gambar mungkin tidak masalah, tetapi jika dalam satu halaman ada lebih dari 10 gambar? Wah… pasti bikin pengunjung bete dan malah berpindah ke lain website nantinya.  :)


Ada banyak cara yang dapat dilakukan untuk melakukan kompresi gambar. Salah satu cara terpraktis adalah menggunakan fitur “Save  For Web” pada aplikasi Adobe  Photoshop. Atau bisa juga dengan cara menggunakan format .webp, yaitu format gambar yang dikhususkan untuk penggunaan di dalam website. Dalam artikel – artikel selanjutnya, akan coba kita bahas yah teman – teman bagaimana cara menggunakan fitur – fitur ini.


Satu hal yang pasti, kompresi gambar akan secara langsung mempengaruhi performa website kita. Jadi, pastikan hal ini diperhatikan baik – baik yah, atau paling tidak konsultasikan dengan jasa pembuatan website rekanan yang telah kita pilih.

 

 

3.  Jangan  Pernah “MEMAKSA” Gambar

Pernah melihat gambar wajah orang yang “gepeng”?? Kira – kira kalau ditanya bagaimana perasaan kita saat melihat gambar seperti itu bagaimana? Pastinya rada – rada “ewwww” begitu yah… (apalagi kalau kita tanya model gambarnya langsung hehe).

Yapp, ini dia hal lain yang sering kali kita temukan pada gambar di website, dimana banyak gambar di”paksa” untuk memenuhi bingkai gambar yang disediakan. Misalnya gambar yang mestinya ukurannya hanya 100 x 100, tapi dipaksa menjadi 1000 x 2000. Kebayang kan gambar yang tadinya kecil, tapi dipaksa jadi besar, lalu di”Tarik” kesana sini. Alhasil gambarnya “gepeng” dan “pecah” (terlihat menjadi buram ataupun tidak jelas).


Nah, solusinya ada beberapa macam nih:

  • Gunakan solusi nomor (1) di atas, dimana kita membuat ataupun menggunakan gambar lain dengan resolusi sama dengan yang telah ditentukan oleh jasa pembuatan website rekanan kita
  • Komunikasikan dengan jasa pembuatan website kita untuk mengubah styling website yang diaplikasikan. Jadi daripada gambar tersebut di”paksa”, lebih baik bingkainya yang diperkecil, tampilan gambarnya tidak dipaksa memenuhi bingkai, ataupun gambarnya yang dipotong otomatis oleh styling websitenya. Tidak ada jawaban pasti yang mana yang lebih baik, karena kembali lagi ini tergantung kebutuhan website kia sendiri


Satu hal yang pasti adalah jangan pernah me”maksa” gambar, apapun alasannya. Karena seperti kata pepatah, apapun yang dipaksakan itu tidaklah baik, seperti layaknya cinta (eaaaa)


 

4. Hindari Menggunakan File .GIF Dengan Animasi  (Kecuali Pada Kasus Tertentu)

Terakhir adalah penggunaan gambar animasi. Memang tujuannya bisa berbeda – beda kenapa gambar animasi ini diperlihatkan, tetapi pada dasarnya, gambar .gif secara keseluruhan akan memperlambat kinerja website kita. Walaupun tidak secara signifikan, tetapi semakin besar ukuran gambar .gif yang digunakan, akan semakin signifikan penurunan kinerja website yang terjadi.


Tentunya hal ini kembali lagi ke pertimbangan kita sebagai pemilik website. Apabila memang harus ada efek animasi – animasi tertentu pada website, usahakan hal tersebut menggunakan javascript (walaupun mungkin dibutuhkan waktu dan biaya yang lebih besar). Hanya gunakan gambar .gif dengan animasi jika memang diperlukan.



Oke teman – teman, itu dia 4 tips dasar bagaimana kita bisa mengoptimalkan penggunaan gambar di website kita. Ingat, bahwa gambar merupakan salah satu elemen penting dalam website. Jangan sampai justru karena penggunaan gambar yang kurang baik, malah membuat tampilan ataupun kesan website kita menjadi menurun di mata para pengunjung website kita yah.

Semoga bermanfaat! :)