{%hackmd @alternative-rvb/main-theme %}

<div class="cover">


</div>

Voici quelques explications concernant les différents types d'images, leurs dimensions, leurs ratios et leurs formats.

## Résolution et définition


[Voir version google Slides](https://docs.google.com/presentation/d/17ZKqB2W8tN1oFb9F9uSoTYKe01nmfZhINrrEOAw9Jtc/edit?usp=sharing)

<!-- <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQDHZEUEHufTzsDBnqt2K1H5xY6Y7X4orBtOogJUCn9AN_xIv_41weTfM8aOttbEsfLpwMT2YWdtV3p/embed?start=false&loop=false&delayms=3000" frameborder="0" width="720" height="447"></iframe> -->

## Définition et Ratio d'aspect


<!-- $$ \frac{1920}{1080} =\frac{16*120}{9*120}=\frac{16}{9} $$ -->


[Voir version google drawing](https://docs.google.com/drawings/d/1Z6M_iHD_WdF8H-U_lmvHDZYkK8V-RUEbXWuH2WSwB5A/edit?usp=sharing)

## Recadrage (Rogner une photo)


[Voir version google drawing](https://docs.google.com/drawings/d/16YKlvYrpmSoXbGgsAQJ_rno-FVSwccEUhXo6AwhZiEw/edit?usp=sharing)

---

## Les différentes catégories d’images

Dans le monde du design et du web, bien que les technologies HTML5 et CSS3 permettent de créer des visuels attrayants, l'usage de fichiers images reste essentiel pour enrichir les pages, illustrer des idées avec des schémas ou afficher des photographies.

Il existe une multitude de formats d'images adaptés à divers besoins. Certains formats, privilégiés dans le domaine de l'impression, offrent une haute définition mais au prix d'une taille de fichier conséquente. Sur le web, l'objectif est de trouver le juste équilibre entre qualité d'image et légèreté des fichiers, afin d'optimiser à la fois l'affichage et le temps de chargement.

Les images peuvent se classer en deux grandes familles :

- **Les images matricielles** se composent d'une grille de pixels, chaque pixel étant défini par une ou plusieurs valeurs spécifiant sa couleur. Ces images sont caractérisées par leur dimension spatiale (largeur et hauteur), dimension temporelle (durée) ou autres (niveau de résolution). Elles sont idéales pour les photographies et les visuels détaillés, mais leur agrandissement peut entraîner une perte de qualité.

- **Les images vectorielles** sont basées sur des formules mathématiques décrivant formes et couleurs. Au lieu de stocker une image comme un ensemble de pixels, les données vectorielles décrivent une série d'instructions pour recréer l'image. Cette approche permet aux images vectorielles d'être redimensionnées sans perte de qualité. Elles sont particulièrement adaptées pour les logos, les schémas et tout élément nécessitant une mise à l'échelle fréquente.

Les termes "bitmap" ou "raster" sont souvent utilisés pour désigner les images matricielles, soulignant leur structure composée d'une matrice de pixels. Bien que les images de haute résolution offrent une richesse de détails, elles peuvent aussi entraîner des temps de chargement et d'impression prolongés, ainsi qu'une consommation importante d'espace de stockage.

## Format matriciel

###### [`BMP`](#BMP-(BitMaP)) [`JPEG`](#JPEG) [`PNG`](#PNG-(Portable-Network-Graphic)) [`WebP`](#WebP) [`JPEG 2000`](#JPEG-2000) [`JPEG-LS`](#JPEG-LS-(Lossless-JPEG)) [`PSD`](#PSD-(PhotoShop-Document)) [`WebPv2`](#WebPv2-(unstable)) [`AVIF`](#AVIF-(AV1-Image-File-Format)) [`JPEG XL`](#JPEG-XL) [`PICT`](#PICT) [`PCD`](#PCD-(Photo-CD)) [`QOI`](#QOI-(Quite-OK-Image)) [`jfif`](#jfif-(JPEG-File-Interchange-Format)) [`OxiPNG`](#OxiPNG)

### BMP (BitMaP)

- **Description:** Format d'image numérique non compressé et riche en couleurs.
- **Extension:** `.bmp`
- **Nombre de couleur supportés:** 16 millions (24 bits) et plus
- **Contexte d'utilisation:** Stockage d'images numériques simples sans perte de qualité.
- **Prise en charge actuelle:** Large mais en déclin pour le web.
- **Fréquence d'utilisation:** Peu utilisé sur le web, plus courant dans les environnements de bureau.
- **Avantage:** Qualité d'image élevée sans perte.
- **Inconvénients:** Taille de fichier importante.
- **Recommandation:** ⭐⭐

### JPEG

- **Description:** Format d'image compressé optimisé pour les photographies.
- **Extension:** `.jpg` ou `.jpeg`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Photographie numérique, web.
- **Prise en charge actuelle:** Universelle
- **Fréquence d'utilisation:** Très utilisé
- **Avantage:** Taille de fichier réduite, idéale pour le web.
- **Inconvénients:** Perte de qualité lors de la compression.
- **Recommandation:** ⭐⭐⭐⭐

### PNG (Portable Network Graphic)

- **Description:** Format d'image compressé sans perte.
- **Extension:** `.png`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Images web avec transparence.
- **Prise en charge actuelle:** Universelle
- **Fréquence d'utilisation:** Très utilisé
- **Avantage:** Supporte la transparence, sans perte de qualité.
- **Inconvénients:** Taille de fichier plus grande que JPEG.
- **Recommandation:** ⭐⭐⭐⭐⭐

### WebP

- **Description:** Format d'image moderne conçu pour le web.
- **Extension:** `.webp`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Web, supporte à la fois la transparence et l'animation.
- **Prise en charge actuelle:** Très bonne sur les navigateurs modernes.
- **Fréquence d'utilisation:** En augmentation
- **Avantage:** Compression efficace avec et sans perte.
- **Inconvénients:** Non supporté par tous les navigateurs anciens.
- **Recommandation:** ⭐⭐⭐⭐

### JPEG 2000

- **Description:** Amélioration du JPEG classique avec une meilleure compression.
- **Extension:** `.jp2`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Archivage d'images, imagerie médicale.
- **Prise en charge actuelle:** Limitée comparée au JPEG standard.
- **Fréquence d'utilisation:** Moyennement utilisé dans des domaines spécifiques.
- **Avantage:** Meilleure qualité d'image à des taux de compression élevés.
- **Inconvénients:** Moins supporté par les navigateurs et logiciels grand public.
- **Recommandation:** ⭐⭐⭐

### JPEG-LS (Lossless JPEG)

- **Description:** Version du JPEG offrant une compression sans perte.
- **Extension:** `.jls`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Imagerie médicale, photographie professionnelle.
- **Prise en charge actuelle:** Support limité.
- **Fréquence d'utilisation:** Peu utilisé, spécifique à certains domaines.
- **Avantage:** Qualité d'image sans perte.
- **Inconvénients:** Taille de fichier importante, support logiciel limité.
- **Recommandation:** ⭐⭐

### PSD (PhotoShop Document)

- **Description:** Format de fichier natif d'Adobe Photoshop pour les images en couches.
- **Extension:** `.psd`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Édition d'image professionnelle.
- **Prise en charge actuelle:** Bonne, avec Adobe Photoshop.
- **Fréquence d'utilisation:** Très utilisé dans le design graphique et la retouche photo.
- **Avantage:** Prise en charge des calques, textes et autres éléments d'édition.
- **Inconvénients:** Nécessite Photoshop pour une édition complète, fichiers volumineux.
- **Recommandation:** ⭐⭐⭐⭐

### WebPv2 (unstable)

- **Description:** Evolution du format WebP avec des améliorations techniques.
- **Extension:** `.webp2`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Web, vise à remplacer les formats d'image existants.
- **Prise en charge actuelle:** Expérimental et en développement.
- **Fréquence d'utilisation:** Très limitée, en phase expérimentale.
- **Avantage:** Améliorations potentielles en compression et qualité.
- **Inconvénients:** Instabilité et support logiciel limité.
- **Recommandation:** ⭐

### AVIF (AV1 Image File Format)

- **Description:** Format d'image basé sur le codec vidéo AV1, conçu pour la compression sans perte ou avec perte.
- **Extension:** `.avif`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Web, vise à offrir une meilleure compression que WebP.
- **Prise en charge actuelle:** En croissance, supporté par les navigateurs modernes.
- **Fréquence d'utilisation:** En augmentation, particulièrement sur le web.
- **Avantage:** Excellente compression et qualité d'image, supporte la transparence et l'animation.
- **Inconvénients:** Nécessite des navigateurs et des logiciels à jour pour la visualisation et l'édition.
- **Recommandation:** ⭐⭐⭐⭐

### JPEG XL

- **Description:** Format d'image conçu pour remplacer JPEG, offrant une meilleure compression et qualité.
- **Extension:** `.jxl`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Web, stockage, archivage.
- **Prise en charge actuelle:** En développement, avec un support croissant.
- **Fréquence d'utilisation:** Peu utilisé actuellement, mais avec un potentiel de croissance.
- **Avantage:** Compression efficace avec et sans perte, supporte la transparence et l'animation.
- **Inconvénients:** Support limité actuellement, nécessite une adoption plus large.
- **Recommandation:** ⭐⭐⭐

### PICT

- **Description:** Format d'image développé par Apple pour les ordinateurs Macintosh.
- **Extension:** `.pict`, `.pct`
- **Nombre de couleur supportés:** Variable, dépend de la version.
- **Contexte d'utilisation:** Principalement utilisé dans les environnements Apple plus anciens.
- **Prise en charge actuelle:** Obsolète
- **Fréquence d'utilisation:** Rare, principalement des fichiers existants ou des applications legacy.
- **Avantage:** Était bien intégré dans les systèmes Apple.
- **Inconvénients:** Technologie dépassée, peu de support sur les plateformes modernes.
- **Recommandation:** ⭐

### PCD (Photo CD)

- **Description:** Format développé par Kodak pour stocker des images numérisées sur CD.
- **Extension:** `.pcd`
- **Nombre de couleur supportés:** Jusqu'à 16 millions
- **Contexte d'utilisation:** Archivage et distribution de photographies numériques.
- **Prise en charge actuelle:** Obsolète
- **Fréquence d'utilisation:** Très rare, utilisé principalement pour accéder à des archives anciennes.
- **Avantage:** Capacité à stocker des images en haute résolution.
- **Inconvénients:** Support matériel et logiciel limité.
- **Recommandation:** ⭐

### QOI (Quite OK Image)

- **Description:** Format d'image simple et rapide pour la compression sans perte.
- **Extension:** `.qoi`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Destiné à remplacer des formats comme PNG pour des cas d'usage spécifiques où la performance est critique.
- **Prise en charge actuelle:** Expérimental, adoption limitée.
- **Fréquence d'utilisation:** Peu utilisé, intéressant pour des applications spécifiques nécessitant de hautes performances.
- **Avantage:** Très rapide à encoder/décoder, compression sans perte.
- **Inconvénients:** Manque de prise en charge et de reconnaissance dans l'industrie.
- **Recommandation:** ⭐⭐

## jfif (JPEG File Interchange Format)

- **Description:** Un format d'échange pour les images JPEG, souvent utilisé dans le transfert d'images JPEG entre applications et systèmes.
- **Extension:** `.jfif`
- **Nombre de couleur supportés:** Jusqu'à 16 millions
- **Contexte d'utilisation:** Principalement pour assurer la compatibilité entre les différents programmes qui utilisent des images JPEG.
- **Prise en charge actuelle:** Bonne, en raison de sa proximité avec le standard JPEG.
- **Fréquence d'utilisation:** Utilisé dans certains contextes spécifiques, moins fréquemment mentionné par rapport au format JPEG standard.
- **Avantage:** Assure une compatibilité inter-applications pour les fichiers JPEG.
- **Inconvénients:** Peu de différences fonctionnelles par rapport au format JPEG classique.
- **Recommandation:** ⭐⭐⭐

## OxiPNG

- **Description:** Outil d'optimisation pour les images PNG, visant à réduire la taille du fichier sans perte de qualité.
- **Extension:** Utilise l'extension `.png`
- **Nombre de couleur supportés:** 16 millions
- **Contexte d'utilisation:** Optimisation de fichiers PNG pour le web ou le stockage.
- **Prise en charge actuelle:** Utilisé via des outils d'optimisation d'images, plutôt qu'un format d'image distinct.
- **Fréquence d'utilisation:** Employé dans des processus de développement web et de design graphique pour l'optimisation d'images.
- **Avantage:** Réduction de la taille des fichiers PNG sans perte de qualité.
- **Inconvénients:** Nécessite un traitement additionnel des images.
- **Recommandation:** ⭐⭐⭐⭐

## Format vectoriel

###### [`SVG`](#SVG-(Scalable-Vector-Graphics)) [`AI`](#AI-(Adobe-Illustrator)) [`PDF`](#PDF-(Portable-Document-Format)) [`EPSF`](#EPSF-(Encapsulated-PostScript-File)) [`FLA/SWF`](#FLA/SWF)

### SVG (Scalable Vector Graphics)

- **Description:** Format d'image vectorielle basé sur XML.
- **Extension:** `.svg`
- **Nombre de couleur supportés:** N/A (vectoriel)
- **Contexte d'utilisation:** Graphiques web, logos, illustrations.
- **Prise en charge actuelle:** Très bonne
- **Fréquence d'utilisation:** Commun
- **Avantage:** Redimensionnable sans perte de qualité.
- **Inconvénients:** Peut être plus complexe à créer et à éditer.
- **Recommandation:** ⭐⭐⭐⭐⭐

### AI (Adobe Illustrator)

- **Description:** Format de fichier natif d'Adobe Illustrator pour les illustrations vectorielles.
- **Extension:** `.ai`
- **Nombre de couleur supportés:** N/A (vectoriel)
- **Contexte d'utilisation:** Illustration professionnelle, design graphique.
- **Prise en charge actuelle:** Bonne, nécessite des logiciels spécifiques.
- **Fréquence d'utilisation:** Professionnel
- **Avantage:** Très flexible pour le design vectoriel.
- **Inconvénients:** Non accessible sans logiciels Adobe.
- **Recommandation:** ⭐⭐⭐

### PDF (Portable Document Format)

- **Description:** Format de fichier polyvalent développé par Adobe, supportant texte, images, et éléments vectoriels.
- **Extension:** `.pdf`
- **Nombre de couleur supportés:** N/A (dépend du contenu)
- **Contexte d'utilisation:** Documents imprimables et électroniques, formulaires, présentations.
- **Prise en charge actuelle:** Universelle
- **Fréquence d'utilisation:** Très utilisé
- **Avantage:** Préservation de la mise en page, accessible sur de nombreuses plateformes.
- **Inconvénients:** Peut être volumineux, la création de fichiers PDF complexes nécessite des logiciels spécifiques.
- **Recommandation:** ⭐⭐⭐⭐⭐

### EPSF (Encapsulated PostScript File)

- **Description:** Format de fichier vectoriel basé sur le langage PostScript, utilisé pour les images et les dessins.
- **Extension:** `.eps`
- **Nombre de couleur supportés:** N/A (vectoriel)
- **Contexte d'utilisation:** Impression professionnelle et design graphique.
- **Prise en charge actuelle:** Large, grâce à sa compatibilité avec de nombreux programmes de dessin et de mise en page.
- **Fréquence d'utilisation:** Commun dans les environnements de design graphique et d'impression.
- **Avantage:** Compatibilité élevée avec des équipements d'impression professionnelle.
- **Inconvénients:** Moins pratique pour le web ou des applications non professionnelles.
- **Recommandation:** ⭐⭐⭐⭐

### FLA/SWF

- **Description:** FLA est le format de fichier source pour Adobe Animate (précédemment Flash), tandis que SWF est le format de fichier publié pour le web.
- **Extension:** `.fla` (source), `.swf` (web)
- **Nombre de couleur supportés:** N/A (vectoriel pour FLA, bitmap et vectoriel pour SWF)
- **Contexte d'utilisation:** Animations web, jeux, publicités (historiquement).
- **Prise en charge actuelle:** En déclin, Adobe a officiellement abandonné Flash fin 2020.
- **Fréquence d'utilisation:** Très limitée, remplacée par des technologies web modernes.
- **Avantage:** A permis des animations web complexes et interactives.
- **Inconvénients:** Problèmes de sécurité, obsolescence, non pris en charge par les navigateurs modernes.
- **Recommandation:** ⭐

{%hackmd @alternative-rvb/contact %}