Fond transparent : quels formats le prennent en charge et quand les utiliser (PNG, WebP, AVIF)

•20 mots•1m lecture

Après avoir supprimé le fond, il faut un format avec canal alpha pour éviter halos et crénelage. Guide pratique pour choisir entre PNG, WebP et AVIF.

1) L’essentiel : le canal alpha

Une vraie transparence exige un canal alpha par pixel. Sans alpha, les bords sont pré‑mélangés (matte) et laissent des halos visibles.

2) Formats avec transparence

  • PNG (lossless) : transparence parfaite, bords nets. Idéal pour UI/logos/icônes. Plus lourd pour les photos.
  • WebP : gère l’alpha en lossy/lossless. Excellent ratio taille/qualité.
  • AVIF : compression supérieure avec alpha. Vérifier les dégradés; encodage parfois lent.
  • SVG : vectoriel, transparent via formes/opacité. Parfait pour logos.

3) Formats à éviter

  • JPEG : pas d’alpha → franges visibles.
  • GIF : transparence binaire → crénelage.

4) Éviter les halos : matte & alpha prémultiplié

Exporter sans matte et avec vrai alpha, puis tester sur fond clair/sombre.

5) PNG, WebP ou AVIF ?

  • UI/logos plats : PNG ou WebP lossless.
  • Photos détourées : WebP/AVIF avec alpha.
  • Vectoriel : SVG si possible.

6) Flux recommandé avec Orqui

  1. Enlever le fond.
  2. Convertir en WebP/PNG.
  3. Optimiser et comparer.

7) Checklist qualité

  • Pas de halos sur fond clair/sombre.
  • Dimensions adaptées à l’usage.
  • Format avec alpha (PNG/WebP/AVIF) ou SVG.
  • Poids raisonnable.

Outils & articles liés

Lire dans d’autres langues

FAQ

  • Pourquoi JPEG ne convient pas ?
    JPEG n’a pas de canal alpha. Pour simuler la transparence, il se mélange à une couleur matte, ce qui crée des halos sur d’autres fonds.
  • PNG ou WebP pour des logos ?
    PNG (lossless) est net. WebP lossless est souvent plus léger sur des palettes simples. Vérifiez les bords sur fond clair/sombre.
  • La transparence en AVIF est‑elle fiable ?
    Oui, AVIF gère l’alpha. Excellente compression, encode parfois plus lent; validez les dégradés.
  • SVG gère‑t‑il la transparence ?
    Oui, format vectoriel avec transparence via formes/opacité. Idéal pour logos et icônes.

Compteur des transformations locales que vous faites ici (convertir, optimiser, redimensionner, recadrer, retirer l’arrière-plan). Tout se fait en privé dans votre navigateur.