A checkerboard preview is not proof that a file is transparent. The final file must contain the transparency the page needs, and it must still look right on the site’s real backgrounds.
Understand the symptom
- Alpha means each pixel can have its own opacity value. PNG and WebP support it for static images; WebP can also animate.
- Premultiplied edges occur when edge color has already been blended with transparency. A light fringe can appear on a dark page, or a dark fringe on a light page.
- A white, black, or patterned background may indicate missing alpha, a baked-in background, edge color, or unsuitable artwork. The symptom alone does not identify the cause.
Choose a format
| Requirement | Starting point | What it provides | Main limitation | Browser note |
|---|---|---|---|---|
| Static logo, icon, diagram, or cutout with partial edge transparency | PNG | Lossless compression and full alpha support | It can be larger than WebP for a particular image | MDN lists full feature support in Chrome, Edge, Firefox, Opera, and Safari |
| Static image where transfer size matters, or WebP animation | WebP | Transparency, animated frames, and higher color depths than GIF | A particular export still needs visual and transparency checks | MDN lists Chrome, Edge, Firefox, Opera, and Safari; support is less broad than PNG’s |
| Simple animation where broad historical compatibility matters | GIF | Simple animation using 8-bit indexed color | Only one palette entry is fully transparent; full-color artwork can show dithering | MDN lists Chrome, Edge, Firefox, Opera, and Safari |
| Lossless basic animation without sound synchronization | APNG | PNG-based animation with several color-depth choices | It is intended for animation that does not need to synchronize with activities or sound | MDN lists Chrome 59, Edge 12, Firefox 3, Opera 46, and Safari 8 |
| Interface artwork that must stay accurate at different sizes | SVG | Vector rendering for icons, diagrams, and other interface elements | It is not a substitute for a raster photograph or product cutout | MDN lists Chrome, Edge, Firefox, Opera, and Safari |
| Photograph where transparency is not required | JPEG | Lossy compression for still images | JPEG does not support an alpha channel | MDN lists Chrome, Edge, Firefox, Opera, and Safari |
PNG is a practical default for static transparent artwork. A soft-edged product cutout can use per-pixel alpha. GIF is a poor starting point for soft edges because its transparency is binary at the pixel level.
A smaller transfer is useful only after the image passes the visual checks. Compare the actual files, not an assumed size.
Three clearly hypothetical examples
These scenarios are original examples, not measurements or claims about a particular editor.
- Static logo: A logo has sharp lettering and a semi-transparent shadow. Export PNG first and test it on light and dark page backgrounds. If a WebP export is also available, compare its actual size and edge appearance rather than assuming it will be smaller.
- Product cutout: A photograph has a soft edge and must remain transparent. PNG is the safer first choice. If WebP is considered, inspect its alpha and repeat the background tests. GIF is unlikely to preserve the soft edge well.
- Basic animation: A badge changes color in a short loop without sound. GIF is the compatibility-oriented option. APNG offers more color-depth choices for basic animation, while WebP is another candidate where its support and fallback needs fit the site.
Verification workflow
- Start with the editable source. Keep the layered source separate from the web export. Confirm that the intended transparent area is genuinely transparent, not painted white or black. For SVG, check the artwork and canvas rather than an oversized empty area.
- Match the export to the format. This is a recommendation, not a claim that every editor offers the same control. PNG and WebP exports should use the intended alpha; GIF should use the intended transparent palette entry. Check animation sequence and timing when animation is required.
- Inspect the actual export. Open the final file in a viewer or inspection tool that reports alpha information. If it reports no alpha channel, the file cannot satisfy a transparency requirement. Record the filename, format, dimensions, size, and transparency method. The File API documentation describes file name, size, and MIME type as separate properties.
- Test the real page. Place the final file on a light background and a dark background. Add neutral gray when a colored fringe is suspected. A patterned background can reveal an opaque export. Check the subject at its displayed size for missing transparency, a baked-in background, edge fringes, incorrect edge softness, or a pattern showing through.
- Test the site’s browsers. Open the draft page containing the exact uploaded file in the site’s primary desktop and mobile browsers. For animation, watch the complete loop for missing frames, incorrect timing, or residual pixels. If a format has incomplete support, test a separate fallback such as PNG, WebP, or JPEG.
- Keep the record. Record each candidate’s size and visual result. Do not use a universal size target. Retain the layered source, final export, dimensions, size, background results, and browsers checked.
Troubleshooting
- Opaque background: Re-export from the editable source with alpha or the intended transparency method enabled. JPEG cannot be repaired by renaming it; use a supported transparent format such as PNG or WebP.
- White or black fringe: Check the source edges, export settings, and transparency method, then repeat the light, dark, and gray tests. There is no universal fix for every halo.
- Patterned background visible: Inspect the exact export for usable alpha or the correct GIF palette entry. A valid transparent file can still look wrong on one page background.
- Animated-frame artifacts: Watch every frame and check timing, partial-frame rendering, and animation export settings. GIF’s palette and transparency model can make full-color or soft-edge results worse than PNG-based animation.
- Fallback does not work: Confirm that the site actually serves a supported alternative. Changing only the extension does not create a fallback.
- File is unexpectedly large: Compare the actual exports, dimensions, and animation length. The supplied guidance does not establish a universal size threshold.
Final checklist
- The editable source has the intended transparent area.
- The export enables alpha or the intended transparency method.
- GIF transparency, if used, is checked against the correct palette entry.
- The exported file has usable alpha or supported transparency.
- Dimensions, filename, format, and file size are recorded.
- The final file, not a preview or placeholder, is tested.
- The image passes on a light background.
- The image passes on a dark background.
- Edge color and softness are acceptable at the displayed size.
- The file opens in the site’s primary desktop browser.
- The file opens in the site’s primary mobile browser.
- Animated frames play correctly, if animation is required.
- Any fallback is provided and tested.
- The served file is retested after upload.
- The layered source and final export are retained.
The final gate is the served file in the real page context. A format can support transparency generally while a particular export still contains an opaque background or visible edge artifacts.
Documentation: MDN: image formats.
Research and limitations
This guide was prepared with AI assistance using the official sources linked in the text, automated checks and a separate model review. It is not a claim of hands-on testing or human expert verification. Provider terms can change; check the linked documentation before making a commitment. Examples identified as hypothetical are not measured benchmarks. Tell us about an error.