Les formats d'images sur le Web
Voici les principaux formats d'images et leurs cas d'utilisation :
JPG ou JPEG : (*.jpg) Format majoritaire, principalement utilisé pour les images riches en couleurs (photo).
GIF (*.gif) : Principalement utilisé pour les logos et diagramme, moins l'image a de couleurs plus l'image est petite
PNG (*.png) : "Nouveau" format très populaire chez les designer pour sa capacité à prendre en charge la transparence.
Afficher une image
Quand vous placer une image dans votre page web, vous faites une référence à un fichier image avec une URL (absolue ou relative) que le navigateur saura afficher. Donc lors de la mise en ligne de fichier HTML, n'oubliez pas les images :P
Pour afficher une image, on utilise la balise IMG
La balise img
La balise img est une balise "inline"
Elle a 2 attributs obligatoires :
src="url"
L'URL de l'image à afficher, le lien peut être relatif ou absolu
alt="text"
Texte altérnatif, ce texte sera utilisé si l'image est inaccessible, cet attribut est très important pour l'accéssiblilité, en effet les navigateurs vocaux utiliseront le contenu de cette balise pour faire entendre l'image. Donc soyez courtois et élégant et évitez de remplir cette attribut de mots-clefs pour le référencement.
Exemple
<!-- Ajout d'une image --> <img src="dossier/images/images.jpg" alt="Mon image" />
Comme pour les liens, l'URL de l'image peut être relative ou absolue, vous pouvez donc utiliser les ./ ../ ou / pour parcourir l'abrborescence.
<!-- Ajout d'une image(URL absolue) --> <img src="http://exemples.jacksay.com/images/agent-f.jpg" alt="Agent F" /> <!-- Même lien dans un fichier HTML situé à la racine du site --> <img src="images/agent-f.jpg" alt="Agent F" /> <!-- ou encore --> <img src="/images/agent-f.jpg" alt="Agent F" />
http://www.la-grange.net/w3c/html4.01/struct/objects.html#h-13.2 : La documentation officielle pour les images
http://cerig.efpg.inpg.fr/dossier/web_graphique/sommaire.htm : Un dossier complet sur "l'histoire" des images sur le web, Ca commence à dater un peu mais pour ceux qui aime l'histoire c'est très instructif.
Autres attributs de IMG
title="text"
Comme la majorité des balises, vous pouvez renseigner l'attribut title, cela aura pour effet d'afficher une info-bulle au survolle de l'image. Cela peut avoir un effet sur le référencement. Cette attribut sert généralement à livrer des informations sur l'image.
width="integer" et height="integer"
Les attributs width et height permettent de définir la taille de l'image, cependant il est recommandé de toujours optimiser l'image à la taille d'affichage pour éviter les déformations / pixelisation des images dans la page
<!-- On force l'image à 250 pixel de large --> <img src="http://exemples.jacksay.com/images/agent-f.jpg" alt="Agent F" width="250" /> <!-- On force l'image à 150 pixel de haut --> <img src="http://exemples.jacksay.com/images/agent-f.jpg" alt="Agent F" height="150" />
Attention, quand vous spécifié la taille de votre image, aucune compression n'est faites, ainsi, la photo chaudement sortie de votre appareil photo de 4 millions de pixel et affichée à 300x300 pixels a toujours le même poids !
Si vous spécifier uniquement le WIDTH ou le HEIGHT, le ratio de l'image est respecté.
Les CSS permettent un meilleur contrôle pour l'affichage des images
Les images avec la balise OBJECT
Pour afficher des images dans un document HTML, vous pouvez également utiliser la baslie OBJECT.
La balise OBJECT est dédié à l'intégration de médias riches : Vidéo, Applets, animation SWF mais aussi page WEB, PDF, etc... Son fonctionnement est souvent conditionné par la présence d'un plugin installé dans le navigateur : Flash Player, Quick Time, Real Time, Acrobate, etc…
Intégrer une image avec la balise OBJECT
<object data="http://exemples.jacksay.com/images/lefevre.jpg" type="image/jpeg"> Texte de substitution </object>
L'attribut data prend pour valeur l'URL de la source, et l'attribut type le type mime du document (dans notre cas c'est une image jpeg donc le type mime est image/jpeg).
Le contenu texte situé dans la balise object sera utilisé comme texte de substitution si la source est indisponible (ou ne peut pas être affichée correctement). A noter que le contenu de substitution peut être un code HTML complet (pour les animation Flash par exemple).
Sur ce dernier point, je manque d'information concernant le bénéfice produit en terme d'accéssiblilité. Mais la logique de la balise elle-même semble aller dans le bon sens.
Taille affiché
Attention, la baslie OBJECT dispose de paramètre WIDTH et HEIGHT pour gérer la largeur et la hauteur de la zone d'affichage, la source affichée dans cette zone n'est pas forcement redimentionnée.
<!-- Pour un document de type image, l'image est redimentionnée --> <object data="http://exemples.jacksay.com/images/lefevre.jpg" type="image/jpeg" width="150" height="150"> Texte de substitution </object>
Dans le cadre de document flash, le redimentionnement est également effectif, mais pour un document HTML on constate que des barres de défilement sont ajoutées si besoin :
<!-- Document de type page html --> <object data="http://studio.jacksay.com" type="text/html" width="1050" height="300"> Mon site internet </object>
Si vous utilisez OBJECT pour afficher des pages web, gardez à l'esprit que les liens et référence sont relative à la source affichées. Et que d'éventuels liens dans la source s'afficheraient dans la zone d'affichage.
La balise OBJECT, dans le cadre de l'affichage de page web peut être comparé à la balise IFRAME
La balise OBJECT est rarement utilisée pour l'intégration des images car elle pose parfois des problèmes de reconnaissance aux vocaliseurs (a vérifier).
http://joliclic.free.fr/html/object-tag/ Un article interessant sur l'utilisation de la baslie OBJECT
http://www.la-grange.net/w3c/html4.01/struct/objects.html#h-13.3 : La documentation officielle