Pada banyak website perusahaan, gambar adalah bagian terberat dari sebuah halaman. Foto pabrik, foto tim, dan banner utama sering diunggah langsung dari kamera atau dari desainer dalam ukuran beberapa megabyte, lalu ditampilkan dalam kotak selebar beberapa ratus piksel.
Akibatnya terasa langsung: halaman lambat terbuka di koneksi seluler, calon klien menutupnya sebelum sempat membaca, dan skor Core Web Vitals Google ikut turun. Salah satu ukurannya, Largest Contentful Paint, dianggap baik bila elemen terbesar di layar pertama tampil dalam 2,5 detik, dan elemen terbesar itu sering kali adalah gambar banner.
Checklist berikut bisa dijalankan oleh tim konten dan tim web tanpa harus membangun ulang website.
1. Sesuaikan ukuran piksel dengan tempat tampilnya
Foto kamera biasanya berukuran 4000 piksel atau lebih. Untuk layar beresolusi tinggi, gambar cukup sekitar dua kali lebar tampilnya. Patokan praktis:
| Jenis gambar | Lebar yang disarankan |
|---|---|
| Banner utama selebar layar | Sekitar 1920 piksel |
| Gambar di badan artikel | 1200 sampai 1600 piksel |
| Thumbnail dan kartu produk | 400 sampai 800 piksel |
Mengecilkan dimensi adalah langkah yang paling besar pengaruhnya. Foto 4000 piksel yang diperkecil menjadi 1600 piksel hanya menyisakan sekitar seperenam jumlah pikselnya. Anda bisa melakukannya dengan alat ubah ukuran gambar yang sudah menyediakan ukuran siap pakai seperti HD 1920.
2. Pilih format yang tepat
- WebP untuk foto. Pada kualitas yang setara, ukurannya biasanya jauh lebih kecil daripada JPEG, dan sudah didukung semua browser modern.
- SVG untuk logo dan ikon, karena tetap tajam di ukuran berapa pun.
- PNG atau WebP lossless untuk grafis dengan teks, garis tajam, atau latar transparan.
- JPEG bila gambar juga akan dipakai di sistem lama yang belum menerima WebP.
Untuk mengubah format tanpa mengunggah berkas ke server pihak ketiga, pakai konversi gambar antara JPG, PNG, dan WebP.
3. Kompres dengan kualitas 75 sampai 85
Pada rentang ini, perbedaan kualitas hampir tidak terlihat di layar, sedangkan ukuran berkasnya turun drastis dibanding kualitas maksimal. Periksa hasilnya pada gambar dengan gradasi halus, seperti langit atau dinding polos, karena di situ penurunan kualitas paling cepat terlihat. Kompres gambar di browser memungkinkan Anda membandingkan hasil sebelum menyimpannya.
4. Tetapkan batas ukuran berkas
Sepakati batas yang mudah diingat tim, misalnya sekitar 200 KB untuk banner utama dan sekitar 100 KB untuk gambar di badan artikel. Batas ini bukan aturan Google, tetapi patokan yang membuat tim konten punya ukuran yang jelas sebelum mengunggah.
5. Cantumkan lebar dan tinggi gambar
Tanpa atribut width dan height, browser tidak tahu berapa ruang yang harus disiapkan, sehingga teks melompat saat gambar selesai dimuat. Pergeseran ini diukur sebagai Cumulative Layout Shift, yang dianggap baik bila tidak lebih dari 0,1.
6. Pakai lazy loading, kecuali untuk gambar utama
Atribut loading="lazy" menunda pemuatan gambar yang berada di bawah layar pertama. Jangan memasangnya pada banner utama, karena justru memperlambat elemen yang paling menentukan. Untuk banner utama, fetchpriority="high" memberi tahu browser agar memuatnya lebih dulu.
7. Sediakan beberapa ukuran dengan srcset
Dengan atribut srcset dan sizes, ponsel menerima versi kecil dan layar lebar menerima versi besar. WordPress sudah membuat beberapa versi ukuran dan atribut ini secara otomatis, tetapi hasilnya tetap bergantung pada berkas yang diunggah. Foto 8 MB dari kamera tetap menjadi beban di pustaka media, cadangan, dan di mana pun berkas aslinya dipakai.
8. Beri nama berkas dan teks alt yang jelas
Nama berkas seperti lini-produksi-kemasan-karton.webp lebih berguna daripada IMG_2034.jpg, baik untuk pencarian gambar maupun untuk tim yang mengelola pustaka media. Teks alt sebaiknya menjelaskan isi gambar dengan kalimat wajar, bukan deretan kata kunci. Teks alt juga dibacakan oleh pembaca layar bagi pengunjung dengan gangguan penglihatan.
9. Buang metadata lokasi
Foto dari ponsel sering menyimpan koordinat GPS, model kamera, dan waktu pengambilan. Untuk foto fasilitas, gudang, atau kegiatan internal, informasi lokasi ini tidak perlu ikut terpublikasi. Menyandikan ulang gambar dengan kompres gambar atau konversi gambar di Reembun sekaligus membuang metadata tersebut.
10. Ukur, lalu jadikan kebiasaan
Periksa halaman terpenting dengan PageSpeed Insights sebelum dan sesudah optimasi, lalu catat hasilnya. Optimasi gambar bukan pekerjaan sekali jalan: setiap artikel, produk, atau banner baru bisa membawa kembali masalah yang sama bila tidak ada langkah kompresi sebelum unggah.
Baca juga: Biaya Pembuatan Website Perusahaan 2026: Rp15 Juta vs Rp150 Juta, Apa Bedanya?
Plugin optimasi atau alur kerja tim?
Plugin optimasi gambar bisa membantu, terutama untuk gambar lama yang sudah terlanjur diunggah. Namun setiap plugin tambahan juga membawa beban, pembaruan, dan kadang biaya langganan. Cara yang paling andal biasanya sederhana: tim konten mengecilkan dan mengompres gambar sebelum mengunggahnya, dan website dibangun dengan atribut ukuran, lazy loading, dan srcset yang benar sejak awal.
Baca juga: Custom Plugin WordPress vs Plugin Berbayar: Kapan Harus Bangun Sendiri
Pertanyaan yang Sering Diajukan
Apakah WebP aman dipakai untuk website perusahaan?
Ya. WebP sudah didukung semua browser modern. Simpan JPEG hanya untuk gambar yang juga akan dikirim ke sistem lama atau formulir yang belum menerima WebP.
Berapa ukuran ideal gambar banner utama?
Sebagai patokan praktis, lebar sekitar 1920 piksel dengan ukuran berkas sekitar 200 KB atau kurang. Angka pastinya bergantung pada desain dan isi gambar, jadi periksa hasilnya dengan PageSpeed Insights.
Apakah mengompres gambar menurunkan kualitas tampilan?
Pada kualitas 75 sampai 85, perbedaannya hampir tidak terlihat di layar untuk sebagian besar foto. Bandingkan hasilnya berdampingan sebelum mengganti gambar di website.
Apakah aman mengompres foto internal perusahaan di situs gratis?
Banyak situs gratis mengunggah berkas ke server mereka. Untuk foto internal, pilih alat yang memproses gambar di perangkat Anda sendiri, seperti alat gambar di Reembun yang tetap bekerja meski koneksi internet dimatikan setelah halaman termuat.
Tentang RHP
PT RHP Cipta Digital adalah agensi digital dan marketing internasional yang berbasis di Jakarta. Kami membangun website custom dan website aplikasi serta website WordPress custom yang dirancang cepat sejak awal, dan kami mengelola Reembun, kumpulan alat online yang memproses berkas tanpa mengunggahnya.
Kami telah menyelesaikan lebih dari 100 proyek untuk klien di Amerika Serikat, Indonesia, dan sejumlah negara lain.
Website Anda terasa lambat?
Kami dapat meninjau halaman terpenting Anda, menunjukkan apa yang paling memperlambatnya, dan menyusun langkah perbaikan yang realistis. Konsultasi awal bersifat gratis dan tidak mengikat.
