A logo looks fine on a white artboard, then gains an ugly white box when you place it on a dark website header. That usually happens because the file was saved in the wrong format. If you are asking which image format supports transparency, the quick answer is PNG, WebP, GIF, SVG and TIFF can all support it. However, PNG and WebP are usually the best choices for everyday website and social media work.
Transparency is not simply a background colour that has been removed. It is image data that tells a browser, design app or document where pixels should be invisible or partly visible. Choosing the right file protects clean edges around text, products, logos and cut-out people.
Which image format supports transparency for your job?
The best format depends on where the image will be used, how detailed it is and whether file size matters. A sharp logo needs different treatment from a large product photograph or a simple animated sticker.
PNG: the reliable choice for transparent images
PNG supports full transparency, including semi-transparent pixels. This means it can preserve smooth edges around curved lettering, hair, shadows and rounded product shapes. It is the standard choice for logos, icons, screenshots, charts and graphics that need a transparent background.
PNG uses lossless compression, so saving it does not reduce image quality in the way a JPEG save normally does. The trade-off is file size. A detailed PNG photo can become much larger than a JPEG or WebP version, which may slow a webpage if several are loaded at once.
Choose PNG when image quality and clean transparent edges are the priority. For a logo that will appear over different website colours, PNG is a safe and widely compatible option.
WebP: transparency with smaller web files
WebP also supports full transparency and can produce much smaller files than PNG, especially for photographic or complex graphics. It is a strong option for modern websites where page speed matters. You can use WebP for product cut-outs, blog images, banners and transparent illustrations.
WebP can be saved as either lossy or lossless. Lossy WebP reduces file size more aggressively, while lossless WebP preserves every pixel. In both cases, transparency can remain available. That flexibility makes it useful when you need a good balance of quality and performance.
The main consideration is workflow. Older software and a few legacy systems may not handle WebP as comfortably as PNG, although current browsers support it well. Keep a PNG copy of an important brand asset if you need to share it with clients or use it in older programmes.
GIF: transparency for simple animations
GIF supports transparency, but with a major limitation: it only allows one fully transparent colour. It cannot create soft, partially transparent edges. As a result, a GIF cut-out may show jagged outlines or a visible halo against a coloured background.
GIF also has a limited colour palette of up to 256 colours. It is suitable for simple animated graphics, small icons and basic memes, but it is not the best option for a polished logo, a product image or a high-quality photo.
Use GIF when you need simple animation and can accept limited image quality. For a static transparent image, PNG or WebP is usually better.
SVG: best for vector logos and icons
SVG supports transparency and is different from the other formats on this list. It is a vector format, meaning it stores shapes, paths and text instructions rather than a fixed grid of pixels. An SVG logo stays crisp whether it is displayed on a small mobile button or enlarged for a large display.
You can set entire SVG elements to be transparent or give them partial opacity. This makes SVG excellent for simple logos, line icons, diagrams and interface graphics. Files are often very small when the artwork is uncomplicated.
SVG is not a replacement for every image. It is unsuitable for normal photographs and can become difficult to edit if it contains overly complex artwork. For a logo supplied as vector artwork, though, SVG is often the cleanest web option.
TIFF: transparency for professional print workflows
TIFF can support transparency through an alpha channel, and it is used in some professional photography, publishing and print workflows. It can hold high-quality image data and is useful when files will be edited repeatedly before final output.
For everyday online use, TIFF is rarely the practical choice. Files are large, loading is inefficient and browser support is not as convenient as PNG, WebP or SVG. Use it when a printer, designer or production workflow specifically requests it, not as a general web image format.
Formats that do not support true transparency
JPEG or JPG does not support true transparency. If a JPEG appears to have a white, black or coloured background, that background is part of the image. Saving a transparent PNG as a JPG will replace the transparent areas with a solid colour, commonly white.
This is why a logo may look wrong after a quick conversion. JPG is excellent for photographs where smaller files matter and no transparent background is needed. It is a poor choice for logos, watermarks, icons and cut-out graphics.
BMP is also not a dependable format for transparent web graphics. Some BMP variations can store alpha information, but support is inconsistent and files are unnecessarily large. It is better avoided for website use.
How to choose PNG, WebP or SVG
For most quick decisions, use the content of the image as your guide. A logo or icon made from shapes and text should be SVG where possible. A logo, screenshot or design with detailed edges should be PNG. A large transparent website graphic or product cut-out should usually be WebP when your publishing system accepts it.
If you need animation, consider GIF only for basic visuals. Its transparency and colour limits show quickly on professional designs. Modern animated formats can offer better quality, but compatibility and platform requirements should guide the final choice.
There is also no harm in keeping a master file and creating different exports. For example, keep an SVG or high-quality PNG logo as the original, use PNG where compatibility is essential, and create a WebP copy for faster website delivery. One file format does not have to do every job.
Check whether your image really has transparency
A chequered grid in an editor normally indicates transparent areas, but verify the exported file before uploading it. Place the image over a dark background and then a bright coloured background. If you see a white rectangle, the transparency was lost during export or conversion.
Pay close attention to edges. A rough outline around hair, smoke, glass or shadows can mean the image was flattened, poorly selected or exported as GIF. Semi-transparent pixels are needed for naturally blended edges, which is one reason PNG and WebP perform better for complex cut-outs.
When using a browser-based converter, select PNG or WebP as the output format and check whether the source file already contains transparency. A converter can preserve transparent pixels, but it cannot restore genuine transparency that was removed when an image was previously saved as a JPEG.
File size matters after transparency
Transparency can increase a file’s weight, particularly with PNG. This is not a reason to remove it when it is needed, but it is a reason to export thoughtfully. Resize images to their actual display dimensions before uploading them. A 3,000-pixel-wide transparent logo is wasteful if the website shows it at 300 pixels wide.
For site owners, WebP is often the practical performance choice for larger transparent images. For small brand marks and assets that need broad compatibility, PNG remains dependable. Test the image on the real page rather than deciding solely from the file size shown on your computer.
A transparent image should disappear into its background, not announce itself with a box, halo or slow page load. Start with PNG for dependable quality, choose WebP when a smaller web file helps, and use SVG whenever your logo or icon is genuinely vector-based.