If your newsletter images look stretched, blurry or wrongly cropped, it's almost always a sizing mismatch between the file, the HTML and the client's rendering. Here's how to fix it for good.
Pro tip: The golden rule is 600 px wide for the email body, with images at exactly 1× or 2× that width to stay crisp on retina screens.
The 4 most common dimension issues
- Image bigger than the column — gets resized down by the client and can look blurry.
- Image smaller than declared in HTML — stretched and pixelated.
- Missing
width/heightattributes — Outlook can render at full file size. - Mobile clients ignoring CSS — they fall back to the inline attributes.
Recommended sizes
| Block | File width (retina) | HTML width |
|---|---|---|
| Full-width hero | 1200 px | 600 px |
| Two-column image | 560 px | 280 px |
| Logo | 300 px | 150 px |
| Icon | 96 px | 48 px |
Step-by-step fix
- Resize the source file to 2× the rendered width for retina sharpness.
- Always add
widthandheightattributes on the<img>tag. - Use
max-width:100%;height:autoin inline CSS for mobile. - Compress with TinyPNG or Squoosh — keep each image under 200 KB.
- Re-test on Gmail, Apple Mail and Outlook before sending.
Pixel-perfect images in every newsletter — try Mailpro free
Mailpro's image editor auto-resizes uploads, applies retina dimensions and compresses on upload. Discover the image editor · WYSIWYG editor
Related reading: