Les outils et conseils :
Choisissez et optimisez vos images

• Des images de qualité
• Retravailler ses images
• Le choix du format d’images : JPEG, PNG, ...
• Bien nommer vos fichiers images et remplir avec soin le descriptif
• Conserver le même style d'images
• En plus :
  • compression de vidéos
  • Outil pour créer une palette de couleurs

Prendre le temps de choisir soigneusement et d'optimiser vos images, c'est :

• Améliorer la qualité et l'esthétique de votre site. Exit les images floues ou pixelisées.
• Favoriser le référencement de votre site. La rapidité de chargement de vos pages dépend du poids et de la taille de vos images et le nom de vos fichiers ainsi que le descriptif est un atout à ne pas négliger.
• Permettre l'accessibilité de votre site aux personnes malvoyantes.

1 - Des images de qualité :

Choisissez des images qui illustrent au plus près l'idée principale de vos contenus.

Dans un premier temps, vous aurez besoin de photographies présentant votre collectivité. Vous devrez probablement les réaliser par vous-même. Si vous possédez un appareil photo, cela sera aisé de réaliser de belles images. Si non, la technologie des derniers smartphones permet de prendre des photographies avec une qualité amplement suffisante pour le web. Choisissez un moment où la lumière est propice pour que vos paysages et bâtiments soient attractifs.
Vous pouvez aussi faire appel à un photographe professionnel qui facturera ces services en fonction de votre demande.

Les images et photographies que vous pouvez trouver sur un moteur de recherches ou sur un site ne sont pas libres de droits (sauf pour les banques d'images prévues à cet effet et les images tombées dans le domaine public). Ne récupérez donc pas d'images provenant d'un site qui ne vous y autorise pas explicitement. Le risque étant de payer une amende assez salée... Vous aimez une image sur un site ? Contactez le webmaster ou le photographe s'il est mentionné, et demandez-lui l'autorisation pour son utilisation. Cette personne peut accepter sous conditions, vous demander une contrepartie financière ou vous refuser le droit de l'utiliser.

Vous aurez également de photographies ou images d'illustration. Vous pouvez rechercher des images de bonne qualité sur des banques d'images gratuites. Attention toutefois, certaines banques d'images proposent des contenus payants tandis que d'autres demandent de créditer les auteurs (créditer = mentionner le nom de l'auteur sur la photographie ou sur votre site).

Quelques banques d'images gratuites :

• - Pixabay - en français. Le premier bandeau présente des images publicitaires et renvoit à des images payantes. Vous trouverez sur la droite de chaque image le bouton "Télécharger gratuitement" ainsi que l'encadré "Pixabay License" précisant si vous pouvez utiliser cette image dans un but commercial et s'il vous faut créditer le nom de l'auteur. Vous pouvez choisir parmi plusieurs tailles d'images à télécharger.
• - Unsplash - Vous y trouverez des photos de très bonne qualité, gratuitement, pour une utilisation commerciale ou personnelle, sans attribution obligatoire (vous pouvez créditer l'auteur si vous le souhaitez).
• - Pexels - en français. De même que pour Unsplash, vous y trouverez de très belles photos, gratuites, pour une utilisation commerciale et personnelle et sans attribution obligatoire (la mention de l'auteur est appréciée mais non imposée).

2 - Retravailler ses images :

Il est essentiel de retravailler les photographies et images pour le web. En effet, une image pour un site internet aura une taille et une qualité bien moindre qu'une image utilisée pour une impression. Cette différence est transparente aux yeux d'un visiteur mais elle est très importante pour votre site.
Il faut noter deux types d'utilisation d'images :

• les images d'illustration : des petites images qui viennent ponctuées vos écrits et rendre attractif votre site.
• les images de fond : des images immersives, plus grandes.

Demandez-vous quelle sera l’utilisation de votre image afin de choisir ensuite les aspects de votre image à modifier.

Il y a trois aspects à prendre en compte pour retravailler une image :

• La taille du fichier : que l'on appelle aussi le poids. C'est l'espace que ce fichier occupe sur votre ordinateur. Pour un site internet, une image varie entre 50 Ko et 500 Ko. Au-delà, la taille est trop importante et cela signifie qu'il faut travailler sur la résolution ou la taille de l'image
• La taille de l'image : C'est la largeur et la hauteur de cette image. Elle se mesure en pixels. Par exemple, pour illustrer une actualité de votre site, il est préconisé une largeur de 800 pixels et une hauteur de 450 pixels. La bannière, la première grande image de la page d'accueil, mesure 1920 par 650 pixels. Dans tous les cas, vous pouvez réduire la largeur à 1200 pixels (voire moins) pour une image d’illustration et 1920 pixels pour une image de fond.
• La résolution : C'est la qualité d'une image. Elle se mesure en pixels par pouce (dpi ou ppi). On considère que les écrans affichent 72 pixels par pouce. Il est donc inutile d'avoir une résolution plus importante.

Vous retrouverez les tailles d'image recommandées pour CmonSite pour tous les types de contenus en suivant ce lien : Tailles d'image recommandées

Comment faire ?

Avec un outil de retouche d’images, tel que :

• Pixlr – logiciel en ligne gratuit. Vous pouvez redimensionner la taille de vos images dans « propriétés » (le premier pictogramme à gauche). Une fois la modification effectuée, cliquer sur « Enregistrer » en bas à droite. Pixlr enregistre automatiquement votre fichier pour le web, c’est-à-dire en 72 pixels par pouces.

• Paint.net pour Windows ou Paintbrush pour Mac – logiciel gratuit à télécharger. Dans Paint.net vous pouvez modifier la taille et la résolution de vos images dans « Image » puis « Redimensionner ». Il vous suffit ensuite de l’enregistrer.

• Photopea, logiciel en ligne gratuit. Un équivalent de Photoshop à destination des plus aguerris.
• Avec un outil qui redimensionne à partir du menu contextuel (bouton droit de la souris ou clic droit) : Image Resizer for Windows. Il existe à priori des équivalents pour Mac.

Nous vous proposons un tutoriel pour recadrer une image avec l'outil Photopea

Enlever le fond de l'image (pour avoir un fond transparent) :

Certains outils permettent d'ôter le fond de votre image afin d'obtenir un fond transparent.

Sur Photopea, cela est réalisable à l'aide de la baguette magique par exemple, si vous connaissez le principe.

Des outils gratuits en ligne existent également et permettent de détecter le fond et de le supprimer "automatiquement".
Remove bg (bg pour background) est ce type d'outil : https://www.remove.bg/fr  Vous pouvez télécharger votre image. L'outil supprimera le fond et présentera un damier blanc et gris à la place, ce qui indique que le fond est transparent. Vous pourrez ensuite télécharger votre image sans fond, au format PNG (voir ci-dessous pour comprendre les différents formats de fichier).

 En résumé :

• Une grande image (comme une image de fond par exemple) ne doit pas dépasser 1 Mo
• Nous préconisons une largeur de 1920px maximum pour une image de fond
• Les autres images doivent avoir une taille de fichiers de 500 Ko maximum
• Il est possible de diminuer la taille d’une image. Mais le contraire ne fonctionne pas : agrandir une image la rend floue et pixelisée.

3 – Le choix du format d’images : JPEG, PNG, ...

Il existe de nombreux formats d’images. Cependant, pour le web, certains formats sont plus adaptés tels que jpeg, png, gif, svg. Pour simplifier, vous pouvez retenir deux formats à privilégier :

• JPEG : pour toutes vos photographies. Ce type de fichier est adapté à la bonne gestion des couleurs. Il génère des photographies de même qualité que le PNG mais beaucoup plus légères en poids.
• PNG : pour les illustrations avec des grands aplats de couleurs, les logos, les images avec un fond transparent. Le PNG est plus précis que le JPEG, il crée des bords, des contours, plus nets.

4 - Bien nommer vos fichiers images et remplir avec soin le descriptif

Au-delà du fait que renommer vos fichiers avec des noms cohérents vous permettra de vous y retrouver facilement et rapidement, un nom de fichier n'est pas anodin pour le référencement de votre site (pour que votre site soit le mieux placé possible dans les résultats de recherche des moteurs de recherche).

En effet, les robots des moteurs de recherche (tels que Google, Bing, etc.) qui scannent votre site, ne peuvent pas comprendre ce que représente une image. Ils vont chercher l'information auprès du nom de votre fichier et du descriptif de l'image (appelé "Balise Alt" ou "Texte alternatif"). Soyez donc vigilants sur le choix que vous faites pour le nom de vos fichiers. Privilégiez "eglise-de-sicemont.jpg" plutôt que "Photo1.jpg" ou "DSC45698.jpg".

Le nom de l'image se retrouvera également à la fin de l'adresse URL de l'image. Un nom clair permettra donc une meilleure compréhension de l'URL.

Le descriptif de l'image (appelé "Balise Alt" ou "Texte alternatif") sert en premier lieu aux personnes malvoyantes qui utilisent des dispositifs pour consulter le contenu. Le descriptif leur permet alors de comprendre ce qui est représenté sur l'image d'un site. Comme nous l'avons vu, ce descriptif est utile également pour le référencement de votre site. Enfin, c'est ce descriptif qui s'affichera si votre image ne peut s'afficher. Ce qui facilite la recherche dans votre médiathèque pour parer au problème.

Une bonne pratique est d'écrire un nom de fichier (une image ou tout autre fichier pour le web):
En minuscules, avec des tirets à la place des espaces.
N'utilisez ni les caractères spéciaux, ni la ponctuation.
Par exemple "Photo mairie de Sicemont.jpg" sera renommé : "photo-mairie-sicemont.jpg"

5 - Conserver le même style d'images

Pour aller plus loin :

Pour que votre site soit clair, organisé et harmonieux, choisissez des images de même style et dans les mêmes tons.

Pour illustrer, voici plusieurs assortiments d'images, regroupées par style :

• en haut à gauche, des images géométriques, en noir et blanc
• en haut à droite, des images imposantes de bâtiments et rues dans des tons chauds.
• en bas, de gauche à droite : des images un peu rétro et bleutées; des images de Paris dans des tons rose-mauve et enfin des images bureau et détente dans les tons crème et marrons.

6 - En plus :

Compresser une vidéo :

Vous souhaitez compresser une vidéo ? Nous vous proposons ce petit outil gratuit à télécharger - en anglais : https://file-converter.org/

Créer une palette de couleurs à partir d'une image ou d'un logo :

Pour créer votre palette, vous pouvez utiliser l'outil Toolki : https://toolki.com/fr/image-palette

choisissez le nombre de valeurs de couleurs souhaitées, puis téléchargez une image ou un logo. Si les couleurs ne vous conviennent pas, réimporter votre image et augmentez le nombre de valeurs de couleurs.

Vous pouvez aussi utiliser d'autres outils, comme Adobe color : https://color.adobe.com/fr/create/image

Plusieurs onglets sont disponibles sur Adobe color : une "roue chromatique" pour choisir des couleurs qui s'accordent bien, "extraire le thème" ou "extraire le dégradé" pour obtenir les couleurs d'une image, "Outils d'accessibilité" pour vérifier le contraste entre une couleur de texte et une couleur de fond d'écran (pour être aux normes RGAA par exemple).

< Nom de domaine, les bonnes pratiques, RGAA Retour au sommaire