Area aman dan rasio thumbnail 2025 — Aturan praktis untuk melindungi CTR

Dengan gambar yang sama, area terlihat bisa berubah tergantung penempatan. Tetapkan “area aman” agar wajah, CTA, dan teks tetap utuh.

Artikel ini merangkum panduan aman per rasio umum, zona potong di SNS/pencarian/kartu UI, kiat ukuran fisik teks, dan alur praktis. Otomasi cocok untuk draf awal, tetapi akhiri dengan tinjauan manusia singkat demi CTR dan retensi.

Terkait: Smart cropping untuk engagement — Rasio, titik fokus, dan thumbnail sosial / Desain thumbnail OGP 2025 — Terbaca, ringan, tidak terpotong

Rasio dan penempatan

• 1:1: persegi. Pusatkan subjek; 12–15% ruang aman atas/bawah
• 16:9: lanskap. Letakkan teks di 40–60% kiri/tengah untuk stabilitas
• 4:3: seimbang untuk penjelasan/potret

White space dan pemindaian F/Z

F/Z mendominasi. Menempatkan teks/wajah dari “kiri‑atas ke tengah” mempercepat pengenalan. Kanan‑bawah cenderung zona meredup; tinggalkan elemen ringan (mis. logo kecil).

Margin aman yang direkomendasikan (per rasio)

Berikut nilai konservatif; sesuaikan menurut brand dan media.

Alur praktis

1. Gunakan Pemotong gambar untuk preset rasio
2. Tempatkan elemen kunci dalam pita aman (panduan khusus boleh)
3. Untuk OGP/SNS, akhiri dengan Pembuat Thumbnail OGP

Otomasi vs peninjauan manusia

• Lintasan 1: smart crop dengan wajah/saliensi
• Lintasan 2: dorongan berbasis aturan ke area aman (copy/logo)
• Final: cek manusia 30 detik

Catatan spesifik platform

• Thumbnail YouTube (16:9): antisipasi potong vertikal 10–15%; wajah/logo di 60% tengah

• Kartu X (eks‑Twitter): auto‑crop menekan kiri/kanan; pusatkan dan beri ruang atas/bawah

• Kartu gambar hasil pencarian: viewport kecil — area teks kira‑kira 20–30%

• Feed Instagram: basis 1:1; untuk scroll vertikal, jaga fokus di tengah 50–60%

• Facebook/LinkedIn OGP: ~1200×630; siapkan 12% “buffer potong” atas/bawah

• Kartu belanja: overlay harga/lencana — arahkan subjek/teks ke tengah

Catatan matematika (panduan)

Jika lebar W dan tinggi H, panduan 12% atas/bawah berada di y = 0,12H dan y = 0,88H. 10% kiri/kanan di x = 0,1W dan 0,9W.

const W = 1200, H = 630;
const guides = { left: 0.1*W, right: 0.9*W, top: 0.12*H, bottom: 0.88*H };

Untuk arah pandang, sisakan ≥0,1W ruang di sisi mengarah. Untuk banyak orang, prioritaskan subjek utama.

Cheatsheet object-position

<div class="aspect">
  <img src="hero.jpg" alt="" />
</div>

.aspect { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.aspect img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }

Checklist QA

• [ ] Elemen kunci berada dalam inset 10–15%
• [ ] Tidak ada potongan tak terduga di mobile (uji di perangkat nyata)
• [ ] Teks terbaca di ~14–16px ekuivalen

Tambahan:

• [ ] Kontras memenuhi WCAG AA
• [ ] Wajah/arah pandang dengan ≥10% ruang kosong

Ide A/B cepat

• Dua varian: 6–9 kata utama + 0–6 pendukung
• Skala subjek 90% vs 75%
• Bandingkan CTR × retensi setelah ~1 minggu / 1k impresi

Ringkasan

Menetapkan zona aman per rasio mengurangi kecelakaan dan menstabilkan produksi.