Image Optimization in Klaviyo Emails

I pulled up a client's Klaviyo account last month and their flagship promotional email was 4.2 MB. Four point two megabytes. For a single email.

For context, that's bigger than most web pages. It's bigger than a lot of mobile apps. And they were sending it to 50,000 subscribers, most of whom were opening it on their phones over a cellular connection.

The email took 8+ seconds to load on mobile. By the time the hero image appeared, half the audience had already closed it and moved on with their lives. The click rate was 1.2%. For reference, industry average for eCommerce promotional emails is around 2.5-3.5%.

We rebuilt the same email with optimized images. Total size: 380 KB. Load time: under 2 seconds. Click rate jumped to 3.8% with no other changes. Same copy. Same offer. Same audience. Just lighter images.

Images are the number one performance killer in Klaviyo emails, and most brands have no idea their images are the problem.

Why Email Image Size Matters

Load time. Email clients don't pre-load images the way browsers do. When someone opens your email, the images are downloaded in real-time. Heavy images mean slow loading, especially on mobile connections. A 3-second delay in email rendering increases the chance of someone closing the email by 40%.

Deliverability. ISPs (Gmail, Yahoo, Outlook) evaluate email weight as a factor in spam filtering. Emails over 100 KB of HTML (not including images, just the code) are more likely to be clipped by Gmail. Emails with extremely large images can trigger spam flags because they look like image-heavy promotional spam.

Image blocking. Many email clients block images by default. Outlook, some corporate email servers, and some privacy-focused configurations won't show your images until the user clicks "display images." If your email is 90% images, those users see a blank email.

Dark mode rendering. Heavy, poorly optimized images handle dark mode worse than lightweight ones. Transparent PNGs with large file sizes sometimes display artifacts or rendering issues in dark mode email clients.

The Target Numbers

Here's what we aim for on every Klaviyo email we build:

| Metric | Target | Why | |---|---|---| | Total email size (images + HTML) | Under 600 KB | Fast load on mobile | | Individual image file size | Under 100 KB each | Prevents any single image from bottlenecking | | Image dimensions (hero) | 600px wide | Standard email width; no need to serve larger | | Image format | JPEG for photos, PNG for graphics with text | Right format for right content | | Number of images | 3-5 per email | More than that, and you're building a lookbook, not an email | | Image-to-text ratio | 60/40 or 50/50 | Too image-heavy triggers spam filters |

How to Optimize Before Uploading to Klaviyo

Klaviyo doesn't optimize your images for you. Whatever you upload is what gets served. So the optimization happens before you upload.

Step 1: Resize to email width.

Most email templates render at 600px wide. If your product photographer sends you a 4000x6000 pixel image, you're serving a file that's 6.5 times wider than it needs to be. The email client will scale it down visually, but the full-size file still has to download.

Resize your images to 600px wide for full-width images, 300px wide for half-width images, and 200px wide for thumbnail-sized images. Do this in any image editor (Photoshop, Figma, even Preview on Mac).

For retina displays, you can go up to 1200px wide (2x) to ensure sharpness on high-DPI screens. But don't go beyond 2x. A 1200px-wide image at quality 70 is still smaller than a 4000px image at quality 100.

Step 2: Choose the right format.

JPEG: For photographs, product images, lifestyle shots, and any image with complex color gradients. JPEG uses lossy compression, which means it sacrifices some quality for much smaller file sizes. At quality 70-80, the difference is invisible to the human eye.

PNG: For graphics with text overlays, logos, icons, and images that need transparency. PNG is lossless, so file sizes are larger. Use it only when you need transparency or have sharp text/graphics that JPEG would blur.

GIF: Only for simple animations (and keep them under 200 KB). Animated GIFs in emails can be engaging but they're heavy. A 2-second product showcase GIF can easily hit 1-2 MB if not optimized.

WebP/AVIF: Not widely supported in email clients yet. Stick with JPEG and PNG for maximum compatibility.

Step 3: Compress.

After resizing and choosing the format, compress the file. Tools we use:

• TinyPNG (tinypng.com): Free, handles both JPEG and PNG, typically reduces file size by 50-80% with no visible quality loss.
• Squoosh (squoosh.app): Google's free tool, gives you a side-by-side comparison of original vs. compressed so you can dial in the quality.
• ImageOptim (Mac app): Batch compression for multiple files at once.

Run every image through compression before uploading to Klaviyo. No exceptions.

Step 4: Name the files descriptively.

This doesn't affect performance, but it affects your workflow. hero-spring-sale-2025.jpg is findable in Klaviyo's content library. IMG_4857_final_v3_EDIT.jpg is not.

Optimizing Images Inside Klaviyo

Once your images are uploaded, there are Klaviyo-specific optimizations to apply:

Alt text on every image. When images are blocked by the email client, the alt text shows in place of the image. Write alt text that communicates the message even without the visual. Not "image1" or "product photo." Write "Spring Collection - 25% off all dresses through Sunday."

Good alt text serves double duty: it's accessible for screen readers and it communicates your message when images don't load.

Link every image. Every image in your email should be clickable. Product images link to product pages. Hero images link to collections or landing pages. Even decorative banners should link to something relevant. Subscribers click on images instinctively — make sure those clicks go somewhere.

Use background colors behind images. If an image fails to load, the subscriber shouldn't see a broken layout. Set a background color on image blocks that matches your email template. This way, even without the image, the email looks intentional.

Avoid text in images. Text rendered as part of an image (like a promotional banner with the sale details baked into the graphic) creates several problems:

• It's not searchable by email clients
• It's not readable by screen readers
• It's not visible when images are blocked
• It can't be translated
• It looks blurry on retina screens unless you serve 2x images

Instead, use Klaviyo's text blocks layered over background images. The text renders as HTML (sharp, searchable, accessible) and the image provides the visual.

The Image-to-Text Ratio

Spam filters evaluate the ratio of image content to text content in your emails. An email that's 100% images (even if it contains text baked into the images) looks like spam to ISPs because that's a common spam technique — hiding deceptive text in images to bypass content filters.

The safe ratio: at least 40% of your email content should be actual HTML text. Aim for 50/50 or 60/40 (images/text).

How to check: In Klaviyo's email editor, look at your email in text-only preview. If you see almost nothing, your email is too image-heavy. There should be readable text that communicates the key message even without any images.

Handling Product Images in Emails

Product images in emails need special consideration:

Consistency. All product images in a single email should have the same aspect ratio, background color, and style. Mixed styles (some on white backgrounds, some lifestyle, some with shadows, some without) look unprofessional and distract from the products.

Background removal. For grid-style product emails (showing 4-6 products), images with transparent or white backgrounds create the cleanest look. If your product photos have varied backgrounds, consider using a background removal tool before uploading.

Size uniformity. In a product grid, all images should be the same pixel dimensions. In Klaviyo's template editor, set fixed dimensions for image blocks in your product sections. This prevents layout shifts where one image is larger than another.

Dynamic product images. If you're using Klaviyo's catalog features for dynamic product recommendations, the images are pulled from your Shopify catalog. Make sure your Shopify product images are optimized at the source — whatever Shopify serves is what Klaviyo will display.

Testing Image Performance

Before sending any campaign, test image rendering:

Email preview in Klaviyo. Use Klaviyo's preview function to check desktop and mobile rendering. But don't stop here — Klaviyo's preview doesn't perfectly replicate every email client.

Send test emails. Send tests to yourself on multiple email clients: Gmail (web and mobile), Apple Mail, Outlook (desktop and mobile), and Yahoo Mail. Check that images load, display correctly, and don't break the layout.

Dark mode testing. Open your test email on a phone with dark mode enabled. Check that images with white backgrounds don't create harsh white rectangles against the dark email background. If they do, consider using images with transparent backgrounds or adding a subtle border.

Image blocking test. In your email client settings, temporarily disable image loading. Open your test email. Can you still understand the message? Is the alt text informative? Is the email still functional? If the email is completely meaningless without images, you need more HTML text.

Load time test. Open the email on a mobile phone connected to a slower network (or throttle your connection using developer tools). If images take more than 3 seconds to appear, they're too heavy.

Common Image Mistakes in Klaviyo

Uploading screenshots. Screenshots from Canva or Figma are often PNG files at 2-3x the necessary resolution. They can be 1-5 MB each. Always export at the correct dimensions and compress before uploading.

Using GIFs for static content. I've seen brands upload animated GIFs that contain a single frame — just a static image saved as a GIF. GIF files are significantly larger than JPEG for the same visual content. If it doesn't animate, it shouldn't be a GIF.

Ignoring Klaviyo's content library. Klaviyo stores every image you've ever uploaded. Over time, this becomes a mess of duplicate files, old versions, and test images. Periodically clean out your content library and maintain organized folders.

Not compressing lifestyle photos. Lifestyle photography (models wearing products, product-in-context shots) tends to have the largest file sizes because of the complex colors and details. These are the most important images to compress.

Using full-bleed images on every email. Not every email needs a giant hero image. Some of the highest-performing emails we've built use small product thumbnails and rely on strong copy. Don't default to "big image at the top" for every send.

A well-optimized email loads fast, renders clean across clients, communicates its message even when images are blocked, and doesn't get flagged as spam. That's the bar. Meet it, and your engagement metrics will show the difference immediately.

---

Want us to optimize your Klaviyo email templates for performance? Book a free strategy call and we'll audit your current templates and show you where the weight is hiding.