ImgShift🌐 δΈ­ζ–‡

Transparent images explained

Transparent does not mean white β€” it means no pixel at all. Once that clicks, the odd behaviour makes sense.

What transparency actually is

A pixel normally holds three numbers: red, green and blue. Formats that support transparency add a fourth β€” alpha, meaning how opaque that pixel is.

Alpha 0 means fully transparent, 255 means fully solid. The grey chequerboard you see in an image viewer is not part of the file; it is the viewer telling you "there is nothing here".

Which formats support it

PNGYes β€” the web default for transparent assets
WebPYes, and smaller
GIFOnly fully transparent or fully solid β€” jagged edges
SVGYes (vector art has no background by definition)
JPGNo
BMPNo in the common variants
ICOYes

Why transparent areas turn white (or black) in JPG

JPG has no alpha channel β€” only RGB. So when a transparent image is written as JPG, every "empty" pixel has to be given a colour. Different software makes different choices:

  • Most tools, including the ones here, fill it with white.
  • Some older software fills nothing, and the area comes out black.
  • Others composite onto white and land in the same place as the first case.

It is not a bug; it is the format. If transparency matters, do not save as JPG.

So what do you do when you need JPG?

  • Choose the background instead of losing it. If the image will sit on a navy slide, fill the transparent area with navy. PNG to JPG lets you pick the colour.
  • Use WebP instead. It supports transparency at roughly JPG-like sizes, and everything modern reads it. Converting to WebP is usually the best answer.
  • Keep the PNG. For the web, PNG's transparency and quality are rock solid β€” the only cost is file size.

Practical rules for web assets

  • Logos and icons that sit on arbitrary backgrounds should always be WebP or PNG, never JPG.
  • If the edges are feathered (semi-transparent pixels rather than a hard cut), JPG will force those pixels to a solid colour and the edge goes ragged. This is the single most common transparency accident.
  • Icons for favicons are safe: ICO supports transparency too.
  • For dark mode, dark line art disappears against a dark background β€” add a light outline or ship a second, light-on-dark version.

Try it

PNG to JPG lets you set the fill colour; PNG to WebP keeps transparency intact. Both run locally in your browser.

JPG β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’GIF β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’BMP β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’SVG β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’AVIF β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’ICO β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’