Zonas seguras y ratios para miniaturas 2025 — Reglas prácticas que protegen el CTR

La zona visible cambia según la superficie. Define una «zona segura» para que caras, CTA y texto no se corten.

Este artículo propone guías por ratio, zonas típicas de corte en SNS/buscadores/tarjetas, tamaños físicos de texto y un flujo práctico. Automatiza el primer pase, pero cierra con una revisión humana rápida para proteger CTR y retención.

Relacionado: Recorte inteligente para más engagement — Relaciones de aspecto, puntos de atención y miniaturas sociales / Diseño de miniaturas OGP 2025 — Legible, ligero, bien encuadrado

Ratios y colocación

• 1:1: miniaturas cuadradas. Centro; 12–15% de margen seguro arriba/abajo
• 16:9: apaisado. Texto en el 40–60% (izq./centro) para estabilidad
• 4:3: equilibrado para esquemas/retratos

Espacios y lectura F/Z

Los escaneos F/Z dominan. Colocar texto/rostros hacia «superior‑izquierda → centro» acelera el reconocimiento. Inferior‑derecha suele ser zona de decaimiento: deja solo elementos ligeros (logo pequeño).

Márgenes seguros recomendados

Valores prudentes; afina por marca/medio.

Flujo práctico

1. Usa Recortador de imágenes para preajustar el ratio
2. Coloca elementos clave en la banda segura
3. Para OGP/SNS, termina con Creador de miniaturas OGP

Automatización vs revisión humana

• Pase 1: smart crop (caras/saliencia)
• Pase 2: reajuste a la zona segura (copys/logo)
• Final: revisión de 30 s

Notas por plataforma

• Miniatura YouTube (16:9): prevé 10–15% de recorte vertical; caras/logo en el 60% central

• X (ex‑Twitter): tiende a comprimir laterales; centra y refuerza márgenes verticales

• Tarjetas en buscador: viewport pequeño; limita texto a ~20–30%

• Feed Instagram: base 1:1; en vertical, foco en el 50–60% central

• Facebook/LinkedIn OGP: ~1200×630; buffer del 12% arriba/abajo

• Fichas shopping: overlays de precio/badge — motivo/texto hacia el centro

Notas matemáticas (guías)

Si ancho=W y alto=H: 12% arriba/abajo → y=0,12H y 0,88H. 10% izq./der. → x=0,1W y 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};

Para dirección de mirada, deja ≥0,1W de espacio del lado hacia el que se mira. Con varias personas, prioriza el sujeto principal.

object-position chuleta

<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

• [ ] Claves dentro de insets del 10–15%
• [ ] Sin cortes inesperados en móvil (dispositivos reales)
• [ ] Texto legible ≥14–16px eq.

Extra:

• [ ] Contraste WCAG AA
• [ ] Caras/dirección de mirada con ≥10% de espacio de avance

A/B rápidos

• 2 variantes: 6–9 palabras núcleo + 0–6 de soporte
• Escala del motivo 90% vs 75%
• Compara CTR × retención tras ~1 semana / 1k imp.

Resumen

Define zonas seguras por ratio para reducir accidentes y estabilizar la producción.