Email Image Slicing Explained: Why and How to Slice Email Images

If you've ever wondered how brands like Nike, Zara, or Glossier send emails with pixel-perfect designs that look identical in every email client — including Outlook — the answer is image slicing.

Email image slicing is the process of cutting a full email design into horizontal sections, each saved as a separate image file, then stacking them back together using simple HTML. It's been a core technique in email marketing for over a decade, and it remains one of the most reliable ways to send visually-driven campaigns.

What Is Email Image Slicing?

Instead of sending one massive image as your entire email (which creates a single clickable area), slicing divides your design into multiple horizontal strips — typically 4 to 8 sections.

Each slice becomes a separate <img> tag in your email's HTML, stacked vertically inside a table. When the email renders, the slices align perfectly to recreate the original design. But now each slice can link to a different URL.

The HTML structure is minimal — just a series of table rows containing images. No complex CSS, no responsive media queries, no Outlook hacks. This simplicity is precisely why the technique works so reliably.

Why Brands Slice Their Emails

Image slicing isn't a workaround — it's a deliberate strategy that solves several major email marketing challenges:

Pixel-Perfect Rendering Across All Clients

HTML-coded emails look different in every email client. Outlook breaks layouts, Gmail strips styles, and Yahoo renders things differently from Apple Mail. With image-based slicing, your email is a series of images — and images render identically everywhere. What you design is exactly what subscribers see.

Dark Mode Immunity

Dark mode can invert the colors of HTML elements — turning white backgrounds dark, dark text light, and generally wreaking havoc on carefully designed color schemes. But dark mode cannot alter the pixels inside an image. Sliced emails look the same in light mode and dark mode. Read more about dark mode email design.

Custom Typography

HTML emails are limited to web-safe fonts (Arial, Georgia, Verdana) in most email clients. Custom web fonts work in Apple Mail but fail in Outlook and Gmail. With image-based emails, any font your design tool supports renders perfectly — because the text is part of the image.

Multiple Clickable Sections

Each slice can link to a different URL. Your header can link to your homepage, the product section to the product page, and the footer CTA to your sale page. This is the primary technical reason for slicing rather than sending one large image.

How to Decide Where to Slice

The placement of your cuts determines both the functionality and reliability of the final email. Follow these guidelines:

Rule 1: Cut Between Content Sections

Natural division points in your design — between the header and the hero, between product sections, between the body and footer. These are the cleanest places to slice because there's usually a clear horizontal boundary.

Rule 2: Each Link Target Gets Its Own Slice

If two parts of your design link to different URLs, they must be separate slices. A hero banner linking to a collection page and a product block linking to a product page cannot be in the same slice.

Rule 3: Don't Cut Through Flowing Content

Avoid slicing through the middle of a paragraph, a product image, or a gradient that spans two sections. If the slice boundary falls in the middle of visual content, misalignment becomes visible — especially in Outlook.

Rule 4: Keep a Buffer Zone

Leave at least 5-10px of padding above and below each slice boundary. This prevents alignment issues where clients add tiny gaps between images. A solid-color buffer zone makes any micro-gap invisible.

Optimal Number of Slices

The sweet spot for most promotional emails is 4-8 slices:

• 3-4 slices: Simple layout — header, hero, body, footer. Each links to one destination.
• 5-6 slices: Standard promotional — header, hero, 2-3 product sections, footer CTA.
• 7-8 slices: Complex campaigns with multiple product features and clickable areas.
• 8+ slices: Possible but rarely necessary. More slices mean more HTML, more potential for gaps, and more files to manage.

A good rule of thumb: slice as many times as you have distinct link targets, plus one for any non-clickable header/footer section.

Compression and File Size

Each slice needs to be individually compressed. The total weight of all images combined should stay under 800KB for fast loading on mobile networks. Target 100-150KB per slice for a typical 6-slice email.

Export at 2x resolution (1200px wide for a 600px email) for retina display sharpness, then compress at 75-85% JPEG quality. The result: sharp images at reasonable file sizes. See our full compression guide for detailed tool recommendations and quality settings.

Common Problems and Fixes

Gaps Between Slices in Outlook

This is the most notorious image-slicing issue. Outlook adds small gaps (2-5px) below images due to its rendering engine. The fix is a combination of CSS properties on the image and its containing table cell:

• display: block on all <img> tags
• font-size: 0 and line-height: 0 on <td> elements
• Explicit width and height attributes on every image
• border="0" and cellpadding="0" cellspacing="0" on the table

Mobile Scaling

Set all images to max-width: 100% with height: auto so they scale proportionally on smaller screens. Since sliced emails are inherently single-column and full-width, mobile scaling is straightforward — every slice simply stretches to the viewport width.

Accessibility

Image-based emails have a real accessibility limitation: screen readers can only read alt text, not text within images. For each slice, write concise, descriptive alt text (under 125 characters) that communicates the key information. For compliance-critical content like the unsubscribe link, consider using a live HTML text footer below the image slices.

The Slicing Workflow: Manual vs. Tools

Manual Workflow (Photoshop / Figma)

1. Design your email at 1200px wide (2x for retina)
2. Place horizontal guides at each slice boundary
3. Export each section as a separate image (JPEG or PNG)
4. Compress each image with TinyPNG or Squoosh
5. Build the HTML table structure manually or with a template
6. Add links to each image
7. Upload to Klaviyo and test

This process takes 30-60 minutes per email once you're experienced. The manual HTML coding and individual compression steps are the biggest time sinks.

Tool-Assisted Workflow

Tools like EmailSlicer automate the repetitive parts: upload your full design, define where to slice (or let the tool suggest cuts), compress each section automatically, and export directly to Klaviyo. What takes 30-60 minutes manually can be done in 5-10 minutes.

When NOT to Slice

Image slicing is the right choice for most marketing campaigns, but there are clear cases where it's not appropriate:

• Transactional emails: Order confirmations, shipping notifications, and password resets need dynamic data (order details, tracking numbers) that can't be baked into images. Use HTML.
• Personalized product recommendations: Klaviyo's dynamic product blocks pull different products for each subscriber. This requires HTML rendering.
• Long-form text content: Newsletters and educational emails where the text itself is the value. Live text is searchable, translatable, and accessible.
• Accessibility-critical campaigns: If a significant portion of your audience uses screen readers or has images disabled by default, HTML emails communicate better.

The best approach is often a hybrid: image-based sections for branded visual content, combined with HTML sections for dynamic data. Read our full comparison of image-based vs HTML emails.

Frequently Asked Questions

How many slices should an email have?

4-8 slices for a standard promotional email. The number depends on how many distinct clickable areas you need — each section linking to a different URL gets its own slice.

Do sliced emails work on mobile?

Yes. At 600px width, sliced images scale proportionally on mobile screens. Each slice stretches to the viewport width and stacks vertically. Set max-width: 100% on all images for proper scaling.

Why do gaps appear between slices in Outlook?

Outlook's rendering engine adds default spacing below images. Fix it with display: block on images, font-size: 0 on table cells, and explicit width/height attributes on every image tag.

Can I use sliced emails in Klaviyo?

Yes. Upload each slice as an image block in Klaviyo's drag-and-drop editor, stack them vertically, and add links individually. You can mix image-based sections with HTML-coded content blocks.

Is slicing the same as image maps?

No. Image maps use a single image with clickable coordinate hotspots. Slicing divides the image into separate files, each with its own link. Slicing is far more reliable across email clients — image maps have inconsistent support, especially on mobile.