> For the complete documentation index, see [llms.txt](https://help.peoplevine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.peoplevine.com/products/control-panel-overview/communications-overview/optimize-email-images.md). # How to Optimize Images for Email Campaigns ### Quick reference | Max width | Hard limit | Aim for this per image | | --------- | ---------- | ---------------------- | | 600px | 1 MB | < 200 KB | Email images behave differently from web images. Clients like Gmail, Outlook, and Apple Mail each render things slightly differently — and many block images by default. Getting the format, size, and dimensions right means your email loads fast, looks sharp, and doesn't get clipped before the reader sees your CTA. ### Instructions {% stepper %} {% step %} #### Use the right format for each image type One of the most common mistakes in email is using PNGs for everything. PNG is great for logos — but for photos and banners it creates unnecessarily large files. Here's the breakdown: | | JPEG | PNG | Avoid | | ------------ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Use for** | Photos and banners | Logos and transparency | WebP, AVIF, SVG | | **Examples** | Lifestyle and hero photos, banners with text overlays, product photography, complex scenes or gradients | Brand logos and wordmarks, icons with transparent background, assets on colored blocks, screenshots with sharp edges | WebP: poor Outlook support. AVIF: limited client support. SVG: blocked by most clients. GIF: fine for simple animation only. | {% hint style="warning" %} **Why PNG is not always best practice** A banner exported as PNG can be 3-5x larger than the same banner as a JPEG at 80% quality — with no visible difference on screen. PNG's advantage only matters for logos, icons, and images that need a transparent background. {% endhint %} {% endstep %} {% step %} #### File size targets that actually matter Your 1 MB limit is the hard ceiling — not the target. Heavy images hurt load times on mobile and can cause Gmail to clip your email before the reader reaches your CTA. Aim to keep each individual image well under that limit. > **Email Builder v2**: v2 accepts **`.jpg` and `.png` only, 1MB max** per image. See: [How to Use Email Builder v2](/products/control-panel-overview/communications-overview/email-builder-v2.md). | Per image — ideal | Per image — acceptable | Per image — compress first | | ----------------- | ---------------------- | -------------------------- | | 50-100 KB | 100-300 KB | 300 KB - 1 MB | {% hint style="warning" %} **Gmail clipping** Gmail hides the bottom of emails that are too heavy, replacing content with a "View entire message" link. Readers often miss the CTA entirely. Keeping images lean is one of the most effective ways to prevent this. {% endhint %} {% endstep %} {% step %} #### Width and resolution Email templates are typically 600px wide — matching your max width. But modern phones and laptops use high-DPI (retina) screens that display at double the pixel density. An image that's only 600px wide will look slightly blurry on those devices. The fix is simple: export at double the size and let the builder handle the rest. 1. **Export at 1200px wide** for any image displayed at full-width in the email. The builder constrains it to 600px, but the extra resolution keeps it crisp on retina screens. 2. **For smaller images** (logos, icons, thumbnails) — export at 2x whatever size they'll appear. A logo shown at 150px should be exported at 300px. 3. **Never scale up.** If your source file is already small, don't enlarge it — you'll just get a blurry, oversized file. Always start from the highest-resolution version you have. {% endstep %} {% step %} #### How to resize and export in Canva Canva is the fastest way to get correctly sized, well-compressed images for email without any extra tools. Follow this workflow every time: 1. Set your canvas to **1200px wide** from the start. This is your retina-ready export size — the builder will display it at 600px. 2. **Export photos and banners as JPEG.** Share > Download > File type: JPG > Quality: 80%. This is the sweet spot between file size and visual quality for email. 3. **Export logos and transparent assets as PNG.** Share > Download > File type: PNG. Leave quality at default. 4. **Check the file size** in the download dialog. If a JPEG is still over 300 KB, drop quality to 70% and re-export. {% hint style="info" %} **Resizing on Mac without extra software** Open the image in Preview > Tools > Adjust Size. Set the width to your target, keep the aspect ratio locked, then File > Export. Choose JPEG and set Quality to 80% for photos, or PNG for logos. {% endhint %} {% endstep %} {% step %} #### Run images through TinyPNG before uploading Even after a clean Canva export, running your images through TinyPNG takes 30 seconds and typically reduces file size by another 40-70% — with no visible quality difference. It works on both JPEG and PNG. Drag your image onto the page, download the compressed version, upload that to your email builder. Free for up to 20 images per month — more than enough for most campaigns. [tinypng.com](https://tinypng.com) {% endstep %} {% step %} #### A few email-specific rules to always follow 1. **Always write alt text for every image.** Many recipients have images blocked by default — the alt text is all they'll see. Write it to convey the message: "Summer sale — up to 40% off" not "banner image". 2. **Don't put critical information inside an image.** If your main message, offer, or CTA is baked into a graphic, readers with images blocked will miss it entirely. Keep the important stuff in live text. 3. **Send a test to yourself and a couple of colleagues before every send.** Open it on your phone, on desktop, and in a different email client if you can. If something looks off — stretched, blurry, missing — you'll catch it before it goes to your full list. {% endstep %} {% endstepper %} ### Pre-send checklist * **JPEG for photos and banners, PNG for logos and transparent assets** * Not PNG across the board * **Exported at 1200px wide for full-width images** * Keeps images sharp on retina screens * **Each image under 200 KB, total email under 1 MB** * Run through TinyPNG if needed * **Alt text written for every image** * Descriptive enough to stand alone if images are blocked * **Test sent to yourself and a colleague** * Check on mobile, desktop, and different email clients before sending *Last updated: 2026-03-25* --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.peoplevine.com/products/control-panel-overview/communications-overview/optimize-email-images.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.