image .png

image/png

Format d'image compressé sans perte avec support de la transparence (canal alpha). Idéal pour les illustrations, captures d'écran et images avec zones transparentes.

Description

image/png (Portable Network Graphics) est un format d’image utilisant une compression sans perte. Il supporte la transparence via un canal alpha 8 bits (256 niveaux de transparence). PNG est idéal pour les logos, illustrations, captures d’écran et toute image nécessitant de la transparence ou des bords nets.

Usage en HTML

Image avec transparence :

<img src="logo.png" alt="Logo de l'entreprise" width="200" height="60">

Dans <picture> avec format moderne préféré :

<picture>
  <source srcset="logo.avif" type="image/avif">
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Logo de l'entreprise" width="200" height="60">
</picture>

Input pour l’upload d’images PNG :

<input type="file" accept="image/png,image/webp,image/jpeg">

Notes

PNG vs JPEG : PNG est sans perte (qualité parfaite mais fichiers plus lourds pour les photos). JPEG est avec perte (fichiers légers, adapté aux photographies). Pour les photos, toujours préférer JPEG ou WebP.

PNG vs WebP/AVIF : WebP et AVIF offrent une compression supérieure à PNG pour les images avec transparence, tout en maintenant la qualité sans perte. Les navigateurs modernes les supportent tous — utiliser <picture> pour servir le meilleur format.

PNG-8 vs PNG-24 : PNG-8 (256 couleurs, palette) convient aux images simples ; PNG-24 (16M couleurs + alpha) est nécessaire pour les images complexes avec transparence.