Tutoriels multimédias - Utilisation d'images sur le Web

Ce document explique en détail dans quelles conditions utiliser des images et du texte, comment accélérer le téléchargement des images et choisir le format d'image approprié.

Quand utiliser des images

Pour la plupart des images, une image peut valoir mille mots. Cependant, il est important de noter que personne ne prête attention aux gens bavards. Premièrement, et surtout, il faut utiliser les graphiques du document comme outils de visualisation et non comme décoration inutile. Ils devraient soutenir le contenu du texte et aider les lecteurs à naviguer dans le document. L'utilisation d'images peut clarifier le contenu du document et peut également ajouter des commentaires ou des exemples. Les photos, les graphiques, les diagrammes, les cartes et les illustrations qui soutiennent le contenu sont des choix naturels et appropriés. Par exemple, les photos de produits sont une composante essentielle des catalogues en ligne et des guides d'achat. De plus, les icônes et les symboles avec des liens fonctionnels, y compris les images animées, peuvent être des guides visuels très efficaces pour orienter le contenu ou les ressources externes. Si une image ne joue aucun de ces rôles dans le document, elle devrait être mise de côté !

Lorsque l'on envisage d'ajouter des images à un document, un autre facteur important à considérer est le délai de récupération lié à la transmission via le réseau, en particulier via un modem pour transmettre ce document. Un document standard peut généralement contenir jusqu'à 10-15 Ko, tandis qu'une image peut atteindre aisément plusieurs centaines de Ko. De plus, le temps total de téléchargement d'un document n'est pas seulement la somme de tous ses éléments, mais aussi le délai de latence apporté par la charge réseau.

Selon la vitesse de connexion (autrement dit, la bande passante,bandwidthGénéralement exprimé en bps ou b/s, la saturation du réseau peut ralentir la vitesse de connexion. Pour télécharger un document contenant une image de 100 Ko, il faudrait peut-être une heure ou deux du matin, lorsque la plupart des gens dorment, utiliser un modem de 57.6 Kbps pour passer environ 15 secondes pour le télécharger, ou bien utiliser un modem de 9600 bps pendant plus de 10 minutes à midi pour le télécharger. Avez-vous reçu cette image ?

Bien sûr, l'utilisation d'images et de multimédia d'autres types incite les fournisseurs de services Internet à chercher constamment des moyens plus rapides, meilleurs et plus robustes pour fournir du contenu Web. Bientôt, les connexions de modulateur de 56 Kbps disparaîtront de l'histoire, comme les modulateurs de 9600 bps, et seront remplacés par des technologies nouvelles telles que les modulateurs câblés et ADSL. En réalité, la plupart des connexions dépasseront bientôt la vitesse de 1 Mbps.

Avec la baisse des prix, l'utilisation du réseau continuera à augmenter, ce qui entraînera des problèmes de congestion. Si vous essayez d'accéder à un serveur surchargé, peu importe la vitesse de votre connexion réseau, vous ne pourrez pas accéder normalement.

Quand utiliser le texte

Le texte n'est pas obsolète. Pour certains utilisateurs, le texte est la seule partie de leur document accessible. Nous recommandons que, dans la plupart des cas, le document soit accessible à tout le monde, y compris ceux qui ne peuvent pas visualiser les images ou ceux qui désactivent la fonction de téléchargement automatique des images du navigateur pour améliorer les performances de la connexion réseau. Bien que la nécessité d'inclure des images dans le document puisse être très forte, il y a des moments où un document texte pur peut être plus significatif.

Les documents convertis en pages Web à partir d'autres formats contiennent rarement des images intégrées, et les références et d'autres contenus sérieux sont généralement disponibles en texte pur.

Lorsque la vitesse d'accès est très importante, il est préférable de créer un document texte pur. Si vous savez que les utilisateurs pourraient se précipiter pour obtenir votre document, évitez d'utiliser des images dans le document pour répondre aux besoins de ces utilisateurs. Dans certains cas extrêmes, vous pourriez fournir une page d'accueil (page de lancement) qui permet aux utilisateurs de choisir entre deux versions de votre œuvre : une qui contient des images et une autre qui n'en contient pas (les navigateurs populaires ont des icônes spéciales pour les images à télécharger, qui peuvent gâcher la mise en page du document, et même le rendre illisible).

Si vous souhaitez que votre document soit facilement searchable par de nombreux services d'indexation sur le Web, le texte est la forme la plus appropriée - il ne prend pas en charge que les images, mais aussi les graphiques décoratifs et inutiles. Cependant, ces moteurs de recherche ignorent souvent l'existence des images. Si le contenu principal de la page est fourni par des images, les informations sur votre document dans le répertoire en ligne Web seront rares.

Accélérer la vitesse de téléchargement des images

En plus de choisir soigneusement le contenu à inclure dans le document, de nombreuses méthodes peuvent améliorer les problèmes de charge et de délai apportés par les images :

Gardez la simplicité

Un graphique couleur 24 bits en pleine page, même après une réduction de taille par compression numérique standard (par exemple GIF ou JPEG), occupera toujours une grande partie de la bande passante du réseau. Par conséquent, il est préférable d'utiliser divers outils de gestion d'images pour optimiser la taille des images et de réduire le nombre de couleurs au minimum. Simplifiez votre dessin, évitez les photos de paysage, et évitez les grandes zones de fond vide, les bordures inutiles et d'autres éléments qui prennent de la place. Évitez également les effets de tremblement (qui consistent à mélanger deux couleurs proches pour obtenir une troisième couleur), cette technique réduirait considérablement la compressibilité de l'image. Au lieu de cela, utilisez plutôt des couleurs uniformes sur de grandes surfaces, car elles peuvent être compressées facilement dans des formats GIF ou JPEG.

Réutiliser les images

Cela est particulièrement applicable aux icônes et aux animations GIF. La plupart des navigateurs stockent localement les composants du document introduits pour une plus grande rapidité lors de l'obtention des données et pour utiliser moins de connexions réseau. Pour les fichiers animés GIF plus petits, il faut essayer de préparer chaque image de manière à ne mettre à jour que les parties qui ont changé dans l'animation, plutôt que de rafraîchir l'image entière (ce qui peut également accélérer l'affichage de l'animation elle-même).

Diviser les grands documents

C'est un principe général pour inclure des images. De nombreux petits fragments de documents sont organisés ensemble par des hyperliens (bien sûr, en utilisant cela !) et des table des matières efficaces, ce qui rend le document plus facile à accepter pour l'utilisateur par rapport à un grand bloc de document. En règle générale, les utilisateurs préfèrent naviguer entre plusieurs pages plutôt que de gaspiller leur temps en attendant le téléchargement d'un grand document (ce qui est similaire à la maladie de surf des chaînes de télévision). Une bonne règle est de garder chaque document d'environ 50 Ko, de sorte que même si le lecteur utilise la connexion la plus lente, il ne se sentira pas ennuyé.

Isoler les grandes images lorsque nécessaire

Offrir un lien spécifique pour des images très grandes, qui pourrait être une miniature d'image, laissant ainsi le lecteur décider s'il souhaite télécharger l'image entière et quand le faire. De plus, comme ces images ne sont pas mélangées avec d'autres éléments du document comme les images en ligne, elles sont faciles à identifier et à stocker localement pour une utilisation future.

Spécifier la taille de l'image

Enfin, une autre méthode pour améliorer les performances consiste à inclure la hauteur et la largeur de la boîte rectangulaire de l'image dans son étiquette. En spécifiant ces dimensions, d'autres étapes supplémentaires peuvent être omises, et les navigateurs avec des fonctionnalités étendues n'ont plus besoin de télécharger, de vérifier et de calculer les dimensions de l'image dans le document. Cependant, cette méthode a un inconvénient. Si l'utilisateur désactive la fonction de téléchargement automatique des images, le navigateur continuera à afficher l'espace réservé pour l'image avec les dimensions spécifiées. Cela laisse généralement un cadre vide au lecteur, bien que pour ce problème il n'y ait pas encore de solution, nous vous encourageons tout de même à utiliser ces propriétés de dimensions, car nous encourageons tout comportement qui peut améliorer les performances du réseau.

JPEG ou GIF ?

Si l'origine de l'image ou votre logiciel d'outil préfère un format, vous ne pouvez utiliser qu'un des formats JPEG ou GIF. Actuellement, ces deux formats sont largement pris en charge par les navigateurs, donc il n'y a pas de problème pour les utilisateurs de les visualiser.

Cependant, nous vous recommandons toujours d'utiliser des outils pour créer ou convertir ces deux formats, afin de tirer le meilleur parti de leurs fonctions respectives. Par exemple, vous pouvez appliquer les propriétés transparentes des GIF aux icônes et aux petits symboles décoratifs. Utilisez JPEG pour compresser les images de grande taille et riche en couleurs pour accélérer le téléchargement.

Balise <img>

La balise <img> permet de mentionner ou d'insérer des images graphiques dans le flux actuel du document. Pour en savoir plus sur les détails de cette balise, veuillez consulter :