Images without background: transparency formats (PNG, WebP, SVG, AVIF) and how to choose

What "image without background" means (alpha channels and 1-bit vs real alpha transparency)

An image "without background" is one where certain areas are completely transparent, allowing you to see what's behind. Technically, this is achieved through an alpha channel that defines the opacity of each pixel.

There are two main types of transparency:

• 1-bit transparency (binary): Each pixel is 100% opaque or 100% transparent, with no intermediate values. Produces jagged edges on diagonals. Used in GIF.
• Real alpha transparency (8-bit or higher): Allows 256 opacity levels (or more), creating smooth edges with antialiasing. Standard in PNG, WebP, AVIF and SVG.

The alpha channel adds additional information to each RGB pixel, converting it to RGBA where A (alpha) defines transparency from 0 (invisible) to 255 (opaque).

Formats that support transparency

PNG (8/24/32-bit; alpha) — when it's convenient

PNG (Portable Network Graphics) is the most used format for transparency. Supports:

• PNG-8: up to 256 colors with 1-bit or alpha transparency
• PNG-24: 16.7 million colors without alpha
• PNG-32: RGB + full alpha channel (millions of colors with smooth transparency)

Advantages: Lossless compression, perfectly sharp edges, universal support (100% browsers), ideal for logos, icons, screenshots, UI.

Disadvantages: Large files compared to WebP/AVIF, especially in complex photographs.

When to use: When you need maximum quality without degradation, total compatibility, or working with interface designs, logos and graphics with defined edges.

WebP (lossy/lossless + alpha) — current support and size

WebP is Google's modern format that supports transparency in both modes:

• WebP lossless with alpha: Similar to PNG but 20-30% lighter
• WebP lossy with alpha: Aggressive compression maintaining transparency, ideal for cropped photos

Support: >96% browsers (Chrome, Edge, Firefox, Safari 14+, Opera). Practically universal in 2025.

Advantages: Significantly smaller files than PNG, high-quality transparency, lossy/lossless flexibility.

Disadvantages: Encoding/decoding slightly slower than PNG, lossy quality can create subtle artifacts on edges.

When to use: Modern web optimization, especially for photographs with cropped subject, or when file size is critical (mobile-first).

AVIF (alpha + superior compression) — performance and cautions

AVIF (AV1 Image File Format) is the newest format with the best compression on the market.

Advantages: 30-50% lighter than WebP with similar quality, supports full alpha, excellent for complex photographs.

Support: ~90% browsers. Chrome/Edge/Firefox/Opera have full support. Safari from version 16.4 (iOS 16+).

Cautions: Very slow encoding (can take 10-20x more than PNG/WebP), some edge cases with very smooth gradients may show subtle banding. Requires fallback for old Safari.

When to use: Modern sites with automated optimization pipeline, when every KB matters (mobile, countries with slow connection), always with WebP/PNG fallback.

SVG (vector + transparency) — logos, icons, scalability

SVG (Scalable Vector Graphics) is fundamentally different: it's vector-based, not pixel-based.

Transparency in SVG: Achieved through shapes (paths that don't cover certain areas), fill-opacity, opacity attributes, or masks.

Advantages: Infinitely scalable without loss, tiny files (typically <10KB), editable with code, animatable with CSS/JS, perfect for logos and iconography.

Disadvantages: Not suitable for photographs or complex rasterized images. Can be heavy if it contains many nodes/paths.

When to use: Logos, icons, vector illustrations, interfaces that need to scale to any resolution (retina, 4K, print).

GIF (1-bit transparency) — limitations

GIF supports binary transparency: each pixel is completely transparent or completely opaque.

Critical limitations:

• Maximum 256 colors in the entire image
• Jagged and serrated edges on diagonals (no antialiasing)
• Heavier files than PNG for the same content

When to use: Practically never for static transparency. Only for legacy animations or intentional retro aesthetic. For any modern use, PNG/WebP are superior.

Formats that don't work for transparent background (JPG/JPEG, BMP) and why

JPEG/JPG — no alpha channel

JPEG has no transparency capability. Some editors allow "save with transparency" but they're actually:

• Merging transparent areas with a background color (matte) — usually white or black
• Creating a "pre-multiplied" effect where edges have halos of the matte color

Result: When placing the JPEG on a different background than the matte color, white, gray or colored halos appear around the subject.

Solution: Never use JPEG for images that need transparency. Always convert to PNG, WebP or AVIF.

BMP — limited and inefficient support

Some BMP versions support alpha, but:

• No real compression (huge files)
• Inconsistent support across browsers
• No advantage over PNG/WebP

Conclusion: Always avoid BMP for web. There's no valid use case.

How to export correctly from your tools (Figma, Photoshop, Illustrator, Canva)

Figma

1. Select the element or frame
2. Right panel → Export → Choose format (PNG, SVG, WebP)
3. For PNG: automatically includes transparency if there are empty areas
4. For SVG: make sure you don't have a background rectangle
5. Tip: use 2x or 3x for retina screens, then optimize

Photoshop

1. Remove background layer (should say "Layer 0" with visible checkerboard)
2. File → Export → Export As...
3. Format: PNG (make sure to check "Transparency")
4. Or File → Save for Web → PNG-24 with "Transparency" enabled
5. Important: In "Matte", select "None" to avoid halos

Illustrator

1. For PNG: File → Export → Export As → PNG
2. Check "Transparent Background"
3. For SVG: File → Save As → SVG
4. In SVG options, make sure not to export hidden objects or background
5. Tip: SVG is almost always the best option for vector work

Canva

1. Remove the background from the design (should see checkerboard)
2. Share → Download
3. File type → PNG (Canva Pro allows downloading with transparent background)
4. Note: Canva Free doesn't support transparency — you need Pro plan
5. Alternative: export and use background removal tool afterwards

Quick checks: how to know if your file has transparency

• Visual: Open in image viewer. If you see checkerboard pattern (gray/white squares), it has transparency
• Browser: Drag image to browser on dark and light background — should adapt without halos
• HTML code: Put image on <div style="background: #000"> and background: #fff — shouldn't have visible rectangle
• File properties: PNG-32, WebP with alpha, AVIF confirm support. PNG-24 without alpha, JPG never have transparency
• Tools: Use browser inspector → Network tab → Headers → Content-Type should be image/png, image/webp, etc. and visually no rectangle

Common errors (false "checkerboard", white halos, antialiasing) and how to fix them

1. White or colored halos around the subject

Cause: You exported with color matte (white/black background merged during antialiasing).

Solution:

• Re-export with matte = "None" or "Transparent"
• If you don't have the original, use "Defringe" tool in Photoshop (Layer → Matting → Defringe 1-2px)
• Or re-process with AI background removal tool

2. Jagged/serrated edges on diagonals

Cause: 1-bit transparency (GIF) or cropping without antialiasing.

Solution:

• Use PNG/WebP/AVIF instead of GIF
• Make sure antialiasing is enabled when cropping (feather/blur in selection tools)
• In Photoshop: Select → Modify → Feather (0.5-1px) before deleting background

3. "False checkerboard" — the image seems to have checkerboard but isn't transparent

Cause: Some tools draw the checkerboard pattern as real pixels instead of transparency.

Solution:

• Verify in browser — if checkerboard persists on any background, it's "painted"
• Redo the cropping from the original
• Use color selection tool to remove checkerboard if it's on a separate layer

4. Huge PNG files (several MB)

Cause: Excessive dimensions or no optimization.

Solution:

• Resize to actual usage resolution (e.g., 200px wide logo doesn't need to be exported at 2000px)
• Use optimization tools: TinyPNG, ImageOptim, or our Optimize tool
• Consider WebP lossless — same visual result, 20-30% less weight

SEO/Performance: impact on Core Web Vitals and CDNs

LCP (Largest Contentful Paint)

Images with transparency are usually hero elements or main logos. If they're heavy, they delay LCP.

Optimization:

• Header logos: <50KB (ideal), <100KB (maximum). Use SVG if possible
• Hero images with cropped subject: <150KB (WebP/AVIF with quality 80-85)
• Preload with <link rel="preload" as="image"> for critical LCP

CLS (Cumulative Layout Shift)

Always define width and height in HTML for transparent images, even if the background is invisible.

<img src="logo.png" width="200" height="80" alt="Logo">

This reserves space and prevents the layout from "jumping" when the image loads.

CDN and modern formats

Use CDNs with automatic transformation (Cloudflare, Cloudinary, Vercel):

• Detect browser support and serve AVIF → WebP → PNG automatically
• Optimize size without visual loss
• Cache optimized versions globally

Manual implementation with <picture>:

<picture>
  <source srcset="logo.avif" type="image/avif">
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Logo">
</picture>

Conclusions and quick decision table

Decision flow:

1. Is it vector? → SVG (logos, simple icons)
2. Need maximum compatibility? → PNG-32
3. Optimizing for modern web? → WebP (lossy or lossless depending on case)
4. Every KB counts (mobile)? → AVIF with WebP/PNG fallback
5. Never use: JPEG for transparency, GIF except legacy animations

Recommended Orqui tools:

1. Remove background with AI to create transparency from any image
2. Convert between PNG ↔ WebP ↔ AVIF maintaining transparency
3. Optimize to reduce weight without losing visual quality
4. Resize to correct size before exporting