Email Image Compression for Klaviyo (Keep Quality, Cut Weight)

A long email exported at 2× as PNG can sit at 2–4MB before anyone notices. On a mediocre mobile connection that is not “crisp branding.” It is a spinner. Compression is not a polish step after the real work. It is part of the real work.

Targets I actually use

For the sum of all image slices, I aim under ~1MB when the design allows it, and I get uncomfortable past ~1.5MB on a routine promo. Heroes and product photos get more bits. Flat color bands and text-on-solid sections get fewer. Width is still usually ~600px CSS; the 2× export (~1200px) is fine if you compress after the slice, not if you ship the raw Figma PNG as-is.

One quality slider is a trap

Global “export at 60%” either turns the hero to mush or leaves a full-width spacer heavier than it needs to be. Per-slice compression exists because sections are not equal. Autosliced runs that before Klaviyo publish so you are not hand-tuning twelve files in ImageOptim every send (unless you enjoy that, and some people do).

Format

JPEG for photos and soft gradients. PNG when type or UI edges show JPEG snow. I still default most production pipelines to JPEG/PNG for inbox compatibility; WebP is great on the web and uneven in email clients unless you have tested your own dual-format path.

Do not treat the Figma export as the final asset. The export is the master. The slicer (or your compressor) makes the shippable bands.

A short workflow

1. Export / upload the full design.
2. Slice into logical sections.
3. Compress per slice (auto is ideal).
4. Zoom the hero to 100%. Look for banding on skies and mushy small type.
5. Preview on a throttled phone network if the campaign is image-heavy and high stakes.

Things that look productive and are not

Crushing everything to “40% quality just in case.” Leaving decorative full-bleed PNGs untouched. Spending an hour on compression and zero minutes on alt text. The lightweight email that says nothing when images are blocked is still a failure.

FAQ

Will Klaviyo fix oversized uploads for me?

Do not plan on it. Ship sane slices. ESP-side surprises are not a strategy.

Should I compress before or after slicing?

After. Compressing the full canvas first, then cutting, is how you bake artifacts into every band and still keep heavy empty regions. Slice, then compress.