Skip to main content
Use JPEG for photographs and PNG for logos or artwork that needs transparency when sending to a broad email audience. Keep essential information in live HTML text so the message still works when images are blocked.

​
Choose an image format

Consult the original Can I email WebP tests, linked SVG tests, and AVIF tests. Check test dates and client versions; aggregate support estimates do not guarantee rendering for your audience. Reviewed October 20, 2026.

​
Set dimensions before compression

For a template with a 600px content area, start with a 1200px-wide source for a full-width image when high-density display quality matters, then render it at 600px. Smaller placements need smaller source images. This is a starting point, not a required email width.
  1. Crop to the final aspect ratio.
  2. Resize to the pixels the placement needs.
  3. Export JPEG for photos or PNG for transparent artwork.
  4. Reduce quality or optimize losslessly, checking text and edges after export.
  5. Measure the resulting download size and test on a slow connection.
As a working budget, aim for individual images below 200 KB when quality allows. This is an optimization target, not a sending limit or a deliverability guarantee. Avoid sending multi-megabyte originals simply because the HTML displays them at a smaller size.

​
Make images responsive and accessible

Use a public HTTPS image URL that recipients can load without cookies, authentication, or an expiring session. Serve the correct image content type. A successful browser preview alone does not establish inbox compatibility.
Replace the example URL with your hosted asset. The width attribute helps clients that handle CSS differently; the inline styles allow the image to shrink on narrow screens. Test the surrounding template too, especially in classic Outlook for Windows. Describe meaningful images with concise alt text. Use alt="" for purely decorative images. When an image is the only content of a link, its alt text should explain the link destination or action. Keep calls to action, verification codes, prices, and deadlines as readable HTML text. Check transparent logos against both light and dark backgrounds.

​
Test the delivered email

Send the final template to test accounts in Gmail web and mobile, Apple Mail, Outlook.com, and classic Outlook for Windows where relevant to your audience. Check actual delivery rather than relying only on a browser preview.
  • Confirm the image URL loads without being signed in.
  • Check narrow screens, high-density displays, and light and dark mode.
  • Block remote images and verify the message and links remain understandable.
  • Check GIF first frames and whether animation plays.
  • Inspect download size and visual quality after any image proxy or conversion.

​
Prepare images before sending with Mailofly

Use the optimized image URL in the html field of your send email request. Do not assume that sending HTML through an API automatically compresses, converts, or hosts its images. Prepare and host assets before sending, then test the delivered message. For context, Resend’s October 19, 2026 editor release adds compression and format conversion before upload. Those are editor-specific behaviors, not universal email-client capabilities.