Gérer la taille et le poids des images

Les différents types d'image

Les images constituent une grande partie des données transférés à l'ouverture d'une page web aujourd'hui. Comment faire pour les images soient les plus informatives et les plus légères possibles ?

Note : ceci est une page en construction

Quelles sont les bonnes tailles d'image

Sur un site fait avec Plateaux Numériques, il y a généralement trois types d'image :
  • les images de couverture ;
  • les images dans le corps de la page ;
  • les images annexes (logos dans la tête ou le pied de page).

Certaines images ont besoin d'être retravaillées pour qu'elles apparaissent de manière optimale dans le page.

Image de couverture

Leur ratio est de 3:1, taille min : 960 x 320, la taille recommandée est de 1440 pixels par 480 pixels.

Vous pouvez utiliser un outil en ligne commeRedKetchup pour modifier le ration, la taille et le poids des images.

Imaginons que je souhaite intégrer une image de couverture sur la page présentant la mairie. Je sélectionne l'image dans mes dossiers et je l'importe dans la zone prévue à cet effet dans RedKetchup.

Ensuite, je vais changer le ratio. Pour cela je clique sur "Aspect Ratio", je sélectionne "+ Custom Aspect Ratio" et je mets 3 dans le champ "Horizontal ratio" et 1 dans "Vertical ratio".

Je peux ensuite bouger le cadre de sélection pour être certain d'avoir la zone de la photo qui m'intéresse dans le cadre.

Maintenant, je peux descendre un peu plus bas dans le page de RedKetchup jusqu'à la section "Resize image". Ici je rentre la taille recommandée pour les images de couverture, c'est-à-dire, 1440 par 480.

Une fois, le bon ratio et la bonne taille indiquée, il ne reste plus qu'à descendre dans la section "Save Image". je choisis le format JPEG ou WEBP (le WEBP est un format spécifique pour les image web) et je sélectionne une qualité de 75%. Je donne un nom à mon image et je clique sur "Save Image". L'image va normalement être sauvegardé dans le fichier "Téléchargements" de votre ordinateur.

Images dans la page

Vous pouvez utiliser le même procédé que pour les images de couverture mais vous n'avez pas besoin de modifier le ratio. La largeur recommandée pour les images est de 960 pixels maximum.

Les formats recommandés sont, par ordre de préférence, WEBP, JPEG, PNG.

Autres images

Pour les logos il est préférable d'utiliser des formats SVG (vectoriel). Normalement, les partenaires institutionnels et privés ont leur logo disponible dans ce format si vous le demandez. Par exemple, le blason de la commun situé en haut à gauche du site est un format SVG récupéré depuis Wikipedia.

Pour les autres types d'image, si vous avez un doute sur la façon de les traiter n'hésitez pas à questionner la communauté ou l'équipe de Plateaux numériques.

D'autres outils

Il existe de nombreux outils pour modifier la taille et le poids des images. Nous vous proposons ici une liste d'outils qui pourraient convenir aux besoins de chacun et chacune :