5-Insérer des images

 

Insérer des images - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application

Maintenant que nous avons un site Web presque complet, que pourrait-il rester à couvrir dans ce didacticiel ?

Beaucoup, en fait.

Pour commencer, parlons des images.

Insérer une image dans une page web est étonnamment facile, mais il y a néanmoins quelques détails à prendre en compte.

Le format de votre image en fait partie.

Toutes les images ne sont pas créées égales et selon le format que vous choisissez, vous pouvez échanger la qualité contre la compression ou vice-versa.

Les images sont assez lourdes en termes de taille de fichier, bien plus que le texte, donc des images plus grandes signifient un temps de chargement plus lent.

Nous commencerons ce chapitre en présentant différents formats d'image et en déterminant celui qui convient le mieux à chaque besoin spécifique.

Continuez à lire pour en savoir plus.

Différents formats d'images

Les formats d'image sont des moyens de stockage des données numériques d'une image informatique.

Selon les formats dans lesquels votre fichier est stocké, votre image sera plus ou moins compressée, ce qui affectera à son tour la qualité et la taille de votre fichier.

Vous avez probablement déjà vu des formats de fichiers image.

Par exemple, Adobe Photoshop vous permet de choisir entre différents formats lorsque vous enregistrez une image.

<CAPTURER>

Comme vous pouvez le voir, vous avez plus qu'assez de choix quant au format d'image à utiliser sur votre site Web.

Nous allons couvrir les trois principaux formats de fichiers utilisés pour afficher des images sur des pages Web.

Ce sont les trois types d'images que vous rencontrerez le plus souvent.

Ils partagent tous un point commun : ils sont compressés, ce qui signifie qu'ils sont optimisés pour un chargement plus rapide sur les pages Web.

Le format JPEG

Le format JPEG signifie "Joint Photographic Expert Group" et, comme vous l'avez peut-être deviné d'après son nom, est particulièrement courant dans le domaine de la photographie numérique.

Mais c'est loin d'être sa seule utilité.

La méthode de compression JPEG est très avantageuse lors de la création ou de l'adaptation d'images pour leur utilisation sur des médias Web.

Ce format est spécifiquement conçu pour réduire la taille des grandes photos afin d'optimiser leur vitesse de chargement.

Voici une photo enregistrée au format JPEG.

<IMAGE>

Les images JPEG sont enregistrées avec l'extension de fichier .jpg ou moins fréquemment .jpeg.

Notez que JPEG est une méthode de compression avec perte, donc selon la quantité de compression que vous choisissez, vous pouvez voir une baisse légère mais généralement imperceptible de la qualité de l'image.

C'est ce qui permet de stocker de grandes photos avec des tailles de fichiers réduites.

Il est généralement très difficile de détecter une perte de qualité à l'œil nu, sauf si vous avez trop compressé votre fichier.

Avec certains types d'images cependant, je suis tenté de dire tout ce qui n'est pas une photographie, l'image peut sembler légèrement floue.

Dans ce cas, il est préférable d'utiliser un autre format d'image tel que PNG.

Le format PNG

Le format PNG signifie "Portable Graphic Network" et est un système d'image relativement moderne.

Ce format convient le mieux à la plupart des graphiques et en particulier aux images générées par ordinateur.

Comparé au JPEG, le format d'image PNG excelle lorsque l'image possède de grandes zones uniformément colorées.

Bref, tout ce qui n'est pas une photo.

Voici une image enregistrée au format PNG. Vous le reconnaîtrez peut-être quelque part.

<IMAGE>

PNG est une méthode de compression sans perte, ce qui signifie que même si l'image est naturellement optimisée, le processus de compression n'affecte pas la qualité de l'image.

Le format d'image PNG présente un autre avantage : il prend en charge les images transparentes.

Si les images PNG ont une meilleure qualité et peuvent prendre en charge la transparence, quel est l'intérêt du JPEG ?

Le format JPEG a une meilleure compression.

Pour les fichiers volumineux, une image enregistrée au format JPEG se chargera presque toujours plus rapidement qu'une image enregistrée au format PNG.

Je recommande d'utiliser JPEG essentiellement pour les photos de taille considérable et pour les images dont vous souhaitez optimiser la vitesse de chargement au détriment de la qualité absolue.

Le format GIF

Le format GIF signifie Graphics Interchange Format.

Vous en avez probablement déjà entendu parler, car le nom est devenu presque synonyme de sa caractéristique principale : la possibilité d'afficher des images animées.

Les images GIF sont limitées à 256 couleurs mais, tout comme avec le format PNG, elles prennent en charge la transparence.

L'image suivante est enregistrée au format GIF.

<IMAGE>

Ce sont les trois formats les plus utilisés sur le web.

Le meilleur format pour votre image

Il n'existe pas de meilleur format universel pour votre image.

Au contraire, il existe différents formats qui existent pour répondre à des besoins distincts.

• Le format JPEG est mieux utilisé pour les photos
• Le format PNG est mieux utilisé pour les graphiques
• Le format GIF est mieux utilisé pour les images animées

Comme mentionné ci-dessus, ce sont les trois formats d'image les plus couramment utilisés pour le développement Web.

Qu'en est-il des autres formats tels que TIFF (.tif) ou BITMAP (.bmp) ?

Les formats non présentés ici ne sont généralement pas adaptés à un usage web, principalement parce qu'ils sont souvent non compressés et donc trop volumineux pour être chargés sur une page web.

Insertion d'une image

Revenons à notre code HTML.

Tout ce dont vous avez besoin pour insérer une image dans une page Web est la balise <img />. Comme vous l'avez peut-être deviné, cela signifie "image".

Il s'agit d'une balise autonome. Vous vous souvenez peut-être de la distinction du deuxième chapitre de ce didacticiel.

Les balises autonomes telles que <img /> ou <br /> n'ont pas besoin d'être ouvertes et fermées et, en tant que telles, vous n'avez pas besoin d'entrer deux balises comme c'était le cas avec la plupart des autres éléments HTML que nous avons vus jusqu'à présent.

Il peut porter deux attributs, dont deux sont obligatoires.

Ce sont les suivants :

• src signifie "source" et indique l'emplacement du fichier image que vous souhaitez insérer. Il peut être inclus soit par un chemin relatif (par exemple images/siteraw.png) soit par un chemin absolu (par exemple http://www.siteraw.com/siteraw.png), le premier étant une pratique beaucoup plus courante. Reportez-vous à l'introduction des liens du dernier chapitre si vous avez oublié ce que signifient absolu et relatif.
• alt signifie "texte alternatif" et est une courte description de l'image. Cette balise ne semble pas très utile à première vue, mais elle doit toujours être incluse. Chaque image a besoin d'un texte alternatif. De nombreux agents tels que les robots des moteurs de recherche et les navigateurs non visuels (ceux des internautes aveugles en particulier) ont besoin d'un texte alternatif pour savoir de quoi parle l'image. De plus, il s'agit du texte qui apparaîtra si l'image ne peut pas être chargée sur votre page pour une raison quelconque.

Les images sont par défaut des éléments en ligne (elles ne créent pas de nouvelle ligne sur une page), elles doivent donc être incluses dans les balises de niveau bloc.

Dans notre cas, nous inclurons notre image dans les balises de paragraphe (<p>). C'est le seul élément de bloc que nous connaissions pour le moment.

Voici notre code HTML.

<p>

     Bienvenue sur SAGProfProg.<br />

     <img src="images/sagprofprog.jpg" alt="Logo SAGProfProg" />

</p>

Et c'est tout.

L'insertion d'images est ridiculement simple en HTML.

La seule partie "difficile" est de choisir le bon format.

Texte alternatif

Comme nous l'avons brièvement mentionné, l'attribut de texte alternatif (alt) spécifie un texte alternatif pour l'image au cas où elle ne pourrait pas être chargée.

Ce n'est pas seulement important si l'image ne se charge pas, en cas de connexion lente ou d'erreur dans l'attribut src, mais c'est aussi nécessaire pour une bonne indexation par les moteurs de recherche et leurs robots.

Depuis HTML5 cet attribut n'est plus strictement requis pour une page sémantiquement valide mais vous devez néanmoins toujours fournir à vos images un texte alternatif pour les raisons évoquées ci-dessus.

Les navigateurs pour les utilisateurs malvoyants liront le texte à haute voix tandis que les navigateurs textuels afficheront toujours le texte alternatif au lieu de l'image.

Les robots des moteurs de recherche ne téléchargeront pas l'image pour essayer de comprendre de quoi il s'agit et si elle est pertinente pour votre page Web. Au lieu de cela, ils liront simplement l'attribut alt pour déterminer de quoi parle l'image.

Certains navigateurs très anciens affichent également le contenu de l'attribut alt sous forme d'info-bulle, mais cela ne devrait pas être le cas avec les versions modernes.

En parlant de cela, comment affichez-vous une info-bulle ?

Ajout d'une info-bulle

L'attribut utilisé pour afficher une info-bulle visuelle au survol de la souris est le titre.

Contrairement à alt, cet attribut est complètement facultatif.

L'attribut title appartient à ce qu'on appelle les attributs globaux. Ce sont des attributs communs à tous les éléments HTML. En tant que tel, vous n'êtes pas limité à l'utilisation d'un titre sur une image, vous pouvez l'appliquer à un paragraphe, un lien ou même une emphase. Nous avons mentionné un autre attribut global précédemment, vous en souvenez-vous ? C'était l'identifiant qui s'applique à chaque balise HTML.

Voici un exemple.

<img src="sagprofprog.png" alt="Logo SAGProfProg" title="Le logo de SAGProfProg" />

Passez le pointeur de votre souris sur l'image pour voir apparaître l'info-bulle.

Une image cliquable

Tout comme vous pouvez créer un lien texte (voir dernier chapitre), vous pouvez également créer un lien image cliquable.

Au lieu de placer du contenu textuel entre les éléments <a>, placez simplement une balise d'image (<img />).

Voici le code HTML.

<p>

     Vous voulez visiter un site Web génial? Cliquez sur l'image ci-dessous !<br />

     <a href="http://www.sagprofprog.com">

    <img src="sagprofprog.png" alt="Visitez SAGProfProg !" /></a>

</p>

Et là vous avez une image cliquable.

Certains navigateurs afficheront une bordure bleue ou violette quelque peu inesthétique autour des liens d'image. Nous pouvons facilement supprimer ce cadre en CSS, alors ne vous en faites pas s'il apparaît sur votre navigateur.

Les figures

Tout au long de ce didacticiel, vous avez fréquemment rencontré des chiffres.

Les figures sont des éléments HTML qui représentent un contenu autonome et améliorent le texte en complétant les informations sur la page.

Contrairement à la croyance populaire, les chiffres ne sont pas nécessairement des images.

Bien que les images soient souvent le format préféré, les figures peuvent être des diagrammes, des listes, des citations, du code source et plus encore.

Tout ce qui illustre ou complète le contenu textuel de votre page Web peut être une figure.

Cela dit, la plupart du temps, les chiffres sont composés d'au moins une image, c'est donc l'exemple que nous allons utiliser.

Insérer une figure

Vous souvenez-vous de cette image du premier chapitre ?

<IMAGE>

C'est un chiffre.

Pour en insérer un dans votre page Web, enroulez simplement les balises <figure> autour de votre élément <img />.

<figure>
   <img src="siteraw.png" alt="SiteRaw" />
</figure>

Les figures sont presque toujours accompagnées de légendes.

Dans notre exemple du premier chapitre, la légende se lit "HTML et CSS pour la création de sites Web".

La balise HTML pour ajouter des légendes est <figcaption> et elle va à l'intérieur de l'élément <figure>, par convention après l'image.

<figure>
    <img src="siteraw.png" alt="SiteRaw" />
    <figcaption>HTML and CSS for building websites</figcaption>
</figure>

Plus tôt dans ce chapitre, je vous ai dit que les images (<img />) devaient être situées à l'intérieur des paragraphes (<p>) ou d'autres éléments de niveau bloc.

Eh bien, la balise figure que nous venons de découvrir (<figure>) se trouve être un élément de bloc, donc les figures peuvent et doivent être situées en dehors des paragraphes.

Voici une démonstration.

<p>Welcome to SiteRaw!</p>

<figure>
    <img src="siteraw.png" alt="SiteRaw" />
    <figcaption>SiteRaw is the best site on the web</figcaption>
</figure>

Comme vous pouvez le voir, tout l'élément figure est en dehors du paragraphe.

Le rôle des figures

La dichotomie entre les éléments en ligne et les éléments de bloc est précise mais quelque peu simpliste.

En réalité, ce n'est pas la principale raison pour laquelle nous nous abstenons d'utiliser des chiffres dans les paragraphes... ou des titres à l'intérieur des paragraphes d'ailleurs.

Inline et block sont des valeurs d'affichage. En tant que tels, ils peuvent être modifiés par CSS.

Vous pouvez transformer un paragraphe en élément en ligne et une image en élément de bloc si vous le souhaitez.

Vous vous souvenez de la règle d'or du développement web que je n'arrête pas d'évoquer depuis le début de ce tutoriel ? HTML pour le contenu, CSS pour le style.

La balise <figure> existe principalement à des fins sémantiques, la distinction block/inline étant secondaire.

La principale raison pour laquelle nous ne plaçons pas de chiffres dans les paragraphes est que les chiffres sont utilisés pour fournir des informations par eux-mêmes. Compléter les paragraphes, ne pas les compléter.

Si votre image fournit :

• pas d'information ou d'information complémentaire, mettez-la dans un paragraphe.
• informations complémentaires, mettez-les dans une figure.

En résumé, si une image est informative plutôt que décorative et si l'information est autonome, elle doit figurer dans une figure.

Ne vous inquiétez pas trop de la casse qui s'applique à votre image, ce ne sont pas des règles inflexibles mais plutôt des pratiques HTML appropriées et des conventions de codage valides.

Enfin, lorsque nous avons présenté les chiffres, j'ai brièvement mentionné qu'ils contiennent généralement au moins une image.

Ils peuvent facilement en contenir plus.

Voici un exemple.

<figure>
    <img src="awesome.png" alt="SiteRaw is awesome!" />
    <img src="amazing.png" alt="SiteRaw is amazing!" />
    <img src="siteraw.png" alt="SiteRaw is SiteRaw!" />

    <figcaption>What is SiteRaw?</figcaption>
</figure>

Ce cas justifie l'utilisation de plusieurs images à l'intérieur d'une figure car elles sont toutes liées. D'une manière modérément absurde.

Mais oubliez cela, vous savez maintenant comment insérer des images sur votre site Web.

Encore mieux, nous avons terminé la première partie de ce tutoriel sur le langage HTML.

Nous pouvons maintenant passer au CSS.

Fatigué de m'entendre dire "on va apprendre à faire X avec CSS dans un instant" ?

C'est votre jour de chance ! Vous allez enfin apprendre le CSS... dans un instant ;)