How Frontend Engineers Should Resize Images for Hostile Email Client Environments

A frontend engineer has shared a practical guide for optimizing images in email campaigns, drawn from experience managing a transactional email pipeline that was sending 1.4 MB JPEGs to a mobile-heavy user base. Email clients like Outlook, Gmail, and Apple Mail each handle images differently, with issues ranging from re-compression and DOM rewriting to aggressive caching and dark mode inversions. The guide recommends sizing images into three logical width buckets — full-bleed, two-column, and inline — based on the email's 600px content column and the target device pixel ratio. Engineers are advised to analyze their newsletter's actual client and viewport distribution before deciding whether to ship 2x or 3x image variants. The core principle is to resize once in code, use HTTPS URLs, keep query strings short, and design CSS fallbacks for when images fail to load.