Alwan RosyidiBagi sebuah website, konten visual memainkan peran penting dalam meningkatkan pengalaman pengguna dan kesan mereka terhadap suatu merek / bisnis. Untuk itu menciptakan konten visual yang menarik di website sangatlah penting.
Hasil sebuah studi menyimpulkan bahwa sekitar 37% manusia adalah penikmat visual. Gambar yang mereka lihat dapat menceritakan kisah yang meyakinkan, yang dapat menyampaikan aspirasi dan idealisme mereka. Di bidang web, e-commerce juga telah tumbuh pada tingkat eksponensial, yang menggunakan gambar sebagai bagian besar dalam struktur websitenya.
Selain itu, gambar juga banyak membentuk inti dari website atau portofolio yang merupakan bagian dari bidang kreatif. Mengingat fakta bahwa tidak ada batasan jumlah gambar yang dapat Anda upload dalam satu halaman web, web designer cenderung bebas meng-input jumlah gambar yang mereka gunakan. Bahkan, gambar yang dimasukkan tidak jarang lebih dari 65% konten web. Hasil ini dapat dilihat di internet saat ini, dengan banyaknya website yang menggunakan citra visual yang menakjubkan untuk memandu perjalanan pengguna melalui website mereka.
Yang ingin kami tekankan adalah, berapa banyak dari Anda yang benar-benar memperhatikan optimasi konten gambar yang Anda gunakan di website? Dan mengapa itu penting?
Pertama-tama, kami akan jelaskan pentingnya optimasi konten gambar bagi website. Kami yakin sebagian besar dari Anda menyadari fakta bahwa gambar dapat membuat halaman web menjadi berat. Akibatnya, semakin berat halaman web, semakin banyak waktu yang diperlukan untuk memuat, yang mungkin menyebabkan peningkatan tingkat pantulan laman web. Untuk meminimalkan ini, kita perlu melihat lebih dekat pada optimasi gambar yang kita gunakan.
Optimasi Konten Website
Untuk membantu Anda, kami telah ringkaskan lima cara terbaik untuk optimasi konten gambar di website, agar kinerja website dan SEO semakin optimal.
Gambar yang di-crop
Memotong gambar yang Anda gunakan ke dimensi optimal memberi nilai lebih dari sekadar daya tarik visual. Namun karena gambar terdiri dari piksel, dan setiap piksel membawa data gambar tertentu yang bisa menambah berat gambar ketika dimuat. Sederhananya, semakin banyak piksel dalam gambar Anda, semakin berat gambarnya. Dengan memotong gambar, itu artinya Anda sudah mencoba menghilangkan piksel sebanyak mungkin yang secara langsung mengurangi berat gambar.
Selain itu, Anda perlu mengubah ukuran gambar asli sesuai dengan ukuran tampilan di halaman website. Misalnya, katakanlah Anda menggunakan gambar dengan dimensi 1000×800 piksel. Jika ukuran layar untuk gambar yang sama di website adalah 600×400 piksel, maka Anda perlu mengubah ukuran gambarnya sebelum mengunggahnya.
Kompresi Gambar
Kompresi gambar adalah praktik standar sebelum mengunggahnya ke website. Namun, Anda juga perlu perhatikan jenis kompresi yang Anda gunakan, karena dapat mempengaruhi pengalaman pengguna. Ada dua jenis kompresi utama yang digunakan oleh setiap jenis gambar, yaitu kompresi lossy dan lossless.
Kompresi lossy bekerja dengan memanfaatkan bagaimana mata manusia mempersepsikan gambar. Ini dilakukan dengan menghilangkan data piksel yang memiliki komposisi yang sama atau mirip. Kehilangan data ini sering kali tidak terlalu mencolok kecuali diperbesar hingga batas tertentu.
Di sisi lain, kompresi lossless hanya memampatkan semua data gambar, yang hasilnya memiliki tingkat kompresi yang sedikit lebih rendah daripada kompresi lossy. Namun karena tidak ada data piksel yang dihapus, gambar akan lebih jernih dan terperinci, bahkan ketika diperbesar.
Gambar dengan kompresi lossy paling cocok untuk website yang menggunakan konten tekstual atau infografis sederhana, tanpa banyak penekanan pada konten visual. Contohnya adalah website milik pemerintah, blog (yang tidak memiliki materi iklan), dan website suatu artikel penelitian.
Di sisi lain, gambar dengan kompresi lossless biasanya digunakan di website yang sangat berat, yang membutuhkan gambar dengan kualitas jernih, bahkan ketika diperbesar. Contohnya adalah website seperti e-commerce, travelling, dan media sosial.
Anda dapat menggabungkan dua teknik kompresi ini untuk mendapatkan gambar yang lebih tajam dengan tingkat kompresi yang lebih tinggi.
Jenis File yang Tepat
Setelah mengedit gambar yang akan Anda gunakan di website, Anda harus memilih jenis file yang paling cocok. Jenis file yang dipilih tergantung pada jenis kompresi yang Anda butuhkan, dan penggunaan akhir dari gambar tertentu. Ada tiga jenis file gambar yang biasanya digunakan, yaitu JPEG, PNG, dan GIF.
JPEG adalah singkatan dari Joint Photographic Experts Group. Ini adalah format yang paling umum digunakan. Alasannya karena JPEG menawarkan ketajaman warna tertinggi, dan mendukung kompresi lossy dan lossless. Anda dapat dengan mudah menyesuaikan kualitas dan ukuran file dalam format ini, sesuai yang Anda butuhkan. JPEG biasanya digunakan untuk gambar kompleks dengan banyak detail.
PNG, singkatan dari Portable Network Graphics, adalah jenis gambar yang menghasilkan detail yang kaya dan tajam. Namun jenis file ini hanya menggunakan kompresi lossless. Karena itu memiliki ukuran file yang jauh lebih tinggi. Oleh karenanya, format ini lebih sesuai untuk logo dan gambar sederhana.
GIF, kependekan dari Graphics Interchange Format, memiliki kedalaman warna yang sangat rendah, dibatasi hanya 256 warna, dan juga hanya menggunakan kompresi lossless. Format ini dapat mendukung animasi. Oleh karena itu, GIF digunakan untuk gambar lingkaran animasi. Biasanya digunakan terutama di website yang menjadikan visual sebagai poin paling penting untuk berkomunikasi dengan pemirsa. Contohnya website untuk bisnis media digital dan tutorial online.
Hapus Kelebihan Data
Dalam banyak kasus, saat gambar diambil akan ada banyak data yang disimpan bersama dengan gambar. Ini disebut metadata. Sebagian besar metadata berupa informasi seperti geolokasi, pembuatan dan model kamera, ISO, shutter speed, aperture, dll. Semua informasi ini menambah berat gambar. Jadi disarankan untuk menghapus semua metadata yang berlebihan. Anda dapat menggunakan beberapa tool online gratis untuk melakukan ini.
Raster Vs. Vektor
Saat berkecimpung dengan gambar digital, Anda akan banyak berurusan dengan dua jenis dasar gambar grafis , yaitu raster dan vector. Pengguna akhir Anda akan menentukan jenis gambar yang Anda gunakan.
Gambar yang menggunakan grafik raster dibentuk oleh piksel, yang menunjukkan tingkat detail yang tinggi tanpa memperhatikan kompleksitas gambar. Gambar ini cenderung menghasilkan gambar yang memiliki ukuran file lebih tinggi dan rentan buram ketika diperbesar.
Di sisi lain, gambar vektor menggunakan jalur seperti titik, garis, dan poligon untuk mencitrakan gambar. Gambar vektor adalah resolusi independen, yang artinya gambar-gambar ini tidak buram saat diperbesar. Gambar jenis ini juga memiliki ukuran file yang lebih kecil, karena tidak menggunakan piksel. Grafis vektor paling cocok untuk gambar geometrik sederhana seperti logo dan ikon.
Demikian lima optimasi konten yang perlu Anda lakukan, untuk memastikan bahwa konten visual Anda optimal bagi web. Sebagai catatan, Anda juga harus pastikan bahwa dengan menyertakan semua tag gambar yang tepat dan teks alt, untuk memudahkan mesin pencari memahami apa yang ada pada gambar. Semoga membantu!
Ahmad Mufid
Catra Wardhana