Module 1: Image formats and compressionLesson 5 of 255 min read
Image transparency and the alpha channel, explained
A logo with a transparent background sits neatly on any page: white, dark or patterned. Convert that same logo carelessly and it arrives in a white box, or with a faint pale outline around its edges. Both problems come from one detail of how images store colour. This guide explains what the alpha channel is, which formats can carry it, and what really happens to the see-through parts when an image becomes a JPG.
Colour channels and the fourth one
A digital colour is a set of numbers. As MDN explains, each number is a channel, and in a typical image the channels say how much red, green and blue make up each pixel. To show a colour through which the background can be partly seen, a fourth channel is added: the alpha channel, which stores opacity.
In a PNG, web.dev notes, each pixel can be set to a level of transparency between 0, fully transparent, and 255, fully opaque. Everything in between is partial transparency.
One pixel, four numbers
A purple pixel with red 137, green 33, blue 242 and alpha 255 hides whatever is behind it. Change only alpha to 128 and the same purple lets roughly half of the background show through.
Why partial transparency matters
Fully transparent pixels are the obvious part: the empty area around a logo. The less obvious part is the edge. A round logo or a curved letter is drawn on a square grid of pixels, so the edge pixels are given in-between alpha values to make the curve look smooth instead of stepped. Soft shadows and glows are made the same way, from many half-transparent pixels.
This is why transparency isn't just on or off. A format that can only say see-through or solid has to round every edge pixel one way or the other.
Which formats can carry it
For a fuller comparison of these formats beyond transparency, see the guide on choosing between JPG, PNG, WebP and AVIF.
- PNG: full alpha transparency, MDN notes, and it is the usual fallback for any image needing transparency.
- WebP: supports transparency.
- AVIF: has alpha channel support.
- GIF: no alpha channel. One colour in its palette can be marked as transparent, so each pixel is either fully see-through or fully solid, which gives jagged edges on curves.
- JPEG: MDN states plainly that it does not support an alpha channel.
What happens when a transparent image becomes JPG
A JPG has nowhere to store alpha, so every pixel must end up as a solid colour. Converting therefore means placing the image on a background and recording the result. Fully transparent pixels become exactly the background colour. Half-transparent edge pixels become a mix of their own colour and the background, which keeps the edge looking smooth.
The catch is that the mix is fixed for ever. Edges blended onto white look right on white. Place that JPG on a dark page and the blended edge pixels, now partly white, show as a pale outline. The transparent area itself becomes a visible box in the background colour.
Alpha can't be restored
Once an image has been flattened onto a background, the information about which pixels were see-through is gone. Converting the JPG back to PNG gives you a PNG with a solid background, not the original transparency. Keep the transparent original.
Choosing the background colour
Pick the colour of the place where the image will sit: the page, slide, letterhead or form. White suits most documents. For a dark website header or a coloured slide, match that colour as closely as you can, so the box disappears and the soft edges blend in.
In PNG to JPG, set this in Background for transparent parts. The tool blends transparent and half-transparent pixels onto that colour. If you need the image on several different backgrounds, make one JPG per background, or keep using PNG or WebP, which keep transparency.
When to keep transparency instead
Convert to JPG only when you have a reason: a form that accepts JPG only, a service that rejects PNG, or a photo where transparency doesn't matter. For logos, icons, stickers and cut-out product shots that will be placed on different backgrounds, keep PNG, WebP or AVIF. The file stays flexible, and you decide the background each time you use it.
Turn a transparent PNG into a JPG and choose the background colour that matches where it will be used.
PNG to JPGQuick check
Three questions. Pick an answer to see why.
What does a pixel's alpha value describe?
Show the answer
Answer: How opaque the pixel is Alpha is the opacity channel, from fully transparent to fully opaque.
A logo flattened onto white shows a pale outline on a dark web page. Why?
Show the answer
Answer: Its soft edge pixels were blended with white when it became a JPG Half-transparent edges were mixed with the white background, and that mix is now fixed.
You convert a flattened JPG back to PNG. What do you get?
Show the answer
Answer: A PNG with a solid background The see-through information was removed when the JPG was made; PNG can't restore it.
Rules change
File formats and official photo rules change. Each guide shows the date it was last checked; for forms and official photos, the authority's own page has the final word.
Sources
Last checked October 27, 2026