Email clients cannot reliably guess what color belongs behind a transparent PNG. Most fall back to a default such as white, light gray, or the message background, which means a logo, signature, or product cutout attached to a message may arrive looking very different from how it appeared on screen. The reliable fix is to flatten the PNG into an opaque image with a chosen solid background before you attach it, so the recipient sees exactly the colors you selected. The Add Background to PNG tool does this in a single pass: each pixel is composited over a solid color, the canvas keeps the original width and height, and the result is exported as a new opaque PNG whose filename ends in -background so the transparent source stays untouched. Because the entire pipeline reads the source from a local file, composites in memory, and writes the result through the browser, no upload step is involved, which matters when the image contains a draft logo, an unreleased product mock, or a private signature.
Why Transparent PNGs Cause Problems in Email Attachments
Transparent PNGs rely on a property that most email clients handle poorly: an alpha channel. An alpha channel lets each pixel carry its own transparency value, so a logo can sit on top of any webpage background without a visible box around it. That same property becomes a problem the moment the image leaves the browser, because the email client has no idea what color the surrounding design intended to be behind the artwork.
How that missing color gets filled in varies by client. Some clients substitute the message background color, so a logo intended for a light website arrives looking fine in a light message and broken in a dark one. Other clients substitute a fixed default such as white or light gray. Still others render transparent pixels in a checkerboard pattern or simply show the layer as black. A few mobile mail apps flatten attached images to JPG on the server side, which deletes the alpha channel entirely and locks the result onto whatever white background the conversion picks.
The practical consequence is that the PNG you see on your screen is not necessarily the PNG your recipient sees. Adding a solid background before attaching gives every client the same starting data and removes the guesswork. It also avoids the worst case in which an automated conversion strips your transparent logo into a JPG sitting on a muddy gray rectangle.
Add a Background to a PNG for Email in Three Steps
- Open Add Background to PNG in your browser and choose the transparent or partly transparent PNG you plan to attach. The file can be up to 25 MiB before decoding, and the decoded image can be up to 16 megapixels, with no edge longer than 12,000 pixels.
- Pick a solid background color using the browser's color control. The input expects a six-digit hexadecimal value and the logic validates it before processing begins, so an invalid entry fails fast rather than producing a garbled output.
- Select Add background, inspect the result in the on-page preview, then download the PNG. The output uses the exact source width and height and the filename adds -background so the original transparent file stays easy to identify in your downloads folder.
Each step runs locally. The browser decodes the file, reads pixel data into an in-memory canvas, composites every pixel over the chosen background, rounds each channel to 8 bits, and exports the new PNG through a temporary local Object URL that is released when the image changes or the page closes. No image, color choice, or output is sent to Lizely, which is useful when the image contains a draft logo, an unreleased product mock, or a personal signature.
Matching the Background to the Email's Design
The right background color is the color the recipient will actually see behind the image. Guessing from a checkerboard preview is not reliable, because the same flattened PNG can look correct in one message layout and wrong in another.
For everyday attachments such as invoices, internal memos, or simple product photos, plain white (FFFFFF) is a safe default and matches the body color of most email clients. For marketing emails and brand assets, use the exact HEX value defined by your brand system rather than an approximation. For dark-themed newsletters or night-mode recipients, choose a dark neutral such as 1A1A1A so the artwork does not appear inside a bright white box against an otherwise dark message. If you do not know the exact color, sample it from the destination page or from a reference image with the Image Color Picker tool before you flatten the PNG.
| Email destination | Recommended background | Reason |
|---|---|---|
| Standard inbox (Gmail, Outlook web) | White FFFFFF | Matches most message body backgrounds |
| Brand newsletter or marketing email | Brand HEX from style guide | Keeps logos and artwork on-brand |
| Dark-mode newsletter | Dark neutral, e.g. 1A1A1A | Prevents a bright box inside a dark layout |
| Printed or scanned attachment | White FFFFFF | Printers expect opaque white paper tone |
| Document or signature on legal paper | White FFFFFF | Mimics the actual paper surface |
Once the background is chosen for the actual destination, the recipient sees the same image on their end that you saw on yours.
How Soft Edges Get Composited Over the New Background
The most common mistake when flattening a transparent PNG is treating anti-aliased edges and shadows as either fully transparent or fully opaque. Around curved logos, signatures, hair, and feathered shadows, many edge values are only partly transparent, and a blunt replacement either produces a visible halo or a sharp cut-out that does not match the original design.
Add Background to PNG uses standard source-over compositing with an opaque backdrop, the same approach defined in the W3C Compositing and Blending specification. For each decoded RGBA pixel, the source RGB is multiplied by the source alpha and the background RGB is multiplied by one minus the source alpha; the contributions are added, each channel is rounded to an ordinary 8-bit integer, and the output alpha is set to fully opaque.
For example, take a half-transparent red source pixel sitting over a fully transparent area you intend to fill with a blue background. The source color is (255, 0, 0) with alpha 128 out of 255, which is roughly 0.502. The background is (0, 0, 255). The red channel of the result is 255 × 0.502 + 0 × 0.498 ≈ 128.01, rounded to 128. The green channel is 0 × 0.502 + 0 × 0.498 = 0. The blue channel is 0 × 0.502 + 255 × 0.498 ≈ 126.99, rounded to 127. The output pixel is (128, 0, 127), a purple, which is exactly the visual color the eye would have perceived if the red had originally been drawn over blue. A fully opaque source pixel would be passed through unchanged, and a fully transparent pixel would become the background color exactly.
| Source pixel state | Alpha | Result after compositing |
|---|---|---|
| Fully transparent | 0 | Exactly the chosen background color |
| Half-transparent | ≈ 128 / 255 | 50/50 blend of source and background |
| Mostly transparent | Low nonzero value | Background-dominant blend |
| Fully opaque | 255 | Source pixel unchanged |
This is standard source-over compositing with an opaque backdrop, not a threshold or a rough transparency mask. That distinction is what keeps anti-aliased text, soft shadows, hair, rounded icons, and feathered cutouts looking like the original artwork instead of revealing a hard edge where the transparency used to be.
Final Checks Before Attaching the PNG to an Email
Once the opaque PNG is downloaded, a few quick checks save a round-trip with the recipient:
- Open the result and confirm the width and height match the original. The tool keeps the source dimensions, but if the file was exported through other software first the size can drift.
- Zoom into the soft edges of any signature, logo, or hair detail and compare them against the chosen background. A clean result shows the edge color shifted smoothly into the background, with no visible halo.
- Check the file size. A flattened PNG with a solid background often compresses smaller than the transparent original, because large blocks of identical color encode efficiently.
- If the destination email layout expects a specific pixel size, flatten the background first and then change the dimensions with the Image Resizer tool. Separating the two steps keeps each transformation predictable.
- If the attachment must be a JPG instead of a PNG, convert the flattened PNG using the PNG to JPG tool. Resizing or recompressing before flattening can introduce quality loss around the soft edges that the background step would otherwise handle cleanly.
The whole workflow happens locally. The PNG is decoded in the browser, pixel data is read from an in-memory canvas, the compositing math runs on the device, and the result is exported through a temporary local URL. Nothing about the image, the chosen color, or the output is transmitted to Lizely, which makes the tool useful for confidential drafts and private product imagery, although you should still follow your organization's local-device rules for any image that contains sensitive content.
Related reading: Black and White Photo Converter for Email Attachment.