Pour ce tout premier (vrai) billet sur Tripodocus, j'ai l'honneur de faire intervenir l'auteur du blog Miximum.fr qui va nous parler de code. Nous sommes honorés de recevoir ici un gentleman doublé d'un érudit et affublé d'une modestie à toute épreuve. (NDLA : C'est trop gentil, je vais rougir). Sans plus tarder, je lui laisse la parole…

Pour ce premier billet, donc, nous allons parler de code. Plus précisément, nous allons parler du code utilisé pour afficher des images sur le Web.

Si vous êtes développeur, vous trouverez dans ce billet un rappel extensif de la manière correcte d'inclure des images sur les sites que vous développez. Si vous n'êtes pas développeur, vous apprendrez quoi regarder pour vérifier que votre plateforme de publication est correctement configurée et optimisée (je vous épargne le suspense : probablement pas).

Pourquoi faire ?

Commençons par le commencement. Lorsqu'on veut inclure une image dans du code HTML, on utilise la balise img.

<img src="https://www.miximum.fr/thumbs/i/2015/big-tree_smallsquare.jpg" />

Code HTML ? Balise ? Si vous n'êtes pas familier des technologies utilisées pour publier de l'information sur le Web, je vous encourage à consulter cet article d'introduction avant de poursuivre.

Le résultat du code précédent est le suivant :

Ma photo s'affiche, que demande le peuple ? Et bien à vrai dire, le code susmentionné présente de nombreux problèmes.

Peut-être surfez-vous sur le Web dans des conditions idéales, avec une bonne bande passante, un écran suffisamment grand, un navigateur raisonnablement à jour, etc ? Ce n'est toutefois pas le cas de tout le monde, pensez par exemple à ceux qui :

• ont une connexion très lente avec les images qui ne chargent pas ou peu (hello la 3G parisienne) ;
• ont désactivé l'affichage des images pour économiser la bande passante ;
• souffrent d'un handicap visuel ou cognitif et utilisent un navigateur vocal ;
• sont atteint d'une cécité totale et utilisent un navigateur en braille ;
• ne sont tout simplement pas humains (ex : robots des moteurs de recherche).

Par conséquent, en vous contentant du code naïf et incomplet ci-dessus…

• votre travail n'est pas accessible pour un grand nombre de personnes ;
• votre site est peu ou mal référencé ;
• interagir avec le contenu que vous produisez est plus difficile et moins efficace sur les réseaux sociaux.

Nous allons remédier à tout ça.

Fournir une alternative textuelle

Considérez l'image d'une photographie sur un site Web (le votre, par exemple). Cette image fourni une information, une expérience sensorielle et émotive qui fait partie intégrante de la navigation sur ledit site Web. Imaginez maintenant une personne qui navigue sur votre site mais, pour une raison ou pour une autre, n'a pas accès à cette image. Pour restituer le plus fidèlement possible cette expérience de navigation, nous allons renseigner une alternative textuelle à l'image.

Comme son nom l'indique, le but d'une alternative textuelle est de fournir la même information que l'image, mais dans un format textuel. Attention, en aucun cas il ne s'agit d'une légende.

Trouver une bonne alternative textuelle est difficile, et dépend du contexte dans lequel l'image sera vue. Voici quelques exemples.

<img src="https://www.miximum.fr/thumbs/i/2015/big-tree.jpg"
     alt="Photographie d'un arbre au milieu des champs" />

<img src="https://www.miximum.fr/thumbs/i/2015/nounours.jpg"
     alt="Photographie d'un ours en peluche attaché à un piquet, noir et
     blanc" />

<img src="https://www.miximum.fr/thumbs/i/2014/tree.jpg"
     alt="Photographie d'un arbre surplombant une rivière, noir et blanc" />

<img src="https://www.miximum.fr/thumbs/i/2014/fauve.jpg"
     alt="Photographie d'une sculpture de fauve à l'air féroce pendant
     l'heure bleue" />

Inutile d'en faire des tonnes, une phrase suffit généralement. Retenez en tout cas que la balise « alt » est obligatoire.

Correctement baliser les légendes

Jusqu'à très récemment, HTML ne disposait pas de balises spécifiques pour structurer les légendes des images. Les choses ont changé avec html5, qui propose maintenant les balises « figure » et « figcaption », qui s'utilisent ainsi :

<figure>
    <img src="https://www.miximum.fr/thumbs/i/2014/le-konigssee_medium.jpg"
         alt="Photographie d'un bateau sur le grandiose lac Konigsee" />
    <figcaption>
        Le Königssee est un lac Bavarois célèbre pour la pureté de son eau.
        <br /> <small>© Thibault </small>
    </figcaption>
</figure>

Ce qui produit le résultat suivant :

Notez bien la différence entre la légende et l'alternative textuelle, qui ne sont aucunement interchangeables.

Vérifiez le code source de votre portfolio. Si vous utilisez des balises génériques comme des « div » pour structurer vos images et légendes, c'est qu'il est temps de vous mettre à jour.

Apporter de l'information sémantique avec Schema.org

Les moteurs de recherche font de leur mieux pour donner du sens au contenu qu'ils indexent. Mais en tombant sur une image, comment peuvent-ils savoir si elle constitue le sujet principal de la page, ou l'illustration principale d'un billet de blog ou d'une recette de cuisine ?

Une initiative commune aux principaux moteurs de recherche (Google, Yahoo, Bing) a permis de lancer schema.org, un site qui propose une syntaxe permettant d'enrichir les données d'une page Web d'une manière compréhensible par des robots d'indexation.

Schema.org propose différents vocabulaires en fonction du type d'objet représenté. Plusieurs types peuvent être représentés dans une seule page. Par exemple, un « billet de blog » est illustrée par une « image » dont l'auteur est une « personne ».

À partir de ces informations, les moteurs vont pouvoir adapter la façon dont les résultats de recherche sont représentés. C'est ce qui explique pourquoi vous verrez la photo et le temps de préparation directement dans la liste de résultats quand vous cherchez « pâte à crêpe » ou « sauce béchamel ».

À vrai dire, aucun affichage particulier n'existe actuellement en ce qui concerne les images, mais que ça ne nous empêche pas d'enrichir nos pages Web.

Voici un exemple de balisage pour une page de portfolio qui présente une photo.

<article itemscope itemtype="http://schema.org/ImageObject">
    <h1 itemprop="name">
        <a href="/pictures/le-konigssee/" itemprop="url">Le Königssee</a>
    </h1>
    <footer class="meta">
        <time itemProp="dateCreated" datetime="2014-07-15T12:44:58+02:00">
            15 juil. 2014
        </time>
        <span itemprop="width">4896</span> x <span itemprop="height">3264</span>
    </footer>

    <figure>
        <a href="/media/i/2014/le-konigssee.jpg" itemprop="contentUrl">
            <img src="/thumbs/i/2014/le-konigssee_medium.jpg"
                 alt="Le Königssee, lac Bavarois réputé pour sa clarté"
                 itemprop="thumbnail" />
        </a>
        <figcaption itemprop="caption description">
            <p>Le Königssee est un lac Bavarois célèbre pour la pureté de son eau.</p>
        </figcaption>
    </figure>
</article>

Vous pourrez tester votre page avec l'outil dédié proposé par Google.

Des images réseaux sociaux friendly

Nous avons fait de notre mieux pour faciliter le travail d'indexation des moteurs de recherche. Mais il existe d'autres sites qui vont analyser le code source de vos pages Web pour adapter leurs résultats. C'est le cas de certains sites de réseaux sociaux, qui ont plus ou moins définis leurs propres vocabulaires sémantiques.

Facebook, par exemple, est à l'initiative de l'Open Graph Protocol. Je sens que ça va être technique et que vous commencez à piquer du nez ; un exemple sera sans doute plus parlant.

En ajoutant quelque chose comme ça entre les deux balises « head » de votre code html :

<meta property="og:title" content="Le Königssee" />
<meta property="og:type" content="article" />
<meta property="og:description" content="Le Königssee, lac Bavarois réputé pour sa clarté" />
<meta property="og:url" content="https://www.miximum.fr/pictures/le-konigssee/" />
<meta property="og:site_name" content="Tripodocus" />
<meta property="og:image" content="https://www.miximum.fr/thumbs/i/2014/le-konigssee_medium.jpg" />
<meta property="og:image:width" content="4896" />
<meta property="og:image:height" content="3264" />

Vous obtenez le résultat suivant lorsqu'un utilisateur de facebook insérera le lien vers la page en question dans son statut :

D'autres réseaux utilisent les mêmes balises, comme Pinterest. Twitter, quand à lui, n'en fait qu'à sa tête et a défini sa propre syntaxe, les « twitter cards ».

<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@tripodocus" />
<meta name="twitter:title" content="Le Königssee" />
<meta name="twitter:description" content="Le Königssee, lac Bavarois réputé pour sa clarté" />
<meta name="twitter:image" content="https://www.miximum.fr/thumbs/i/2014/le-konigssee_medium.jpg" />
<meta name="twitter:url" content="https://www.miximum.fr/pictures/le-konigssee/" />

Voici un exemple d'image embarquée dans un tweet. D'ailleurs, si tu veux tenter le coup, n'hésites pas à twitter ou publier cet article sur Facebook, juste pour voir ;)

Conclusion

En structurant correctement vos documents HTML, vous gagnerez la sensation du travail bien fait, ce qui en soit est une raison suffisante. Mais vous bénéficierez également de nombreux avantages :

• meilleure accessibilité ;
• meilleur référencement dans les moteurs de recherche (peut-être) ;
• meilleure interopérabilité de votre portfolio avec les réseaux sociaux.

Et ça, c'est plutôt cool, non ?!