iDoctus

Inspector de Banners

Analiza y verifica la adaptabilidad, carga y optimización de tus banners HTML

Arrastra un archivo ZIP aquí

o haz clic para seleccionar

Máximo 20MB • Solo archivos .zip

Los archivos se eliminan automáticamente después de 15 minutos

Claves de Adaptabilidad

¿Qué es un banner adaptativo?

Un banner adaptativo es aquel que se adapta automáticamente al tamaño del contenedor donde se muestra, sin perder calidad ni proporciones. Esto es esencial para publicidad móvil y responsive.

Cómo hacer un banner adaptativo

1. Configurar el contenedor principal:

  • Ancho: Usar 100% en lugar de píxeles fijos
  • Alto: Usar 100% en lugar de píxeles fijos
  • Márgenes: Establecer en 0

2. Tipos de medidas (de mayor a menor flexibilidad):

  • ✓ Porcentaje (%) - Se adapta al contenedor padre
  • ✓ vw/vh - Se adapta al tamaño de la pantalla
  • ⚠ em/rem - Relativo al tamaño de fuente
  • ✕ Píxeles (px) - Tamaño fijo, NO adaptativo

3. Elementos internos (logos, textos, imágenes):

  • Usar porcentajes para tamaños (ej: 30% del contenedor)
  • Usar vw para textos (ej: 4vw se escala con la pantalla)
  • Mantener proporciones con aspect-ratio

4. En herramientas como Google Web Designer:

  • Configura el documento con unidades % en vez de px
  • En propiedades, establece ancho y alto al 100%
  • Activa las opciones de "responsive" o "fluid" si están disponibles

Verificación rápida

Tu banner NO es adaptativo si detectas alguno de estos problemas:

  • Ves el fondo rojo a rayas alrededor del banner
  • No cubre todo el contenedor y quedan espacios vacíos
  • El banner no se ve completo (se corta o desborda)
  • El contenido no se escala proporcionalmente

Banner correcto: Cubre completamente cada contenedor sin mostrar el fondo rojo, y se escala proporcionalmente en todos los tamaños.

Optimización de carga

Un banner que tarda demasiado en cargar puede afectar la experiencia del usuario y reducir el rendimiento.

Consejos para mejorar el tiempo de carga:

  • Optimiza y comprime las imágenes - Usa formatos como WebP o JPG con compresión
  • Reduce el tamaño de archivos CSS y JavaScript - Minifica el código y elimina código no usado
  • Usa fuentes web con moderación - Las fuentes personalizadas pueden añadir peso significativo

Tamaño recomendado: El peso total del banner (HTML + CSS + JS + imágenes) debería ser menor a 150KB. Por encima de 200KB se considera excesivo.

Vista Previa

Carga tu banner para analizarlo y ver las vista previa