HTML email inliner

How to use the html email inliner

Convert embedded email styles into inline attributes without uploading your template. The free HTML email inliner uses a dedicated CSS inlining engine and measures the resulting HTML in UTF-8 bytes.

1. Paste your complete HTML email with CSS inside style tags. Copy external stylesheet contents into an embedded style tag first.
2. Choose whether to minify. The compacting pass removes ordinary comments and collapses unnecessary text whitespace while preserving meaningful spacing and preformatted blocks.
3. Select Inline CSS. Review the result and keep responsive media rules in the retained style content.
4. Check the converted size. A warning appears from 90 KB, with a stronger warning at the usual 102 KB Gmail clipping reference.
5. Copy or download the result, send it through your email platform, and inspect real test inboxes before using the template for a campaign.

Why inline styles help email compatibility

Email clients have different CSS support and may discard some embedded styles. Inline attributes place supported declarations directly on the relevant elements. The engine resolves selectors and the cascade rather than blindly copying every rule. Existing inline declarations and important rules are handled by the library. Inlining cannot make unsupported CSS features work in every client. Use email compatible layouts, sensible table structures when needed, and real inbox testing.

Responsive rules and Outlook comments

Media queries cannot be expressed as ordinary style attributes, so responsive rules need to remain in a style tag. This tool retains at rules and preserves conditional comments used by Outlook. Minification intentionally avoids aggressive removal of spacing between inline elements because that can join words or change layout. It also preserves content in pre, textarea, style, and script elements. Conversion is not HTML sanitization; inspect templates from untrusted sources before sending them.

Understanding Gmail clipping

Gmail commonly clips messages around 102 KB of HTML, but the received message may be larger than the file you paste here. Tracking links, personalization, a platform footer, and duplicated markup can add bytes. The tool uses TextEncoder to count UTF-8 bytes rather than JavaScript string length, so accented characters and emoji are measured more accurately. It excludes separately hosted image file bytes. Keep a margin below the threshold and inspect the actual received message when size is close.

External CSS and local processing

The inliner fetches its own engine from the Ternloop website but does not fetch stylesheets named in your HTML. This keeps arbitrary template URLs from being requested during conversion. Paste those rules into a style tag if you need them included. Remote images are blocked in the converted preview. The output retains your source links for sending, so inspect their destinations and replace any relative URLs with final publicly accessible URLs.

Common questions