Quels formats d'image populaires sont utilisés dans la mise en page web?

• Raster (Rasterisés):
  • JPEG (.jpg, .jpeg): Idéal pour les photos, supporte la compression avec perte. Ne supporte pas la transparence.
  • PNG (.png): Supporte la transparence (canal alpha). PNG-8 pour images simples avec palette, PNG-24 pour images de meilleure qualité avec une gamme complète de couleurs. Compression sans perte.
  • GIF (.gif): Supporte l'animation et la transparence. Limité à 256 couleurs. Utilisé pour des animations simples et des icônes.
  • WebP (.webp): Développé par Google. Supporte la compression avec et sans perte, l'animation et la transparence. Généralement plus petit en taille avec une qualité comparable à celle de JPEG et PNG.
• Vectoriel (Vecteur):
  • SVG (.svg): Se redimensionne sans perte de qualité. Parfait pour les logos, icônes, graphiques. Basé sur XML.

Format	Type	Transparence	Animation	Compression	Meilleure utilisation
JPEG	Rasterisé	Non	Non	Avec perte	Photos
PNG	Rasterisé	Oui	Non	Sans perte	Images avec transparence, graphiques
GIF	Rasterisé	Oui (simple)	Oui	Sans perte	Animations simples, icônes
WebP	Rasterisé	Oui	Oui	Avec perte/Sans perte	Usage universel
SVG	Vectoriel	Oui	Oui (CSS/JS)	Sans perte	Logos, icônes, graphiques

Le choix du format dépend du type d'image, des exigences de qualité, du support de la transparence et de l'animation, ainsi que de la taille de fichier nécessaire. L'utilisation de <picture> ou de l'attribut srcset dans la balise <img> permet de proposer différents formats (par exemple, WebP et JPEG) en fonction du support du navigateur pour optimiser la performance.