Transparency is a fourth channel
A color pixel has red, green and blue values. A transparent-capable pixel adds alpha. The PNG specification defines it plainly: zero means fully transparent and the maximum value means fully opaque, with everything between partly see-through. At 8 bits per sample that is 256 levels of opacity; at 16 bits, 65,536.
When the image is placed on a page, the program blends it with whatever is behind. The PNG specification gives the formula, applied to each color channel:
Alpha 1 shows the pixel, alpha 0 shows the background, alpha 0.5 shows an even mix. The specification adds that PNG does not use premultiplied alpha: the color is stored as the subject's own color, not already darkened by its alpha.
Which formats can store it
| Format | Transparency | How |
|---|---|---|
| JPG (JPEG) | None | One or three color components, no alpha channel |
| PNG | Full | Alpha per pixel at 8 or 16 bits, or a tRNS chunk for simple cases |
| GIF | On or off | One palette color can be marked fully transparent |
| WebP | Full | Transparency in lossless and lossy modes |
| AVIF | Full | Alpha channel support |
JPG is the odd one out. The JFIF file format behind most JPG files has a standard color space of one component, grey, or three, YCbCr, and MDN states that JPEG does not support an alpha channel. A JPG has no place to say "transparent", so the background is always a solid color. A checkerboard pattern inside a JPG is just a picture of a checkerboard. When the destination needs a JPG, flatten the image onto the exact background color it will sit on.
GIF can mark one palette color as fully transparent, which MDN describes: pixels of that color are entirely transparent, all others opaque. There is no partial transparency, so curved edges look stepped on any background other than the one they were made for.
PNG's five image types
PNG is the usual choice because it is lossless and has full alpha. MDN recommends it over JPEG "when transparency is needed". Inside, the specification defines five types, and only two carry an alpha value for every pixel:
| Type | Color type | Bit depths | Transparency |
|---|---|---|---|
| Greyscale | 0 | 1, 2, 4, 8, 16 | Only one grey value transparent, via tRNS |
| Truecolor | 2 | 8, 16 | Only one color transparent, via tRNS |
| Indexed-color | 3 | 1, 2, 4, 8 | Alpha per palette entry, via tRNS |
| Greyscale with alpha | 4 | 8, 16 | Full alpha per pixel |
| Truecolor with alpha | 6 | 8, 16 | Full alpha per pixel |
Without an alpha channel, a tRNS chunk can still name one color as fully transparent, much like GIF. Indexed PNGs can give each palette entry its own alpha, which keeps flat logos small. Photos and soft cutouts need type 6, truecolor with alpha.
For the web, the PNG to WebP converter keeps the transparency in a smaller file. The full comparison of the formats is in JPG vs PNG vs WebP vs AVIF.
The arithmetic of a soft edge
Edges in photos and in anti-aliased artwork are not hard. A pixel on the border of a red object is partly red and partly whatever was behind it. Take a red of rgb(200, 30, 30), photographed against white, where the edge pixel is half covered. Its color in the photo is 0.5 × red + 0.5 × white = rgb(228, 143, 143), a pink.
Now cut the object out and place it on a dark page of rgb(20, 20, 20). What the edge pixel looks like depends on what the cutout stored:
| What the cutout stores | Result on the dark page |
|---|---|
| The pink, fully opaque | rgb(228, 143, 143), a light rim |
| The pink, at alpha 0.5 | rgb(124, 82, 82), a faint rim |
| The red, at alpha 0.5 | rgb(110, 25, 25), a clean dark edge |
The first row is the classic white halo: the cutout tool decided the pixel belongs to the object and kept its color, white mix included. The second is softer but still lighter than it should be. The third is correct: the subject's color, with alpha saying how much of the pixel it covers. The numbers ignore gamma for simplicity; the PNG specification notes that compositing should be done on intensity values, which changes the exact numbers but not which row shows a rim.
How to get clean edges
- Export from the source with transparency. A logo exported from the design file as PNG or SVG with no background has correct edges. Recreating transparency from a JPG of the logo is always a repair.
- Converting is not cutting out. JPG to PNG makes a lossless copy in a format that can hold alpha, ready for editing, but the background is still there until something removes it.
- Use a remover that sets partial alpha. The background remover separates subject and background in your browser and exports a transparent PNG. Check its edges with the next step.
- Check on dark and on light. A halo is invisible on white and obvious on black. Look at the cutout on both before you use it.
- Trim or recolor the rim. If a light edge remains, shrink the selection by a pixel or paint the edge pixels with the subject's color while keeping their alpha.
- Match the background when you must flatten. For a JPG or an email that strips transparency, put the cutout on the exact color of the destination. Then the edge mix is the right one.
For round profile pictures, the crop image to circle tool cuts a photo into a circle and saves a PNG with transparent corners, so it sits cleanly on any page color. For when vector is the better choice altogether, see SVG vs PNG, and for the file type labels browsers rely on, MIME types and file extensions.
Frequently asked questions
Why can't a JPG have a transparent background?
The format has nowhere to store it. JFIF, the usual JPG file format, holds one component (grey) or three (YCbCr color), and MDN states that JPEG does not support an alpha channel. A transparent area has to become a solid color when an image is saved as JPG.
Does converting a JPG to PNG make it transparent?
No. The conversion copies the pixels, including the white or colored background, into a format that can hold transparency. Someone still has to decide which pixels are background and set their alpha to zero, which is what a background remover does.
What causes a white halo around a cutout?
Edge pixels that still contain the old background. Along a soft edge, pixels are a mix of subject and background. If the cutout keeps that mixed color and only makes the outer pixels transparent, the light mix shows as a thin rim on a dark page.
Which format should I use for a logo with a transparent background?
SVG if it is vector artwork, otherwise PNG, which MDN describes as having full alpha transparency and recommends when transparency is needed. WebP and AVIF also carry alpha and are smaller on the web; keep a PNG for places that do not accept them.
Why does my transparent PNG get a solid background somewhere?
The program or site showing it did not use the alpha channel and flattened the image onto a color. In the file, every transparent pixel still has color values next to its zero alpha, and a program that drops the alpha shows those or fills in its own color. For such places, flatten a copy onto the right background color yourself.
Sources
- W3C: Portable Network Graphics (PNG) Specification, Third Edition, Recommendation 24 June 2025 (alpha from zero, fully transparent, to the maximum, fully opaque; no premultiplied alpha; color types and bit depths; tRNS; the compositing formula output = alpha × foreground + (1 − alpha) × background, computed on intensity samples)
- JPEG File Interchange Format, version 1.02 (standard color space of one or three components; Y alone or YCbCr)
- MDN Web Docs: Image file type and format guide (JPEG has no alpha channel; PNG with full alpha and preferred when transparency is needed; GIF with one transparent color index; WebP and AVIF transparency)