Tidak ada satu angka baku untuk ukuran banner web. Ukuran yang benar bergantung pada desain situs, lebar wadah tempat banner dipasang, dan lebar layar terbesar yang ingin dilayani. Banner selebar penuh di satu tema bisa berbeda jauh dari banner selebar penuh di tema lain, karena lebar kolom kontennya memang berbeda. Yang bisa dihitung adalah lebar wadahnya, bukan angka yang berlaku untuk semua situs.
Karena itu, langkah pertama selalu mengukur, bukan menghafal. Buka halaman tempat banner akan dipasang, lalu periksa berapa lebar ruang yang tersedia untuk banner itu. Setelah itu, tentukan rasio yang diinginkan, dan hitung dimensinya. Baru kemudian berkasnya disiapkan dan dikecilkan lewat Kompres Foto.
Satu peringatan yang perlu disampaikan sejak awal: ketentuan ukuran dari platform pihak ketiga, misalnya untuk iklan atau gambar pratinjau, bisa berubah kapan saja. Kalau banner Anda akan dipasang di platform seperti itu, periksa ketentuan resminya di pusat bantuan platform yang bersangkutan, dan jangan berpegang pada angka yang beredar di artikel lama.
Mengukur lebar wadahnya
Buka halaman tempat banner akan dipasang. Buka panel pengembang di peramban, arahkan ke elemen wadah banner, dan periksa lebar yang dilaporkannya. Angka itu adalah lebar tampil maksimum banner Anda di halaman tersebut.
Kalau banner akan tampil selebar penuh jendela, lebarnya mengikuti lebar layar pengunjung, dan itu berbeda-beda. Untuk keadaan ini, siapkan berkas dengan lebar yang cukup untuk layar terbesar yang ingin Anda layani, lalu biarkan CSS membatasinya di layar kecil. Jangan lupa aturan max-width supaya banner tidak memaksa halaman melebar.
Kalau banner dipasang di dalam kolom konten, lebarnya tetap dan tidak berubah menurut layar. Ukur lebar kolom itu, dan siapkan berkas dengan lebar yang sama atau sedikit lebih besar.
Menentukan rasio
Setelah lebar wadah diketahui, tentukan rasio banner. Rasio adalah perbandingan lebar dan tinggi, misalnya 3 banding 1 untuk banner pendek yang memanjang, atau 2 banding 1 untuk banner yang sedikit lebih tinggi. Rasio ditentukan oleh desain dan oleh isi banner, bukan oleh aturan tetap.
Banner yang terlalu tinggi memakan ruang layar dan mendorong isi halaman ke bawah. Banner yang terlalu pendek menyulitkan penempatan teks atau subjek gambar. Untuk banner dengan teks, rasio yang lebih tinggi memberi ruang lebih lega untuk teks itu.
Setelah lebar dan rasio ditentukan, hitung tingginya. Banner selebar 1200 piksel dengan rasio 3 banding 1 berarti tingginya 400 piksel. Angka hasil hitungan itu yang dipakai sebagai dimensi berkas.
Menyiapkan berkasnya
Siapkan banner pada dimensi yang sudah dihitung, lalu perkecil ukurannya sesuai kebutuhan. Buka Kompres Foto, pilih tool sesuai format berkas, dan pilih ukuran akhir lewat chip di pratinjau. Ukuran persen tersedia dari 10 sampai 200 persen. Contoh yang terverifikasi: persen 50 pada gambar 1600x1200 menghasilkan 800x600.
Untuk banner yang memuat teks, hindari JPG. Huruf pada banner JPG kehilangan ketajaman, dan teksnya jadi sulit dibaca, terutama di layar ponsel. Pakai PNG atau WebP. Kalau teks banner penting untuk pembaca dan mesin pencari, pertimbangkan menuliskannya sebagai teks halaman di atas gambar, bukan sebagai bagian dari gambar. Teks halaman bisa dipilih, dicari, dan dibaca alat bantu, sedangkan teks di dalam gambar tidak.
Untuk banner yang seluruhnya foto tanpa teks, JPG atau WebP sama-sama cocok. WebP memberi ukuran paling kecil, dengan catatan penerima berkasnya bisa membukanya. Perbandingan sifat ketiga format ada di format gambar untuk website.
Banner yang berubah bentuk di layar kecil
Banner lebar yang dipaksa mengecil di ponsel sering kehilangan subjeknya. Subjek yang ada di tengah bisa tetap terlihat, tetapi teks yang ada di sisi kiri atau kanan bisa terpotong atau menjadi terlalu kecil untuk dibaca.
Ada dua cara menanganinya. Cara pertama, siapkan dua versi banner dengan rasio berbeda, satu untuk layar lebar dan satu untuk ponsel. Versi ponsel biasanya lebih pendek dan subjeknya lebih dekat. Cara kedua, pakai satu berkas dengan subjek di bagian tengah, lalu atur CSS supaya bagian pinggirnya terpotong di layar kecil.
Cara pertama memberi hasil yang lebih baik, tetapi menuntut dua berkas. Cara kedua lebih sederhana dan cukup untuk banner yang isinya tidak terlalu padat. Keduanya dijelaskan sebagai panduan kode di cara membuat gambar responsive.
Kenapa banner sering menjadi gambar terberat di halaman
Banner biasanya gambar terbesar di halaman karena ukurannya lebar dan posisinya di bagian atas. Dua hal itu membuatnya paling berpengaruh pada waktu muat. Banner selebar 1600 piksel dengan tinggi 500 piksel membawa 800 ribu piksel, jauh lebih banyak daripada foto di dalam artikel.
Karena itu, banner adalah gambar pertama yang perlu diperiksa kalau halaman terasa lambat. Perkecil dimensinya ke lebar wadah yang sebenarnya, pilih format yang tepat, dan turunkan mutunya secukupnya. Jangan menunda pemuatan banner, karena ia berada di bagian yang pertama dilihat pengunjung. Penjelasan lengkapnya ada di kenapa gambar memperlambat website.
Kesalahan yang sering terjadi
Menyiapkan banner jauh lebih lebar daripada wadahnya. Banner 3000 piksel yang ditampilkan selebar 1200 piksel membawa piksel yang tidak terlihat. Perkecil dulu dimensinya sebelum diunggah.
Memakai satu banner untuk semua penempatan. Banner untuk bilah atas, kartu artikel, dan halaman detail punya lebar berbeda. Satu berkas besar untuk semuanya membuat tempat yang kecil tetap berat.
Menaruh semua teks di dalam gambar. Teks di dalam gambar tidak bisa dicari, tidak bisa dibaca alat bantu, dan tidak bisa menyesuaikan ukuran layar. Kalau teksnya penting, tulis sebagai teks halaman.
Memakai PNG untuk banner berisi foto penuh. Ukuran berkasnya jauh lebih besar daripada JPG atau WebP tanpa keuntungan yang sepadan, kecuali banner itu berisi teks atau butuh latar tembus pandang.
Lupa memeriksa ketentuan platform. Kalau banner akan dipasang di platform pihak ketiga, ukuran dan rasionya ditentukan platform itu, dan ketentuannya bisa berubah. Periksa pusat bantuan resminya.
Cara memeriksa sebelum diunggah
Periksa empat hal. Pertama, lebarnya minimal sebesar lebar wadah tempat banner akan tampil. Kedua, rasionya sesuai desain dan tidak berubah karena pemotongan. Ketiga, teksnya masih terbaca pada ukuran tampil, termasuk di layar ponsel. Keempat, ukuran berkasnya wajar dibandingkan gambar lain di halaman.
Setelah diunggah, buka halamannya dan periksa tampilan banner di lebar layar yang berbeda. Perhatikan apakah ada bagian penting yang terpotong, dan apakah banner membuat halaman melebar. Periksa juga apakah banner muncul sebelum bagian lain halaman, karena itu tanda pemuatannya tidak tertunda.
Simpan berkas asli banner sebelum dikompres. Kalau nanti perlu versi untuk penempatan lain, berkas asli adalah sumbernya.
Kapan ukuran besar tidak masalah
Kalau banner hanya tampil di satu tempat dengan lebar tetap dan pengunjungnya memakai jaringan cepat, ukuran besar tidak terlalu terasa. Contohnya banner di halaman internal kantor yang dibuka lewat jaringan lokal.
Kalau banner dipakai untuk cetak, misalnya spanduk atau poster, ukuran berkas bukan pertimbangan utama. Yang penting resolusinya cukup untuk ukuran cetaknya. Gambar yang dicetak besar memerlukan piksel jauh lebih banyak daripada gambar yang hanya ditampilkan di layar.
Kalau banner disimpan untuk arsip dan tidak diakses lewat jaringan, tidak ada yang perlu dikompres. Berkas asli selalu lebih lengkap daripada hasil kompresi.
Pertanyaan yang sering muncul
Apakah ada ukuran banner yang berlaku untuk semua situs? Tidak. Ukuran banner bergantung pada lebar wadah dan desain situsnya. Yang bisa dihitung adalah lebar wadah di halaman Anda, bukan angka yang berlaku umum.
Berapa rasio banner yang baik? Rasio ditentukan desain. Banner pendek yang memanjang cocok untuk bilah atas, sedangkan banner yang lebih tinggi cocok untuk bagian yang memuat teks atau subjek besar. Mulai dari kebutuhan isinya.
Apakah banner boleh memakai teks di dalam gambar? Boleh, tetapi teks di dalam gambar tidak bisa dicari dan tidak bisa dibaca alat bantu. Kalau teksnya penting, tulis sebagai teks halaman di atas gambar.
Apakah banner perlu dimuat dengan lazy load? Tidak. Banner biasanya berada di bagian atas halaman dan langsung terlihat, jadi sebaiknya dimuat segera. Lazy load dipakai untuk gambar yang jauh di bawah layar.
Mulai dari mengukur wadahnya
Ukur dulu lebar wadah banner di halaman Anda, tentukan rasionya, lalu siapkan berkasnya pada dimensi itu. Buka Kompres Foto untuk memperkecil ukurannya, dan periksa hasilnya pada ukuran tampil. Untuk gambaran menyeluruh, baca Gambar untuk Web dan Panduan Gambar dan Foto.