Guía de tamaños de banner y cabecera para email
Elige el ancho de tu email y la altura del banner. Te damos el tamaño de exportación para una imagen nítida, una vista previa y el código de la imagen. También puedes redimensionar tu banner en el navegador. Gratis, sin registro y sin subir nada.
La guía de tamaños necesita JavaScript: exporta al doble del ancho que se ve en el email, normalmente 1200 px para un email de 600 px.
¿Qué tamaño debe tener un banner de email?
Tan ancho como tu email, exportado al doble de ese ancho. La mayoría de los templates de email miden 600 px de ancho, más por costumbre que por norma. Por eso un banner a todo el ancho se muestra a 600 px y se exporta a 1200 px para pantallas de alta densidad.
La altura la eliges tú. Procura que el mensaje se vea en un teléfono sin tener que desplazarse: allí un banner de 600 × 300 se muestra aproximadamente a la mitad de ese tamaño.
Un banner que funciona
- Exportación a 2×: 1200 px de ancho para un email de 600 px
- Atributo width definido, para que Outlook en Windows mantenga el tamaño
- Texto alternativo que dice lo mismo que la imagen
- JPG para fotos, PNG para logos y texto
- La única copia de tu mensaje dentro de una imagen
Tamaños de banner habituales
Para un template de 600 px. Haz clic en un tamaño de la herramienta para previsualizarlo.
| Banner | Se muestra a | Exportar a (2×) | Sirve para |
|---|---|---|---|
| Cabecera con logo | 600 × 100 | 1200 × 200 | Franja de marca encima del contenido |
| Banner de cabecera | 600 × 200 | 1200 × 400 | Newsletters, anuncios breves |
| Imagen principal | 600 × 300 | 1200 × 600 | Eventos, webinars, lanzamientos |
| Imagen principal alta | 600 × 400 | 1200 × 800 | Un producto o una persona en primer plano |
Crea el banner en cuatro pasos
Del archivo de diseño a una imagen nítida y ligera en tu template.
- 1
Diseña al tamaño en pantalla
Maquétalo a 600 px de ancho, con un texto lo bastante grande para que se lea bien en un teléfono.
- 2
Exporta a 2×
1200 px de ancho. JPG para fotos, PNG para colores planos y texto.
- 3
Comprueba el peso
Abre el archivo en la herramienta de arriba: muestra el tamaño en KB y puede redimensionar un archivo más grande al ancho de exportación.
- 4
Insértalo con el código
Usa el código de la imagen: atributo width, max-width y height:auto, y el texto alternativo.
Antes de enviar
Cuatro cosas que estropean un banner una vez terminado el diseño.
- Pardot y Marketing Cloud Next. Account Engagement (Pardot) y Marketing Cloud Next envían ambos el HTML que contiene tu template, así que el ancho del template decide el ancho del banner. Sube el archivo a 2× e indica el ancho en pantalla en los ajustes de la imagen o en el HTML.
- WebP y AVIF. No todos los clientes de email los muestran. Tabla de compatibilidad en caniemail.com (se abre en una pestaña nueva)
- Recorte de Gmail. Gmail corta los emails cuyo HTML supera unos 102 KB (Google no documenta la cifra). Las imágenes alojadas no cuentan; el código incrustado, sí. Spam Resource (se abre en una pestaña nueva)
- Imágenes desactivadas. Algunos destinatarios solo ven el texto alternativo. Pon el titular y el botón en texto HTML, no en el banner.
Más herramientas gratuitas
Preguntas frecuentes sobre el tamaño del banner de email
Respuestas breves a lo que más se pregunta sobre el tamaño de banners e imágenes de cabecera.
¿Cuál es el mejor tamaño para un banner de email?
Para un template de 600 px: 600 px de ancho con la altura que pida el mensaje, exportado a 1200 px de ancho para que se vea nítido en pantallas de alta densidad.
¿Qué tamaño tiene una imagen de cabecera de email?
Normalmente el ancho completo del template, 600 px, y de 100 a 200 px de alto para un logo o un banner de cabecera. Expórtala al doble.
¿Por qué mi banner se ve borroso?
Se exportó al mismo tamaño al que se muestra. Los teléfonos y la mayoría de los portátiles tienen dos o más píxeles de dispositivo por cada píxel CSS, así que exporta al doble del ancho en pantalla.
¿Por qué mi banner sale enorme en Outlook?
Outlook en Windows ignora max-width y muestra el archivo a su tamaño real. Indica el ancho en pantalla en el atributo width de la etiqueta img.
¿Qué formato de archivo debo usar?
JPG para fotos; PNG para logos, colores planos y texto; GIF para animaciones sencillas. No todos los clientes de email muestran WebP y AVIF.
¿Se sube mi imagen?
No. La herramienta la lee en tu navegador y la redimensiona allí; no nos llega nada.
Hacemos que tu marketing en Salesforce trabaje para ti
Habla con un consultor certificado, no con un vendedor, y sal de la primera llamada sabiendo cuál es tu siguiente paso.