Si las imágenes de tu newsletter aparecen estiradas, borrosas o mal recortadas, casi siempre es un problema de tamaños entre archivo, HTML y cliente de email. Así lo solucionas de raíz.
Consejo pro: La regla de oro es 600 px de ancho de cuerpo, con imágenes a 1× o 2× exacto para mantenerse nítidas en pantallas retina.
Los 4 problemas más frecuentes
- Imagen mayor que la columna: el cliente la reduce y puede verse borrosa.
- Imagen menor que el ancho declarado en HTML: se estira y pixela.
- Sin atributos
width/height: Outlook la renderiza a tamaño real. - Móviles que ignoran CSS: usan los atributos inline.
Tamaños recomendados
| Bloque | Archivo (retina) | Ancho HTML |
|---|---|---|
| Hero a ancho completo | 1200 px | 600 px |
| Imagen a dos columnas | 560 px | 280 px |
| Logo | 300 px | 150 px |
| Icono | 96 px | 48 px |
Solución paso a paso
- Redimensiona el archivo a 2× del ancho renderizado para retina.
- Pon siempre
widthyheighten la etiqueta<img>. - Usa
max-width:100%;height:autoen CSS inline para móvil. - Comprime con TinyPNG o Squoosh: cada imagen bajo 200 KB.
- Prueba en Gmail, Apple Mail y Outlook antes de enviar.
Imágenes nítidas en cada newsletter — prueba Mailpro gratis
El editor de imágenes de Mailpro redimensiona en automático, aplica dimensiones retina y comprime al subir. Descubrir el editor de imágenes · Editor WYSIWYG
Lecturas relacionadas: