Formato nuevo
Tamaños de banner en píxeles: cómo mirarlos en el sitio de otro
Un banner es una imagen o un bloque interactivo que promociona una oferta, una sección o un partner. Antes de hacer «lo mismo que el competidor», conviene saber el tamaño real en píxeles — si no, el creativo rompe el layout o hincha el peso de la página.
Abajo: tipos de banner, por qué los estándares IAB no siempre se siguen y cómo comprobar tamaños con DevTools. Las imágenes clicables viven en un artículo vecino.
Qué tipos de banners hay
Por forma de entrega suelen verse tres tipos: archivos estáticos, animación e interactivos.
La elección depende del trabajo y del presupuesto de velocidad: cuanto más complejo el creativo, mayor el riesgo de retrasar el LCP y molestar al usuario.
Tipos:
- estático JPEG/PNG/WebP — más simple y ligero
- animación (GIF o preview de vídeo) — más claro, más pesado
- interactivo (HTML/JS) — clics, formularios, motion; más duro de mantener
Tamaños: estándares y realidad
Asociaciones y redes de ads publican formatos típicos (p. ej. rangos IAB), y las plataformas social fijan sus propios píxeles para feed y stories.
En sitios normales los tamaños suelen ser arbitrarios: para la rejilla del layout, un breakpoint móvil o un «hueco» en la sidebar. No hay una clasificación web universal «en centímetros» — cuentas píxeles CSS y el archivo origen.
Qué vigilar en tu propio creativo:
- hueco en el layout (ancho de columna / max-width)
- retina: a veces preparas 2× pero sirves un archivo comprimido
- móvil — tamaño aparte o responsive
- specs de emplazamiento si son ads externos
Cómo saber el tamaño de un banner en el sitio de otro
Si necesitas igualar las dimensiones del hueco (no copiar el archivo ajeno), abre la página en Chrome/Firefox/Safari y usa las herramientas de desarrollador.
Algoritmo corto:
- clic derecho en el banner → Inspeccionar
- en el DOM encuentra el `img` o el contenedor del banner
- mira width/height en atributos o el tamaño computed
- si dudas, abre la URL de la imagen y verifica el tamaño natural del archivo
Matices:
- CSS puede encoger la imagen — display ≠ intrínseco
- fondo vía `background-image` — mira en Styles, no en atributos de img
- iframe/red de ads — el tamaño puede estar en el contenedor, no en el archivo
Por qué los tamaños arbitrarios son normales
Los sitios adaptan bloques a pantallas y rejillas distintas. Un rígido «728×90 en todas partes» hace tiempo que no es la única opción.
Lo que importa es que el banner no rompa la lectura, no tape CTAs y no pese como una página aparte. Si el creativo es útil (oferta clara, un diagrama), la gente lo tolera más que un GIF vacío que grita.
FAQ
¿Dónde en DevTools veo el tamaño?
Clic derecho en el banner → Inspeccionar. En el nodo seleccionado mira width/height en img o el tamaño computed en Styles/Computed y el tooltip al pasar el ratón sobre el nodo.
¿El width HTML es igual al archivo real?
No siempre. Atributos y CSS pueden escalar la imagen. Para el origen, mira Network → tamaño del recurso o abre la URL de la imagen en una pestaña nueva.
¿Hay tamaños de banner obligatorios?
Las redes de ads y las plataformas social tienen sus propias specs. En sitios normales los webmasters a menudo usan formatos arbitrarios para el layout.
¿En qué se diferencian banners estáticos, GIF y HTML5?
JPEG/PNG son más ligeros y simples. GIF es animación pero pesa. HTML5/JS es interactivo, más carga, más difícil de medir como «una sola imagen».
¿Por qué copiar el tamaño del competidor?
Para que el creativo quepa en un hueco parecido sin recortes. La idea y la oferta deben ser tuyas; no copies assets ajenos sin derechos.
¿Cómo no matar la velocidad de la página?
No hinches píxeles «por si acaso»: tamaño de display necesario + compresión (WebP/AVIF), width/height en el markup, lazy bajo el fold.
¿Un banner es un enlace-imagen?
A menudo sí: img dentro de a. Mismas reglas — alt claro, archivo propio, peso sensato. Ver el post de imagen-enlace.
¿El creativo del banner se recorta porque el hueco era a ojo?
Sacamos display vs tamaño de archivo con Inspect y montamos tu creativo comprimido — no una copia del asset ajeno.
Hablar del proyecto
