Gambar hampir selalu menjadi bagian terberat dari sebuah halaman web.
Gambar juga sering kali menjadi elemen terbesar yang dilihat pengunjung pertama kali, sehingga kecepatan pemuatannya menentukan seberapa cepat halaman Anda terasa siap digunakan.
Artikel ini membahas dua sisi yang sama pentingnya: bagaimana memilih gambar yang benar-benar bekerja untuk halaman Anda, dan bagaimana mengoptimalkannya secara teknis agar tidak memperlambat website.
Bagian 1: Prinsip memilih gambar
1. Setiap Gambar Memiliki Tujuan
Dalam desain, prinsip yang sering diulang adalah bahwa lebih sedikit biasanya lebih baik. Prinsip ini juga berlaku untuk gambar.
Gambar seharusnya melakukan lebih dari sekadar mengisi ruang. Sama seperti teks yang menyampaikan informasi melalui pilihan kata, gambar adalah alat komunikasi tersendiri.
Jika dua gambar menyampaikan pesan yang sama, hilangkan salah satunya. Setiap gambar sebaiknya menceritakan hal yang berbeda.
Gambar juga tidak harus berupa foto. Ilustrasi vektor, infografis, diagram, dan grafik data sering kali menyampaikan informasi lebih jelas daripada fotografi, terutama untuk menjelaskan proses atau perbandingan.
2. Gambar Harus Berbaur Dengan Konteks Sekitarnya
Konteks halaman web adalah topiknya. Berbagai topik akan membangkitkan emosi tertentu bagi pengunjung. Teks website (copywriting) saja dapat merangsang emosi tertentu, tetapi jika gambar yang ditambahkan mewakili emosi yang tidak tepat, pengalaman pengguna bisa saja menjadi tidak nyaman.
Inilah yang harus diperhatikan oleh banyak desainer web. Bahkan pemilihan warna dan bentuk dalam desain grafis vektor dapat disalahartikan, yang kemudian menyebabkan konflik antara nada yang diinginkan dan pesan konten yang disampaikan.
Gambar itu sebenarnya bisa lebih berdampak dibanding dengan teks. Desainer mempelajari cara untuk meningkatkan produktivitas pengguna dengan memasukkan simbol yang dirancang dengan cermat. Oleh karena itu, optimasi gambar dalam website sangat penting untuk diperhatikan.
Bagian 2: Optimasi teknis
3. Memilih format file yang tepat
Format file adalah keputusan yang paling berpengaruh dan paling sering diabaikan.
WebP menghasilkan ukuran file sekitar dua puluh hingga tiga puluh persen lebih kecil dibandingkan JPEG pada kualitas visual yang setara, dan kini didukung oleh seluruh browser modern. Ini sebaiknya menjadi pilihan utama Anda untuk foto.
AVIF menghasilkan file yang lebih kecil lagi, sering kali hingga separuh ukuran JPEG. Dukungannya kini sudah luas, meskipun sebaiknya tetap disediakan format cadangan.
SVG digunakan untuk logo, ikon, dan ilustrasi. Karena berbasis vektor, ukurannya sangat kecil dan tetap tajam pada layar dengan resolusi berapa pun.
PNG hanya diperlukan ketika Anda membutuhkan latar transparan dan SVG tidak memungkinkan.
JPEG masih berfungsi, tetapi kini lebih tepat diperlakukan sebagai cadangan daripada pilihan pertama.
4. Menyesuaikan ukuran dengan kebutuhan
Gambar selebar 1920 piksel tidak perlu dimuat pada layar ponsel selebar 400 piksel. Namun inilah yang terjadi pada sebagian besar website.
Website yang dibangun dengan benar menyediakan beberapa versi dari gambar yang sama, lalu membiarkan browser memilih ukuran yang paling sesuai dengan perangkat pengunjung. Teknik ini disebut responsive images.
Sebagai patokan, sebagian besar gambar konten sebaiknya berada di bawah 200 KB. Gambar utama di bagian atas halaman dapat sedikit lebih besar. Gambar berukuran lebih dari 1 MB hampir selalu menandakan ada yang perlu diperbaiki.
5. Kompresi tanpa mengorbankan kualitas
Sebagian besar gambar dapat dikompresi jauh lebih banyak daripada yang dikira, tanpa perbedaan yang terlihat oleh mata.
Kompresi pada tingkat kualitas delapan puluh persen umumnya tidak dapat dibedakan dari aslinya, tetapi menghasilkan file yang jauh lebih ringan.
Anda dapat melakukannya secara manual sebelum mengunggah, atau mengaturnya agar berjalan otomatis melalui CMS atau layanan pengiriman gambar. Untuk website yang kontennya sering diperbarui, cara otomatis jauh lebih dapat diandalkan, karena tidak bergantung pada kedisiplinan setiap orang yang mengunggah gambar.
6. Lazy loading
Gambar yang berada jauh di bawah layar tidak perlu dimuat sebelum pengunjung menggulir ke sana.
Lazy loading menunda pemuatan gambar tersebut hingga benar-benar dibutuhkan, sehingga halaman pertama terbuka jauh lebih cepat.
Satu hal yang penting: jangan menerapkan lazy loading pada gambar utama di bagian atas halaman. Gambar itu justru yang paling ingin dilihat pengunjung lebih dulu, dan menundanya akan memperlambat kesan pertama website Anda. Kesalahan ini cukup sering terjadi. Bagian 3: Optimasi untuk pencarian dan aksesibilitas
7. Menulis alt text yang benar
Alt text adalah deskripsi teks dari sebuah gambar. Pembaca layar menggunakannya untuk menjelaskan gambar kepada pengunjung dengan keterbatasan penglihatan, dan mesin pencari menggunakannya untuk memahami isi gambar.
Tulis alt text yang menjelaskan fungsi gambar, bukan sekadar penampilannya. Untuk foto produk, sebutkan produknya. Untuk diagram, jelaskan apa yang ditunjukkannya.
Gambar yang murni dekoratif sebaiknya diberi alt text kosong, sehingga pembaca layar melewatinya alih-alih membacakan sesuatu yang tidak berguna.
Hindari mengisi alt text dengan kata kunci. Praktik ini tidak lagi membantu peringkat dan justru memperburuk pengalaman bagi pengguna yang benar-benar membutuhkannya.
Pelajari lebih lanjut tentang pendekatan aksesibilitas kami.
8. Penamaan file
Nama file seperti IMG_4021.jpg tidak memberi tahu apa pun kepada mesin pencari.
Gunakan nama yang deskriptif dan dipisahkan tanda hubung, misalnya kursi-kayu-jati-minimalis.webp. Ini adalah pekerjaan kecil yang memberi konteks tambahan tanpa biaya apa pun.
Mengapa ini penting
Optimasi gambar bukan pekerjaan kosmetik.
Pada sebagian besar website, elemen terbesar yang dimuat pertama kali adalah sebuah gambar. Google mengukur waktu pemuatan elemen tersebut melalui metrik Largest Contentful Paint, dan hasilnya memengaruhi peringkat pencarian Anda.
Artinya, pada banyak kasus, mengoptimalkan gambar adalah cara tercepat dan termurah untuk memperbaiki kecepatan website secara keseluruhan.
Pelajari lebih lanjut tentang penyebab website lambat dan bagaimana jasa SEO kami bekerja.
Kami dapat membantu meningkatkan UX website Anda
Tantangan terbesar dalam UX website bukanlah perangkat lunak atau teknologi.
Tantangannya adalah memutuskan bagaimana setiap gambar, garis, bentuk, dan warna bekerja bersama di dalam satu halaman, sehingga pengunjung dapat menyelesaikan apa yang mereka datangi tanpa berpikir keras.
Juicebox memiliki pengalaman panjang dalam proyek desain website dan desain grafis, membangun kredibilitas merek melalui kesan pertama yang tepat.
Juicebox adalah agensi digital yang berbasis di Jakarta dan Bali. Selain merancang dan membangun website, kami membantu bisnis bertumbuh melalui jasa digital marketing yang mencakup jasa SEO, Google Ads, Facebook Ads, dan jasa pembuatan artikel.
Hubungi kami untuk mendiskusikan proyek Anda.
