Optimisation des visuels

Bonnes pratiques pour les images : 

K-SUP : 

Lorsqu'un média est intégré sur le CMS de K-sup, même s'il n'est pas utilisé sur une page, une fois uploadé il est stocké sur les serveurs du Cnam. 
Cette information est importante car nombreux fichiers se retrouvent aujourd'hui 5 – 6 fois sur les serveurs. 
Il est donc important d'avoir validé tous les éléments du média avant d'uploader sur K-sup. 

Leur nom : 

Il doit être clair, court, sans espaces et caractères spéciaux. 

> Le but est son référencement dans Google image, un meilleur SEO, une meilleure accessibilité. 

Exemple : imgp0161_1695913464718-jpg (ce nom d'image ne nous évoque rien) mettre plutôt cnam-heureux-groupe-amis-faisant-gestes-mains.jpg Le nom de fichier peut donner à Google des indices très légers sur l'objet de l'image. Lorsque cela est possible, utilisez des noms de fichiers courts, mais descriptifs. Par exemple, my-new-black-kitten.jpg est préférable à IMG00023.JPG. Dans la mesure du possible, évitez d'utiliser des noms de fichiers génériques comme image1.jpg, pic.gif et 1.jpg. 

Titre ou texte alternatif : 

il faut lui ajouter un titre ou un petit texte qui sera très utile pour l'accessibilité et pour le référencement. En effet, Google utilise le contenu de la page, y compris les légendes et le titre des éléments visuels, pour déterminer l'objet des images qui y figurent. 

Conseillé : <img src="chiot-puppy.jpg" alt="Chiot dalmatien en train de jouer à la balle"/> 

Leur format / extension : 

Usuellement, nous distinguons aujourd’hui trois principaux formats pour les visuels : 

1. JPEG (ou JPG) 
2. GIF 
3. PNG 
4. WEBP 

Le format JPEG  

Il s’agit du format que vous devez préférer pour vos photos, et plus généralement pour les images utilisant un spectre de couleurs et de contrastes très large (plus de 16 millions de couleurs gérées). Attention néanmoins, le format JPEG ne supporte pas la transparence, chaque pixel d’un fichier JPEG est « plein ». Par ailleurs, une compression excessive d’un fichier JPEG dégradera la qualité de celui-ci. 

Le format GIF  

Très populaire il y a des années, le format GIF était utilisé pour des petits éléments iconographiques qui pouvaient être animés. Avec une palette de 256 couleurs, le format GIF ne permet pas de valoriser des visuels trop « complexes ». À la différence du format JPEG, le format GIF supporte la transparence, mais sans couche Alpha : chaque pixel d’un fichier GIF peut être soit plein, soit vide. Aujourd’hui, nous lui préférons les format SVG ou PNG, plus performants. 

Le format PNG  

Le format PNG permet d’enregistrer vos visuels sans perte de qualité, à la différence du format JPEG. Néanmoins, cela se ressentira sur la balance, avec un poids supérieur. Le grand intérêt du format PNG est que celui-ci supporte la transparence, avec couche Alpha. Ce qui signifie qu’en plus d’une couleur (composée de rouge, de vert et de bleu – RGB), chaque pixel porte une notion d’opacité. 

Le format WEBP  

C'est le plus optimisé aujourd'hui pour le web (pas disponible sur la version actuelle de K-sup). 

Optimiser le poids : 

Pour tous vos visuels, choisissez une dimension comprise entre 1600px et 1900px (en largeur), et un poids n’excédant pas 1Mo. Cela représente le compromis parfait pour assurer un affichage optimal et un temps de chargement rapide. 

Comment bien enregistrer et compresser vos images ? 

Maintenant que nous avons vu quels étaient les formats, voyons comment en optimiser le poids. En trois étapes : 

• Réduire les dimensions de l’image. 

• Enregistrer l’image « proprement » pour en réduire le poids. 

• Compresser l’image en utilisant des outils. 

• Réduire les dimensions de l’image 

• La plupart des appareils photos et smartphones captent des visuels en Haute Résolution, ce qui donne des fichiers « volumineux » en taille. Cette taille est exprimée en pixels : 6000x4000px, en associant également une densité de pixels par pouces (72dpi, 150 dpi, 300dpi…). 

> En réduisant la taille du fichier (en passant à 1920x1280px, par exemple) et en passant sa résolution à 72dpi, vous réduirez déjà de manière significative le poids du fichier. 

Enregistrer l’image « proprement » pour en réduire le poids 

Si vous faites le choix (certainement judicieux) d’enregistrer votre fichier au format JPEG, alors vous allez pouvoir préciser un ratio de compression, exprimé en pourcentage : 

Ça va de 0% : hyper optimisé mais qualité médiocre  

Jusqu’à 100% : peu optimisé mais qualité supérieure En fonction du type de visuel et de l’utilisation que vous souhaitez en faire, optez pour un ratio compris entre 51% et 75%. 

Si vous utilisez Photoshop, il faut passer par « Fichier > Exporter > Enregistrer pour le web » et définir les paramètres d’exportation. En modifiant ces paramètres, Photoshop vous indique le poids final du fichier exporté. 

Quel outil ? 

si vous n’avez pas Photoshop pour réaliser ce travail d’optimisation en deux temps trois mouvements, pas de panique ! Il existe de nombreux outils gratuits à télécharger sur Internet qui vous aideront :  

XnView https://www.xnview.com/fr/xnviewmp/

Gimp : https://www.gimp.org/downloads/ (logiciel gratuit, open source et pour tous les systèmes d'exploitation Windows, Linux et Mac).

Après avoir uploadé votre visuel, celui-ci est compressé et vous n’avez plus qu’à télécharger le fichier optimisé avant de l’intégrer à votre site. 

Si vous êtes utilisateur de Mac, alors nous vous recommandons d’installer un petit logiciel (gratuit lui aussi) : ImageOptim https://imageoptim.com/fr . Une fois le logiciel lancé, vous faites glisser votre fichier sur la fenêtre du logiciel, et votre visuel est automatiquement optimisé. 

Pour en savoir + : https://developers.google.com/search/docs/appearance/google-images?hl=fr