Réduire le PNG tout en conservant transparence et netteté

PNG reste pertinent pour l’UI, les logos et les icônes. Ce guide résume un flux fiable: palettiser quand c’est possible, supprimer les chunks redondants, puis compresser sans perte.

Décider d’abord

• Besoin de transparence ? → PNG ou WebP sans perte (pour l’UI)
• Peu de couleurs ? → Palettisation (≤8 bits) pour de forts gains
• Arêtes fines/texte ? → Prioriser le sans‑perte; éviter les pré‑traitements agressifs

Flux pratique

1. Normaliser en sRGB (détails: Gestion des couleurs & stratégie ICC 2025 — Guide pratique pour une restitution fiable sur le Web)
2. Palettiser pour réduire le nombre de couleurs
3. Supprimer les chunks redondants (EXIF, timestamps, texte)
4. Compresser sans perte

Pour un besoin ponctuel: Optimiseur PNG sans perte. Pour des lots: Optimiseur par lot Plus.

Points d’attention

• Bavures sur le texte: éviter le flou préalable; garder la source nette
• Ruptures de couleur: ajuster la taille de palette par paliers; vérifier avec Compare Slider

Jusqu’où réduire les couleurs (repères)

• Logos/icônes: souvent 8–32 couleurs; surveiller l’anti‑crénelage
• Captures d’UI: 64–128 couleurs suffisent souvent à l’équivalence visuelle
• Illustrations de type photo: éviter PNG; préférer WebP (lossless/lossy) ou AVIF

Pour des bords alpha sur fond sombre, un liseré externe 0,5–1px de même couleur limite les franges.

Recettes CLI (sans perte)

# oxipng: bon compromis vitesse/ratio
oxipng -o 4 --strip all input.png -o output.png

# zopflipng: plus fort mais plus lent
zopflipng -m --iterations=50 --filters=0me input.png output.png

# pngquant: avec perte (palettisation) mais de haute qualité; viser avec --quality
pngquant --quality=70-95 --speed 1 --strip --force --output output.png input.png

Conseils:

• Commencer par pngquant pour réduire les couleurs, puis oxipng/zopflipng pour resserrer.
• --strip all retire timestamps/texte sans impact visuel.

Filtres et paramètres zlib

PNG choisit un filtre par ligne (None/Sub/Up/Average/Paeth) puis compresse avec zlib. Le meilleur combo peut changer la taille de quelques à plusieurs pourcents.

• Recherche de filtres: essayer zopflipng -m --iterations=50 --filters=0me
• Niveau zlib: 9 est maximal mais lent; en pratique, démarrer à 5–7
• Zones continues: Paeth/Average; aplats UI: parfois None/Sub

Dithering (granularité perçue)

Le dithering masque les bandes mais peut bruiter texte et arêtes nettes.

• Floyd–Steinberg: polyvalent; bon pour les images naturelles
• Ordered: motif régulier; visible en UI
• None: idéal pour texte/logos; aplats propres

Avec pngquant, piloter via --floyd (0..1) et --ordered. Pour des icônes: souvent sans dithering; pour dégradés subtils: Floyd faible.

Alpha et bords prémultipliés

Les PNG transparents montrent parfois un halo sombre sur fond sombre. Anticiper le fond et considérer le prémultiplié ou un liseré 0,5–1px.

// Exemple conceptuel avec sharp
import sharp from 'sharp'

await sharp('input.png')
  .removeAlpha()
  .png({ compressionLevel: 9 })
  .toFile('flat.png')

await sharp('input.png')
  .ensureAlpha()
  .png({ compressionLevel: 9 })
  .toFile('alpha.png')

Intégration CI/CD (exemple)

# .github/workflows/png-optimize.yml (extrait)
name: Optimize PNG
on: [pull_request]
jobs:
  png-opt:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: sudo apt-get update && sudo apt-get install -y pngquant
      - run: |
          find assets -name "*.png" -print0 | xargs -0 -n1 -I{} pngquant --skip-if-larger --quality=70-95 --strip --force --output {} {}

Articles associés

• Optimiseur PNG sans perte
• Stratégies de conversion de formats 2025 — Guide WebP/AVIF/JPEG/PNG
• Gestion des couleurs & stratégie ICC 2025 — Guide pratique pour une restitution fiable sur le Web