Foto adalah salah satu elemen visual paling berpengaruh di sebuah website. Foto yang ditampilkan dengan baik bisa langsung menarik perhatian pengunjung, membangun kepercayaan, dan mendorong mereka untuk terus menjelajahi halamanmu. Sebaliknya, foto yang ditampilkan dengan cara yang salah bisa merusak keseluruhan tampilan website, memperlambat loading, dan bahkan membuat pengunjung langsung kabur sebelum sempat membaca isinya.
Masalahnya, banyak kesalahan dalam menampilkan foto di website yang terjadi tanpa disadari, baik oleh pemula maupun yang sudah lama berkecimpung di dunia web. Artikel ini akan membahas kesalahan-kesalahan paling umum tersebut supaya kamu bisa menghindarinya sejak awal.
Menggunakan Ukuran File yang Terlalu Besar
Ini adalah kesalahan nomor satu yang paling sering terjadi dan paling berdampak buruk pada performa website. Foto dengan ukuran file yang terlalu besar, misalnya foto hasil jepretan kamera DSLR yang langsung diupload tanpa dikompresi dulu, bisa membuat halaman website menjadi sangat lambat untuk dimuat.
Pengguna internet sekarang tidak sabar. Riset menunjukkan bahwa mayoritas pengunjung akan meninggalkan sebuah website jika halamannya butuh lebih dari tiga detik untuk loading. Dan kecepatan loading adalah salah satu faktor penting yang mempengaruhi ranking di Google, sehingga kesalahan ini tidak hanya merugikan pengalaman pengguna tapi juga performa SEO website kamu.
Solusinya adalah selalu kompres foto sebelum diupload ke website. Tools seperti TinyPNG, Squoosh, atau fitur kompresi bawaan di berbagai CMS bisa mengurangi ukuran file secara signifikan tanpa mengorbankan kualitas visual yang terlihat di layar.
Memakai Format File yang Tidak Tepat
Tidak semua format foto cocok untuk semua kebutuhan. Banyak yang masih menggunakan PNG untuk semua jenis foto tanpa mempertimbangkan apakah itu pilihan yang paling efisien.
Secara umum, JPEG cocok untuk foto-foto dengan banyak variasi warna seperti foto produk atau foto lifestyle karena ukuran filenya lebih kecil dengan kualitas yang tetap baik. PNG lebih tepat digunakan untuk gambar yang butuh background transparan atau grafis dengan detail tajam seperti logo dan ikon. Sementara format WebP adalah pilihan modern yang memberikan kualitas setara JPEG dengan ukuran file yang jauh lebih kecil, dan sudah didukung oleh hampir semua browser modern.
Mulai pertimbangkan migrasi ke WebP untuk foto-foto di website kamu. Dampaknya terhadap kecepatan loading sangat signifikan, terutama di halaman yang memuat banyak gambar sekaligus.
Tidak Mengoptimalkan Alt Text
Alt text adalah deskripsi teks yang ditambahkan pada setiap elemen gambar di kode HTML. Banyak yang mengabaikan bagian ini karena tidak terlihat secara visual oleh pengunjung biasa. Padahal alt text punya dua fungsi penting yang tidak boleh diremehkan.
Pertama, alt text membantu search engine memahami isi gambar yang kamu tampilkan. Google tidak bisa “melihat” foto seperti manusia, jadi deskripsi teks inilah yang menjadi petunjuknya. Alt text yang ditulis dengan baik dan mengandung kata kunci yang relevan bisa membantu foto kamu muncul di hasil pencarian Google Images dan meningkatkan visibilitas website secara keseluruhan.
Kedua, alt text penting untuk aksesibilitas. Pengguna dengan gangguan penglihatan yang menggunakan screen reader bergantung pada alt text untuk memahami konten visual di sebuah halaman. Mengabaikan alt text berarti kamu menutup akses bagi sebagian penggunamu.
Menampilkan Foto dengan Dimensi yang Tidak Proporsional
Foto yang tampil terlalu lebar, terpotong di bagian penting, atau terlihat gepeng dan meregang adalah masalah tampilan yang langsung merusak kesan profesional sebuah website. Ini biasanya terjadi karena foto dipaksakan masuk ke dalam kontainer dengan ukuran tertentu tanpa memperhatikan rasio aspek aslinya.
Dalam CSS, solusinya cukup sederhana. Gunakan properti object-fit: cover untuk memastikan foto mengisi area yang tersedia dengan tetap menjaga proporsionalnya, atau object-fit: contain jika kamu ingin seluruh foto terlihat tanpa ada bagian yang terpotong. Pahami juga konsep responsive image supaya foto yang ditampilkan menyesuaikan diri dengan ukuran layar pengguna, baik di desktop maupun mobile.
Tidak Menggunakan Lazy Loading
Lazy loading adalah teknik di mana gambar hanya dimuat saat pengunjung mulai menggulir halaman mendekati posisi gambar tersebut, bukan semuanya dimuat sekaligus saat halaman pertama kali dibuka. Ini sangat berguna untuk halaman yang memuat banyak foto seperti galeri, portofolio, atau halaman blog dengan banyak ilustrasi.
Tanpa lazy loading, semua gambar di halaman dimuat bersamaan saat pengguna membuka halaman, meskipun mereka mungkin tidak pernah menggulir ke bawah untuk melihatnya. Ini membuang bandwidth dan memperlambat waktu loading awal yang sangat krusial.
Mengaktifkan lazy loading di HTML sekarang sangat mudah, cukup tambahkan atribut loading=”lazy” pada tag gambar. Perubahan kecil ini bisa memberikan dampak besar pada performa halaman, terutama yang memiliki banyak konten visual.
Mengabaikan Tampilan di Layar Mobile
Foto yang terlihat sempurna di layar laptop belum tentu tampil dengan baik di layar smartphone. Ini adalah kesalahan yang masih sering diabaikan, padahal mayoritas pengguna internet di Indonesia mengakses website lewat perangkat mobile.
Pastikan setiap foto yang ditampilkan sudah diuji di berbagai ukuran layar. Gunakan teknik responsive images dengan atribut srcset untuk menyajikan versi foto yang berbeda ukurannya tergantung pada perangkat yang digunakan pengunjung. Dengan begitu, pengguna mobile tidak perlu mendownload foto beresolusi tinggi yang memang dirancang untuk layar desktop besar.
Kuasai Frontend Development di DUMET School
Semua teknik yang dibahas di atas, mulai dari optimasi gambar, penggunaan CSS yang tepat, implementasi lazy loading, hingga membangun tampilan yang responsif di semua perangkat, adalah bagian dari kemampuan seorang frontend developer yang kompeten.
DUMET School menyediakan kursus Frontend Developer yang mengajarkan semua skill tersebut secara terstruktur dan praktis. Kamu akan belajar HTML, CSS, JavaScript, dan berbagai teknik optimasi modern yang langsung bisa diterapkan dalam proyek nyata.
Dengan instruktur berpengalaman yang aktif di industri dan kurikulum yang terus diperbarui mengikuti standar web terkini, DUMET School adalah tempat yang tepat untuk membangun fondasi frontend development yang kuat.
Daftarkan dirimu sekarang di DUMET School dan mulai bangun website yang tidak hanya cantik secara visual, tapi juga cepat, efisien, dan nyaman digunakan oleh semua orang.