Ukuran thumbnail ditentukan oleh tempat thumbnail itu ditampilkan, bukan oleh angka baku yang berlaku di semua situs. Kalau thumbnail muncul di daftar artikel dengan lebar 300 piksel, berkas 300 piksel sudah cukup untuk layar biasa dan 600 piksel untuk layar berkerapatan piksel tinggi. Menyimpan berkas 2000 piksel untuk kotak selebar 300 piksel hanya menambah berat halaman tanpa perubahan yang terlihat.
Karena itu, cara menentukannya sama dengan gambar web lain: ukur dulu lebar tampilnya, tentukan rasionya, lalu siapkan berkas pada dimensi itu. Berkasnya diperkecil lewat Kompres Foto, dan formatnya disesuaikan lewat Konversi Format Gambar bila perlu.
Bedanya thumbnail dengan gambar biasa terletak pada jumlahnya. Satu halaman daftar bisa memuat belasan thumbnail sekaligus. Berat satu thumbnail yang berlebihan dikalikan belasan, dan itulah yang membuat halaman daftar terasa berat. Jadi penghematan kecil di setiap thumbnail berdampak besar secara keseluruhan.
Mengukur lebar tampil thumbnail
Buka halaman daftar tempat thumbnail muncul, lalu periksa lebar kotak thumbnail-nya dengan panel pengembang di peramban. Angka itu adalah ukuran tampil yang perlu dilayani.
Sebagian besar tema menampilkan thumbnail dalam grid, misalnya tiga kolom di komputer dan satu kolom di ponsel. Untuk grid seperti itu, lebar thumbnail di komputer adalah lebar kolom konten dibagi jumlah kolom, dikurangi jarak antarkolom. Di ponsel, thumbnail biasanya selebar penuh kolom konten.
Karena lebarnya berubah menurut layar, siapkan berkas dengan lebar yang cukup untuk tampilan terbesar, lalu biarkan CSS membatasinya. Cara menyiapkan beberapa versi ukuran untuk layar berbeda dijelaskan di cara membuat gambar responsive.
Menentukan rasio yang seragam
Thumbnail yang tampil dalam satu grid sebaiknya memakai rasio yang sama. Kalau rasionya berbeda-beda, tinggi kartunya ikut berbeda, dan gridnya terlihat berantakan. Rasio yang seragam juga membuat teks di bawah thumbnail rata posisinya.
Rasio yang umum dipakai adalah 1 banding 1 untuk thumbnail persegi, 4 banding 3 untuk yang sedikit melebar, dan 16 banding 9 untuk yang mengikuti layar lebar. Pilihannya bergantung desain dan isi thumbnail-nya. Untuk foto produk, persegi sering dipakai karena memberi ruang seimbang. Untuk tangkapan layar artikel, rasio 16 banding 9 lebih pas.
Kalau sumber gambarnya punya rasio berbeda dari yang dibutuhkan, pemotongan atau penambahan latar diperlukan. Pemotongan dikerjakan aplikasi penyunting gambar, bukan tool kompresi. Yang bisa dikerjakan di sini adalah memperkecil dimensi dan memilih ukuran akhir setelah gambar itu siap.
Menyiapkan berkasnya
Setelah lebar dan rasio ditentukan, siapkan berkasnya pada dimensi itu. Kalau thumbnail akan ditampilkan pada layar berkerapatan tinggi, siapkan versi dua kali lipat. Untuk thumbnail selebar 300 piksel, sediakan berkas 600 piksel, dan biarkan CSS mengecilkannya.
Buka Kompres Foto, lalu pilih tool sesuai format. Ukuran persen tersedia dari 10 sampai 200 persen, dan angkanya terlihat di pratinjau. Contoh yang terverifikasi: persen 50 pada gambar 1600x1200 menghasilkan 800x600. Dari berkas 1200 piksel, persen 25 memberi versi 300 piksel, dan persen 50 memberi versi 600 piksel.
Untuk thumbnail yang berisi teks, misalnya judul artikel di dalam gambar, pakai PNG atau WebP. Teks pada JPG kehilangan ketajaman, dan pada ukuran thumbnail yang kecil, kekaburan itu justru paling terasa. Kalau teksnya penting, pertimbangkan menuliskannya sebagai teks halaman di bawah thumbnail, karena teks di dalam gambar tidak bisa dicari dan tidak bisa dibaca alat bantu.
Untuk thumbnail berisi foto, JPG dan WebP sama-sama cocok. WebP memberi ukuran paling kecil, dengan catatan penerima berkasnya bisa membukanya.
Kenapa thumbnail kecil tetap bisa memberatkan
Satu thumbnail berukuran 200 kilobyte mungkin terasa ringan. Tetapi halaman daftar yang memuat dua belas thumbnail dengan ukuran itu harus mengunduh sekitar 2,4 megabyte hanya untuk gambar. Belum termasuk gambar utama, skrip, dan berkas lain. Itulah sebabnya halaman daftar sering terasa lebih berat daripada halaman artikel yang gambarnya lebih besar tetapi lebih sedikit.
Ada dua cara mengurangi beban itu. Pertama, perkecil berkas setiap thumbnail ke ukuran tampilnya. Kedua, tunda pemuatan thumbnail yang berada di bawah layar, sehingga hanya yang terlihat yang diunduh lebih dulu. Cara keduanya dijelaskan di cara membuat lazy load gambar.
Halaman daftar juga sebaiknya memuat sedikit item per halaman. Dua belas thumbnail yang ringan lebih baik daripada empat puluh thumbnail yang ringan tetapi dimuat sekaligus. Pembagian halaman mengurangi jumlah permintaan pada satu waktu.
Thumbnail untuk video dan tautan yang dibagikan
Thumbnail untuk video punya pertimbangan tambahan. Platform video punya ketentuan sendiri soal ukuran dan rasio gambar pratinjaunya, dan ketentuan itu bisa berubah. Periksa pusat bantuan platform yang bersangkutan sebelum menyiapkan berkasnya, jangan berpegang pada angka yang beredar di artikel lama.
Untuk gambar pratinjau yang muncul saat tautan dibagikan di media sosial atau aplikasi percakapan, rasionya juga ditentukan platform masing-masing. Yang bisa Anda siapkan adalah berkas dengan subjek di bagian tengah, karena platform umumnya memotong gambar mengikuti rasionya sendiri. Siapkan juga versi persegi dan versi lanskap supaya gambar lebih aman dipotong di berbagai penempatan.
Kesalahan yang sering terjadi
Menyiapkan thumbnail dari gambar utama tanpa memperkecilnya. Thumbnail adalah gambar tersendiri yang perlu dimensi sendiri. Mengarahkan tag gambar ke foto ukuran penuh berarti pengunjung mengunduh berkas besar untuk kotak kecil.
Memakai rasio berbeda-beda dalam satu grid. Tinggi kartu jadi tidak rata, dan halaman terlihat berantakan meskipun gambarnya bagus. Tentukan satu rasio untuk seluruh grid.
Menaruh teks kecil di dalam thumbnail. Pada ukuran tampil yang kecil, teks itu tidak terbaca dan hanya menambah detail yang memberatkan berkas. Pakai teks halaman, bukan teks di dalam gambar.
Lupa versi untuk layar berkerapatan tinggi. Thumbnail yang tajam di layar biasa bisa terlihat pecah di layar ponsel berkerapatan tinggi. Sediakan versi dua kali lipat, dan biarkan peramban memilih.
Mengompres berkali-kali. Kalau hasil pertama masih terlalu besar, ulangi dari berkas asli dengan ukuran yang lebih kecil. Setiap penurunan mutu tidak bisa dikembalikan.
Cara memeriksa hasilnya
Periksa tiga hal setelah proses selesai. Pertama, dimensinya minimal sebesar ukuran tampil terbesar. Kedua, ukuran berkasnya wajar dibandingkan thumbnail lain di halaman. Ketiga, ketajamannya masih layak pada ukuran tampil, terutama untuk teks.
Setelah diunggah, buka halaman daftarnya dan periksa tampilan di lebar layar berbeda. Perhatikan apakah gridnya tetap rapi, apakah ada thumbnail yang rasionya berbeda, dan apakah halamannya terasa berat saat dimuat. Periksa juga apakah gambar di bawah layar baru dimuat saat digulir.
Simpan berkas asli sebelum dikompres. Kalau nanti perlu ukuran lain, misalnya untuk kartu yang lebih besar di halaman utama, berkas asli adalah sumbernya.
Kapan satu ukuran thumbnail tidak cukup
Kalau situs Anda menampilkan thumbnail di beberapa tempat dengan ukuran berbeda, misalnya di beranda, di halaman kategori, dan di bilah samping, satu berkas mungkin tidak cukup. Tema yang lebih baru sering membuat beberapa ukuran turunan secara otomatis saat gambar diunggah, dan itu mengurangi pekerjaan Anda. Kalau tema Anda tidak melakukannya, siapkan dua atau tiga ukuran sendiri.
Kalau thumbnail hanya muncul di satu tempat dengan ukuran tetap, satu berkas sudah cukup. Menyiapkan beberapa versi hanya menambah pekerjaan tanpa manfaat.
Kalau thumbnail dihasilkan otomatis dari gambar utama oleh sistem, periksa apakah sistem itu memperkecil dimensinya. Kalau tidak, berkas asli yang besar akan dipakai untuk thumbnail, dan halaman daftar ikut berat.
Pertanyaan yang sering muncul
Apakah ada ukuran thumbnail yang berlaku umum? Tidak. Ukurannya mengikuti tempat thumbnail ditampilkan. Yang bisa dihitung adalah lebar kotaknya di halaman Anda.
Apakah thumbnail harus persegi? Tidak. Persegi adalah pilihan yang umum karena rapi dalam grid, tetapi rasio lain juga dipakai. Yang penting seluruh thumbnail dalam satu grid memakai rasio yang sama.
Apakah thumbnail perlu versi untuk layar berkerapatan tinggi? Dianjurkan, terutama kalau thumbnail memuat teks atau detail halus. Sediakan versi dua kali lipat dari ukuran tampilnya.
Apakah thumbnail boleh memakai gambar yang sama dengan gambar utama? Boleh, selama berkasnya disiapkan pada dimensi thumbnail. Jangan mengarahkan tag gambar ke berkas ukuran penuh hanya karena gambarnya sama.
Mulai dari mengukur kotaknya
Ukur lebar kotak thumbnail di halaman Anda, tentukan rasio yang seragam, 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.