صور بدون خلفية: صيغ الشفافية (PNG، WebP، SVG، AVIF) وكيفية الاختيار

Alpha channels and transparency

An image without background uses an alpha channel to define pixel opacity.

• 1-bit transparency: Binary (on/off). Used in GIF. Produces jagged edges.
• Real alpha (8-bit+): 256+ opacity levels. Smooth edges. Standard in PNG, WebP, AVIF, SVG.

Formats supporting transparency

PNG (8/24/32-bit)

Most common for transparency. Lossless, sharp, universal support. Larger files than WebP/AVIF.

Use when: Maximum quality, full compatibility, logos, UI elements.

WebP (lossy/lossless + alpha)

Modern format. 20-30% smaller than PNG. >96% browser support.

Use when: Web optimization, file size matters, modern browsers.

AVIF (alpha + superior compression)

Newest format. 30-50% smaller than WebP. ~90% browsers. Slow encoding.

Use when: Every KB counts, with fallback to WebP/PNG.

SVG (vector)

Vector-based, infinitely scalable. <10KB typical. Perfect for logos and icons.

Use when: Vector graphics that need to scale.

GIF (1-bit transparency)

256 colors max. Jagged edges. Avoid for static images. PNG/WebP are superior.

Formats that don't support transparency

JPEG/JPG

No alpha channel. Creates halos when background changes. Never use for transparency.

BMP

Large files, inconsistent support. Avoid for web.

How to export correctly

Figma

Select element → Export → Choose PNG/SVG/WebP. Transparency included automatically.

Photoshop

Remove background layer → Export As → PNG with "Transparency" checked. Set Matte to "None".

Illustrator

Export As → PNG/SVG → Check "Transparent Background".

Canva

Requires Pro plan for transparency. Download as PNG with transparent background.

Quick checks

• Visual: Look for checkerboard pattern in image viewer
• Browser: Drag to browser, test on dark and light backgrounds
• File properties: PNG-32, WebP/AVIF with alpha confirm support

Common errors and fixes

White or colored halos

Re-export with Matte="None" or use Defringe tool (1-2px).

Jagged edges

Use PNG/WebP/AVIF instead of GIF. Enable antialiasing with feather 0.5-1px.

Large file sizes

Resize to actual usage dimensions. Use optimization tools. Consider WebP lossless.

SEO/Performance

LCP

Header logos: <50KB ideal. Hero images: <150KB. Use preload for critical images.

CLS

Always define width and height attributes to prevent layout shift.

CDN and modern formats

Use CDNs with automatic format conversion. Implement <picture> with AVIF/WebP/PNG fallback.

Decision table

Decision flow

1. Vector? → SVG
2. Need max compatibility? → PNG-32
3. Modern web? → WebP
4. Every KB counts? → AVIF + fallback