Images

Une image est composée de pixels (picture elements), des petits points qui ont une couleur et une taille infime. Le problème, c’est que plus l’image est grande (c.à.d. contient de nombreux pixels) plus le poids du fichier augmente…

L’enjeu face à une image est de maîtriser sa dégradation. Réduire son poids (qui trop lourd peut pénaliser son chargement) mais… conserver sa qualité pour la rendre « agréable » à l’œil.

Une photo / image « devrait » être utilisée à 100% de sa taille à 72dpi (dite résolution d’écran) – l’arrivée des différents terminaux (tablette, smartphone) complique un peu les choses. (Une image devrait être prévue pour chaque résolution type.)

Avis personnel – Apple en introduisant ses écrans rétina et certainement l’arrivée de la 4k changent la donne. Mais est – à mon sens – incohérent.
Exploiter une image pour un écran rétina, revient à doubler sa résolution (soit 144dpi) / sa taille aussi je crois – et demander au navigateur de réduire de 50% sa largeur et hauteur.
Donc, une image plus lourde, pour être plus « jolie », qui consomme de la bande passante – soit le poids de l’information transitant, qui influe sur l’hébergement auquel vous souscrivez pour mettre votre site en ligne.

voir ces échanges et ici également

La compression d’image est de maîtriser sa dégradation.
A l’enregistrement de l’image penser à cocher la case « optimisé » si celle-ci se présente comme c’est le cas d’un photoshop ou bien, privilégier un « enregistrer pour le web » plutôt qu’un « enregistrer » ou « enregistrer sous ».
(Photoshop Element est d’un prix abordable)

Format image GIF

Très populaire, le format GIF est un format qui utilise une compression non destructrice des images. Il a longtemps été un format propriétaire (c.à.d. que l’utilisateur final n’a pas accès au code de programmation) et est en train de tomber dans le domaine public (Lire un article sur Clubic.com).

Couleurs du GIF

Une image dans ce format a une capacité maximum de 256 couleurs.
Pour l’exporter au format GIF, le logiciel construit une palette comprenant au plus 256 couleurs : c’est ainsi que le GIF est une image dont la qualité initiale n’est pas dégradée, sauf en terme de couleurs : on dira qu’elle est limitée.

GIF et transparence

Le GIF supporte également la transparence, c.à.d. qu’une des couleurs de la palette peut être non visible : si l’image chevauche une autre (ou une couleur de fond différente), la couleur choisie comme transparente dans l’image laissera apparaître la couleur du fond de page (par exemple).

GIF et animation

Le format GIF supporte l’animation, c.à.d. la superposition de plusieurs images, chacune « défilant » de manière limitée dans le temps. On peut ainsi créer un petit dessin animé grâce à ce format. Les images constituant le « dessin animé » sont toutes exportées en GIF.

Le format JPEG parfois abrégé « JPG » pour des extensions de fichier à 3 lettres est plus destiné aux photos. Il utilise une compression destructrice de l’image. Le principe de compression est un algorithme qui peut se résumer ainsi : lors de la compression d’une image en JPEG, les pixels contigüs sont moyennés en pixels uniques. Cela veut dire que si un pixel noir est voisin d’un pixel blanc, l’algorithme va définir un seul pixel de la taille des 2 initiaux qui aura pour couleur la moyenne des 2 qu’il remplace : gris. Plus on compresse l’image, plus les pixels résultants seront gros et plus l’image sera dégradée.

Couleurs du JPEG

Pareillement au format GIF, le format JPEG code les images sur leurs 3 composantes Rouge, Vert, Bleu. 256 niveaux pour chaque couleur donne une palette finale de 24 bits : 16 777 216 couleurs.

JPEG et transparence

Le JPEG ne supporte pas de transparence.

JPEG et animation

Le JPEG ne supporte pas l’animation

Le format PNG (prononcez ‘ping’) a été créé en réponse au brevet du GIF. Il est un format issu du « libre », c.à.d. que l’on peut avoir accès au code source de son algorithme. Il tient à la fois du JPEG (pour le nombre de couleurs supportées), du GIF (pour la transparence) et même mieux. PNG propose 3 types d’encodages : Paletted, GrayScale et TrueColor.

Couleurs du PNG

Le PNG peut être en 8 bits (256 couleurs), ou en 24 bits (16 millions de couleurs) : il tient du JPEG pour ce coté là. Toutefois, il n’est pas aussi performant que ce dernier en compression, puisque son coté ‘GIF’ lui fait utiliser une compression non destructrice.

PNG et transparence

Le PNG supporte la transparence, mais il supporte bien plus ! Dans le format GIF, la transparence s’applique à une couleur de la palette, et cette couleur est soit transparente, soit pas. En PNG, la transparence peut avoir 256 niveaux (contre 2 pour le GIF).

PNG et animation

Le PNG ne supporte pas l’animation, mais un format semblable la supporte, toujours dans cette idée de concurrencer le GIF : le format MNG.

PNG et le canal Alpha

Ceci n’est pas supporté par le GIF, c’est la translucidité. Le format PNG, indépendamment de la transparence, permet d’associer à une couleur un paramètre de translucidité.

PNG et navigateurs Web

Peu de navigateurs ne supportent pas le PNG : Internet Explorer 6 et antérieurs. Cependant, ce sont les plus répandus … Ils supportent la transparence totale du PNG (pour retrouver l’équivalent du GIF) en mode 8 bits… Avec Internet Explorer 7, le canal Alpha est mieux supporté.

(source = Choisir son format d’image)

Pour une page Web, les 3 formats les plus répandus (et les plus faciles à mettre en œuvre) sont le GIF, le JPEG, ou le PNG. Il faut simplement s’assurer que le format employé est judicieusement employé : utiliser un GIF ou un PNG pour un logo est tout à fait approprié, mais pas pour une photo. Pour un JPEG, il faut trouver un compromis entre la qualité d’image désirée (tributaire du taux de compression) et le poids final du fichier compressé…

Préférez jpg à jpeg…

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

La balise <img> définit une image dans une page HTML.
La balise <img> a deux attributs requis: src et alt.
Note: Les images ne sont pas techniquement insérés dans une page HTML, les images sont liées à des pages HTML. La balise <img> crée un espace pour la tenue de l’image de référence.
Astuce: Pour créer un lien d’ une image à un autre document, il suffit d’ imbriquer la balise <img> dans <a> tags.

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Les images peuvent améliorer la conception et l’apparence d’une page Web.

<img src="pulpitrock.jpg" alt="Mountain View">

Syntaxe
En HTML, les images sont définies avec le <img> tag.
La balise <img> est vide, il contient uniquement des attributs, et ne dispose pas d’une balise de fermeture.
L’attribut src spécifie l’URL (adresse web) de l’image.

<img src="url">

L’attribut alt
L’attribut alt fournit un texte alternatif pour une image, si l’utilisateur pour une raison quelconque ne peut pas voir (à cause de connexion lente, une erreur dans l’attribut src, ou si l’utilisateur utilise un lecteur d’écran).
La valeur de l’attribut alt doit décrire l’image. Si un navigateur ne peut pas trouver une image, il affiche la valeur de l’attribut alt.
[Un lecteur d’écran est un logiciel qui lit le code HTML, convertit le texte, et permet à l’utilisateur de « écouter » le contenu. Les lecteurs d’écran sont utiles pour les personnes aveugles, ayant une déficience visuelle ou des difficultés d’apprentissage.]

<img src="img_chania.jpg" alt="Flowers in Chania">

Taille de l’image – Largeur et Hauteur
Vous pouvez utiliser le style de l’ attribut pour spécifier la largeur et la hauteur d’une image.

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Vous pouvez également utiliser la largeur et la hauteur des attributs. La largeur et la hauteur des attributs définit toujours la largeur et la hauteur de l’image en pixels.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Images dans un autre dossier
Si non spécifié, le navigateur attend de trouver l’image dans le même dossier que la page Web.
Il est courant de stocker des images dans un sous-dossier. Vous devez alors inclure le nom du dossier dans l’attribut src.
(Ici un chemin relatif)

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images sur un autre serveur
Certains sites Web stockent leurs images sur les serveurs d’images.
Vous pouvez accéder à des images depuis une adresse web dans le monde.
(ici un chemin absolu)

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

La balise <picture> Depuis l’apparition des smartphones, tablettes… il est possible de définir différentes sources selon le terminal utilisé.
<source srcset= »URL »>

<picture>
<source media="(max-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(max-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

La balise <picture> donne aux développeurs Web plus de flexibilité dans la spécification des ressources d’image.

L’utilisation la plus courante de l’élément <picture> sera la direction artistique dans les conceptions réactives.
Au lieu d’avoir une image agrandie ou réduite en fonction de la largeur de la fenêtre, plusieurs images peuvent être conçues pour remplir plus joliment la fenêtre d’affichage du navigateur.

L’élément <picture> contient deux balises différentes: une ou plusieurs balises <source> et une balise <img>.

L’élément <source> a les attributs suivants :

• srcset (obligatoire) – définit l’URL de l’image à afficher.
• media – accepte toute requête média valide qui serait normalement définie dans un CSS.
• sizes – définit un descripteur de largeur unique, une requête de média unique avec un descripteur de largeur ou une liste de requêtes de média délimitée par des virgules avec un descripteur de largeur.

Le navigateur utilisera les valeurs d’attribut pour charger l’image la plus appropriée. Le navigateur utilise le premier élément <source> avec un indicateur correspondant et ignore les balises <source> suivantes.

L’élément <img> est requis en tant que dernière balise enfant du bloc de déclaration <image>. L’élément <img> est utilisé pour assurer la rétrocompatibilité pour les navigateurs qui ne prennent pas en charge l’élément <picture> ou si aucune des balises <source> ne correspond.

L’élément <picture> fonctionne de manière similaire aux éléments <video> et <audio>. Vous configurez différentes sources et la première source qui correspond aux préférences est celle qui est utilisée.

La balise <figure>

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

La balise <figure> spécifie un contenu autonome, comme des illustrations, des diagrammes, des photos, des listes de codes, etc.

Alors que le contenu de l’élément <figure> est lié au flux principal, sa position est indépendante du flux principal et, si elle est supprimée, elle ne devrait pas affecter le flux du document.

L’utilisation de figure trouve son intérêt si cette balise contient – en plus de l’image <img> – la balise <figcaption>

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

La balise <figcaption> définit une légende pour un élément <figure>.
L’élément <figcaption> peut être placé en tant que premier ou dernier enfant de l’élément <figure>

Référencement des images, pourquoi ?

Un dessin vaut souvent mieux qu’un long discours, d’autant plus par écrit, le référencement des images sur un site web est un élément à prendre en compte lorsqu’on l’on pense à sa stratégie de référencement.
Il arrive parfois que certaines requêtes Google affichent en première ligne de proposition des images.

Cela touche bien sûr également les images que l’on trouvera dans la section « Images » des moteurs de recherche tel que Google ou Bing.
Le bon référencement des images au sein d’une page pourra également être profitable à la page elle-même où sont situées les dites images.
En effet, les images d’une page sont une composante comme une autre et doivent donc être prises en compte dans le référencement de cette page ou du site.
Il faut savoir que les formats d’images les plus courants sur le net sont les formats .png (Portable Network Graphics), .jpeg (Joint Photographic Experts Group) et .gif (Graphics Interchange Format) bien que d’autres formats existent et soit également présents sur le net.
Les principaux moteurs de recherche comme Google, Bing et Yahoo! font l’effort de référencer également les autres images, mais les autres moteurs de recherches privilégies pour la plupart ces trois formats qui sont donc les plus répandus.

Les balises alt et title
La question la plus courante à propos du référencement des images par les moteurs de recherche est le rôle des attributs « ALT » et « TITLE ».

La balise ALT
La balise ALT possède deux utilités principalement.
La première est pour les utilisateurs qui sont dans l’impossibilité de télécharger ou d’afficher l’image en question.
En effet lorsque la vitesse de connexion ne le permet pas ou lorsque des systèmes de protection sont en place interdisant l’affichage des images (ce qui est rare de nos jours), c’est le contenu de la balise ALT qui va s’afficher plutôt que l’image elle-même.
Le rôle le plus important de la balise alt en ce qui nous concerne, c’est le fait que son contenu soit utilisé par les robots des moteurs de recherche pour indexer l’image en question.

La balise TITLE
La balise Title a plus vocation a satisfaire l’expérience utilisateur, mais est très peut prise en compte lors du référencement.
Le contenu de la balise « TITLE » sera affiché lors du passage du curseur du visiteur sur l’image en question.

La balise « TITLE » a donc plus pour vocation de guider l’utilisateur sur ce qu’il voit plutôt que d’aider les robots des moteurs de recherche.

<img class="imageCentre" title="Affichage des images dans Google" src="http://www.seo-labs.fr/wp-content/uploads/referencement-images-seo-01-600x491.png" alt="Référencement image Google" height="361" width="441">

À nouveau, on peut remarquer la présence de la balise « TITLE » en vert foncé avec son contenu qui sera vu par l’utilisateur passant son curseur sur l’image ainsi que la balise « ALT » qui sera utilisée par les moteurs de recherche et les utilisateurs ne pouvant par télécharger l’image.

Autres éléments importants

D’autres éléments sont également à prendre en compte lorsque l’on souhaite mettre en place un bon référencement de ses images.
Le nom de l’image
Le nom que l’on donne à nos images est l’élément le plus important parmi ceux pris en compte par les moteurs de recherche.
Il semblerait que ce soit l’élément le plus déterminant dans le référencement de celles-ci. Il faut donc y prêter une attention certaine et éviter à tout prix les « IMAGE_tuto_3_01″, »IMAGE_tuto_3_02″,etc.
Il faut en effet plutôt privilégier une nomenclature basée sur les mots clés (qui se rapproche du contenu de la balise ALT).

(Il est préférable d’aller au plus simple et d’utiliser uniquement des minuscules sans accents pour ne pas gêner le travail des robots des moteurs de recherche. Pour séparer les mots, on préférera également un tiret  » –  » plutôt qu’un underscore  » _  » qui n’est pas considéré comme un élément de séparation de mot par les crawlers.)

Par exemple casque-beats.png, fenetre-windows-copier-coller.jpg, configurer-wordpress-url.png

On évitera également d’y placer des « stop words », aussi appelées « mots vides »

La légende ou le texte associé
La légende de l’image, ou plutôt le texte environnant l’image au niveau du code HTML peut également avoir une importance dans le référencement des images dans le sens ou les robots des moteurs peuvent associer ce texte à l’image.
Il arrive souvent que l’on place une image dans un article/un propos puis que l’on explique ce que cette image montre… « Nous voyons par exemple dans cette image… ».
La légende ou le texte associé a donc un rôle dans le référencement des images, mais également dans l’expérience de l’utilisateur, car cela permet d’expliquer une image plus facilement.

Le poids de l’image
Le poids de l’image qui a une importance cruciale pour son référencement, mais également pour le référencement global de la page dans laquelle elle se situe.
En effet, une page ou une image longue à charger (car d’un poids trop lourd/pas optimisée) sera dévaluée par les moteurs de recherche, allant à l’encontre de l’expérience utilisateur qui sera d’ailleurs « jugée/notée » moins bonne qu’avec des images optimisées.
Il faut savoir faire un compromis entre la taille d’une image et sa qualité visuelle pour ne pas diminuer l’expérience utilisateur.

Le référencement des images est un travail fastidieux, car il nécessite une attention supplémentaire sur la rédaction et la structure des pages et des articles. Néanmoins, il est nécessaire de bien remplir les champs nécessaires et de correctement formater ces images pour rester cohérents lorsque l’on met en place une stratégie de référencement. Pour finir, il est à noter que les images ayant une présence purement décorative comme les puces et les bannières peuvent tout à fait contenir une bannière ALT vide, car leur référencement n’a pas d’importance et pourrait fausser le référencement des pages dans lesquelles elles se trouvent.

(Source = Référencement des images et attributs alt et title)

Aller plus loin

La résolution d’une image pour le web