Superbibi publie un article fort intéressant: « Comment apparaître dans Google definition ». Une manière de se hisser dans le haut du tableau pour une modeste page de définitions. Tapez define:tartampion dans le moteur.

Capture Google.be (22/06/10)

On remarque l'omniprésence de Wikipédia dans les premiers résultats. Rien de nouveau sous le soleil. Autre point, Google fait un choix dans la sélection et au diable les autres définitions. Ici pas de place pour l'exhaustivité. Ensuite, la définition tient sur deux lignes. C'est propre, concis, bref... Cela suppose que si vous écrivez des définitions courtes (comme le propose Superbibi), il ne s'agit plus d'une citation mais de toute la définition. Autrement dit, l'internaute n'a même plus besoin de venir visiter votre site. Dans ce cas, on ne parle même plus de taux de rebond ! Google devient donc un outil de contenu, tout comme il le fait avec les actualités. On sait par ailleurs qu'une grosse majorité ne lisent que les titres. À décharge de la multinationale, la page est exempte de toute publicité. Le public visé est sans doute trop maigre. Qui utilise couramment ce critère de recherche, à l'exception des technophiles ?

Sur la forme, les référenceurs se grattent la tête pour optimiser leur page. Ils chipotent sur des détails dont le seul but est un maximum de visibilité sur les moteurs. Ils oublient un peu vite l'aspect sémantique du code. Il existe à cet effet une balise adéquate <dl> conçue pour les listes de définitions. Fort est de constater dans la pratique que les sites choisis par Google sont loin d'avoir recours à cette balise mais font plutôt appel à des <p> ou des <table>.

Tous les navigateurs ne gèrent pas le frameset de la même façon. Il en découle des variations d'affichage plus ou moins importantes en fonction du browser et des versions.

Autre inconvénient, ce système vieillot pose problème en terme de référencement. Les moteurs de recherche indexent des pages de manière individuelle. La reprise d'une page interne dans les résultats d'un moteur, la rend orpheline de son cadre parent et donc du système de navigation.

L'usage des cadres condamne la référence aux liens profonds. Dans l'exemple de maitre.gege.free.fr, impossible de créer un lien interne en référence à une recette par exemple. Cela ne pose pas trop de problème pour un site vitrine de quelques pages, mais impensable pour un site conséquent. Un lien doit pouvoir pointer directement vers une ressource pour épargner un travail inutile de recherche au lecteur.

Dernier inconvénient, l'impression peut poser problème en fonction de la position du curseur dans le jeu de frames. L'idéal est de prévisualiser le rendu final dans le menu Fichier mais c'est loin d'être un réflexe.

Lire ailleurs: « Pour en finir avec les cadres »

Fonctionnement de base

Pour faire rapide, le serveur - sur lequel est hébergé votre site - enregistre toutes les allées et venues. Il conserve ces évènements dans un fichier historique appelé « fichier de log ». Chaque ligne de ce fichier correspond à un élément reçu ou transféré depuis le serveur. Ce document comporte des informations extrêmement précises: pages vues, date de visite, temps de visite, origine, fiche détaillée du profil utilisateur, erreurs 404, redirections, etc.

Ce fichier, originellement en mode texte, comporte de très nombreuses lignes, comportant une codification particulière qu'il est impossible d'exploiter aisément sous sa forme native. Des logiciels spécialisés permettent de traiter automatiquement ce fichier et d'en extraire des informations directement exploitables par les webmasters. Ces résultats sont généralement présentés sous forme graphique pour en faciliter la lecture.

À quoi sert l'analyse des visites ?

Contrairement aux autres médias, le web a la faculté de suivre toute l'activité des visiteurs à la trace. Pour les responsables marketing, ils peuvent juger quantitativement le trafic, la fidélité des visiteurs, le taux de rebond, la popularité de chaque page, les liens cliqués, les fichiers téléchargés... Une analyse régulière des statistiques permet de mettre en évidence les points forts et les faiblesses du site. Naturellement, il ne s'agit que d'un outil informatique qui ne propose aucune solution intelligente.

Comment avoir accès aux statistiques ?

Il existe de nombreuses solutions, chacune présente des avantages et des inconvénients. À chacun de tester et de choisir en fonction de ses besoins. J'ai repris ici les solutions les plus courantes.

1. Statistiques de l'hébergeur

Généralement, tout hébergeur fournit des statistiques en ligne présentées sous formes de tableaux et de diagrammes. Cette présentation peut être sommaire pour la version gratuite ou détaillée pour la version payante. Renseignez-vous auprès de votre hébergeur pour savoir si vous avez accès aux statistiques. Les informations le plus souvent reprises sont...

• nombre de visites, pages vues
• volume d'information chargé (pages, images, son)
• équipement software des utilisateurs (navigateur, système d'exploitation)
• expressions reprises dans les moteurs de recherche
• source du trafic (referer)

Capture des statistiques avec AWStats

2. Service distant

Des sites spécialisés proposent des analyses de statistiques. Pour permettre l'analyse du trafic, il faut alors éditer ses pages et ajouter un morceau de code. En échange de leur gratuité, certains imposent l'affichage du logo de la société sur vos pages. D'autres, comme Google Webmaster Tools n'exigent rien en échange si ce n'est un compte de messagerie auprès du fournisseur. L'accès se fait en ligne via votre navigateur. Les données se présentes sous formes de tableaux et graphismes.

Capture des statistiques avec Google Webmaster Tools

3. Plug-in pour son blog

Allez voir du côté des extensions que proposent la plate-forme de votre blog. Il est fort à parier que vous y trouverez des ressources intéressantes. Sur WordPress, il en existe de différentes sortes. Une fois choisi et installé, les données sont accessibles directement dans l'interface administrateur. C'est pratique et efficace mais il n'existe pas - à ma connaissance - de greffon aussi complet et détaillé que les deux solutions précédentes. Il faudra sans doute, installer plusieurs plug-in.

Capture des statistiques sous WordPress

4. Fichier log

Le fichier log est un fichier texte à la racine de votre site et qui enregistre toutes les entrées et les sorties des visiteurs et des robots. Il est accessible par simple téléchargement via FTP. Certains hébergeurs restreignent l'accès pour des raisons économiques: ils proposent l'exploitation des données dans une formule payante.

Une fois récupéré en local, rien ne vous empêche de lire ce fichier texte mais c'est assez indigeste puisque les informations sont amassées les unes à la suite des autres. Utilisez un logiciel approprié comme WebTrends ou le freeware The Webalizer. C'est la solution la plus complète pour une analyse pointue.

Les abréviations dans le code source

Il est important d'apporter un soin particulier à ses abréviations surtout si votre public est étranger à votre culture ou au sujet traité. Il faut pour cela passer dans le code pour personnaliser les abréviations et les acronymes. L'attribut title accueille la signification du sigle. Elle s'affichera au survol de la souris. L'attribut lang est intéressant que si l'abréviation est dans une autre langue que celle du doctype. Par exemple, une page en français a intérêt à préciser la langue pour les abréviations en anglais. Ces informations sont importantes pour les humains, les moteurs de recherche mais aussi les lecteurs d'écran qui adaptent le ton de la voix et la prononciation.

<p>
<abbr title="Cascading Style Sheet" lang="en">CSS</abbr>
</p>

Cette tâche rébarbative - réservée au webmaster - est limitée dans la pratique et les nouveaux outils. Généralement, on indique la description d'un sigle uniquement dans sa première occurrence. Cela évite de se coltiner un travail répétitif. Aussi, il existe certains outils pour vous faciliter la vie et éviter de retaper 50 fois la même chose. Pour les blogs, des plug-in sont performants mais limités [¹]. Pour les concepteurs web, chaque outil d'édition web fournit certainement ce genre de service. Dreamweaver par exemple permet l'enregistrement de fragment de code (snappet) accessible en un clic.

Abréviation et accessibilité

Les personnes mal ou non voyantes utilisent des synthétiseurs vocaux pour naviguer sur les pages web. Actuellement, tous ne gèrent pas correctement les abréviations. Certains permettent de le faire mais faut-il encore les configurer correctement ou enrichir personnellement le dictionnaire interne.

Il en va de même si l'abréviation se trouve entre la balise abbr . Je rappelle d'ailleurs qu'Internet Explorer, navigateur lié à la plupart de ces lecteurs, ignore tout simplement cette balise. Pour éviter tout soucis de compréhension, mieux vaut écrire les abréviations en toutes lettres.

Si votre soucis typographique est plus fort que tout, la solution des feuilles de style est une solution uniquement pour les abréviations. Inutile de le faire pour les formules arithmétiques ou chimiques étant donné que les balises sup et sub jouent un rôle sémantique.

.abr-exposant {
vertical-align: super;
}

[¹] Lire à ce sujet: « Ajouter des abréviations facilement ».

Copiez cette partie du code pour la mettre dans votre page web. Dans mon cas, le lecteur (dewplayer.swf) se trouve à la racine ainsi que la musique Âme sœur tirée du site www.musique-libre.org.

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=ame-soeur.mp3" width="200" height="20">
<param name="movie" value="dewplayer.swf?son=ame-soeur.mp3" />
</object>

WordPress dispose déjà d'une extension « Related Entries » bien connue et largement utilisée. Pour avoir essayé le plug-in, je le trouve formidable et pénible. Autant il arrive à faire des liens pertinents, autant il relie des billets qui n'ont aucun sens sur le fond. Il faut avoir un blog ultra-spécialisé pour espérer de bons résultats.

Une autre technique est de générer automatiquement des liens internes sur certains mots. Sur des plateformes importantes comme les portails, ce travail pénible et laborieux est assuré par une application. Le problème c'est qu'on se trouve souvent face à des résultats absurdes.

Hier, je cherchais un dessert sympa et rapide. Je tombe sur le gâteau de riz. Le premier lien vers la vanille, renvoie vers un article détaillé sur l'ingrédient. Le lien du moule à charlotte me propose un article sur le mollusque ! Enfin, le lien vers le fond du récipient me donne la définition d'un bouillon.

Capture d'écran linternaute.com

En tant qu'utilisateur, l'expérience est tout à fait décevante et décrédibilise la valeur ajoutée des liens. On comprend très vite que la liaison est artificielle et n'est pas l'œuvre de l'auteur comme cela aurait dû être le cas. Résultat: on gagne en visibilité mais on perd en pertinence de contenu.

Capture Monweekendalyon.com

Ça donne par exemple: www.monweekendalyon.com. Avant de cliquer sur ce lien, j'ai tenté de lire l'adresse. En un coup d'œil, dalyon s'est détaché et j'ai essayé de raccrocher le reste pour en faire quelque chose de compréhensible. Vous savez sans doute que la lecture ne s'effectue pas lettre par lettre mais l'œil analyse et repère des groupes de lettres, des mots dont il connaît la signification. C'est bien simple, lorsqu'un mot inconnu vous est présenté, vous devez vous forcer à lire lettre par lettre pour vous l'approprier. Dans l'exemple, j'ai dû faire apparaître les espaces invisibles pour saisir le sens de l'adresse. Cet exercice de déchiffrement est sans doute très amusant, mais l'ajout de traits d'union aurait donné un décryptage plus rapide et plus percutant.

Dans ma pratique, j'ai pris l'habitude de réduire au maximum les adresses composées. Si cela est impossible, j'achète les noms de domaine avec et sans trait d'union pour les extensions les plus utiles. Je décide ensuite de cibler la communication sur une seule pièce maîtresse pour garder une cohérence. Les noms de domaines secondaires portent une redirection vers l'URL centrale. Ça permet aux gens, qui ont retenu l'adresse mais pas la forme, d'arriver à bon port.

Petite anecdote, les responsables web de Coca-Cola ont pris la peine de réserver www.coca-cola-zero.fr, www.coca-colazero.fr, mais pas www.cocacolazero.fr alors que www.cocacola.fr est une redirection vers www.coca-cola.fr. Pas facile quand le trait d'union fait partie intégrante de la marque.

Trait d'union ou underscore ? Il fut un temps où les webmasters avaient pris l'habitude de séparer les noms de fichiers par un underscore (trait bas) à cause de la mauvaise gestion de l'espace par les serveurs. Les noms de dossier mais aussi les URL contenaient ce caractère réservé dans une autre vie au soulignement. Pendant tout un temps, Google ignorait les underscore dans les URL et considérait qu'il s'agissait d'un seul mot. Aujourd'hui, le moteur considère ce signe comme séparateur au même titre que le tiret. Malgré tout, les responsables nous conseillent de privilégier le tiret.

Quid du référencement ? Je ne suis pas spécialiste de la question mais des mots séparés ont plus de pertinence qu'un seul mot. Les moteurs de recherche prennent en compte les mots individuellement et non pas comme une entité unique.

Blog Cooperation publie certaines notes en néerlandais, d'autres en français. À travers l'interface, on sent bien toute la difficulté de réunir deux langues différentes sous le même toit. Dommage pour un blog sur la coopération au développement censé s'adresser au plus grand nombre.

Emmanuelle Richard est sans doute une blogueuse exceptionnelle dans le sens où elle traduit l'intégralité de ses articles dans l'autre langue. Elle commence à écrire en français puis traduit en anglais après un ou plusieurs paragraphes. Je suis persuadé que le travail de traduction est fait en fin de production puis intégré au fur et à mesure dans le texte.

Capture Emmanuelle.net

Depuis quelques années, je lis la Tartine gourmande écrit par une Française expatriée à Boston. Pour ceux qui se passionnent pour la gastronomie et la photographie, c'est LE blog de tout les délices. Les photos sont magnifiques, les mises en scène sont créatives et les plats ont l'air alléchants. Pendant longtemps, elle traduisait en français la plupart de ses billets.

Je viens de découvrir Immaginary moment [¹] dont le contenu textuel est agencé sur deux colonnes: en français à gauche et à droite en anglais. Pour quelqu'un qui, comme moi, a un anglais élémentaire, c'est un très bon exercice de compréhension.

Capture Imoments.org

D'un point de vue accessibilité, il est important de bien préciser le changement de langue. C'est l'horreur pour une synthèse vocale de lire dans une langue étrangère sans être configurée correctement afin d'ajuster la prononciation à la langue.

[¹] Mis à jour (28/12/09): lien brisé retiré.

Dessiner son icône

Commencez par dessiner l'image qui correspond le mieux à votre site: logo, mascotte, initiales du nom... Ensuite, il faut réduire la taille à 16 pixels de côté. Le résultat est souvent décevant. Pour cette raison, il vaut mieux travailler pixel par pixel en taille réelle. Icon Workshop est spécialisé dans ce genre de manipulations. Il existe aussi des applications en ligne comme Favicon Generator.

Tout le monde n'est pas graphiste dans l'âme. De nombreux designers mettent leurs créations à disposition du public moyennant quelques euros ou gratuitement. Icon Finder est un moteur spécialisé dans la recherche d'icônes. Et pour ceux qui ne trouvent vraiment pas, j'ai regroupé une petite collection (zip, 16,3 Mo).

Quelques règles à respecter

La taille de l'image doit être de 16x16 pixels ou 32x32 pixels. Dans ce dernier cas, la taille sera réduite de moitié automatiquement par le navigateur. Le nombre de couleurs ne doit pas dépasser 16 couleurs.

Pour ce qui concerne le format du fichier, le gif et le png sont acceptés par les navigateurs respectueux des standards du web. Comme Internet Explorer a toujours voulu se distinguer, il n'autorise que le format .ico Ce format n'est autre qu'une image bitmap (.bmp) générée par Windows. Il suffit alors de renommer l'extension (favicon.bmp par favicon.ico) pour être reconnu. Cette manipulation ne fonctionne pas pour les autres extensions.

Petit conseil en passant, prudence avec les icônes animées. Certaines sont discrètes et ne posent pas de problème, d'autres sont franchement désagréables, comme sur le site de Keyline. N'essayez pas de vous faire remarquer à tout prix.

Créer la liaison

Vous avez maintenant votre icône de 16 pixels. Il va falloir faire la liaison entre la page HTML et le fichier image. Deux possibilités: soit vous ne jurez que par Internet Explorer, soit vous préférez une méthode plus propre et universelle.

Internet Explorer — La méthode la plus simple c'est d'ajouter l'image dans le dossier racine du serveur. L'image doit impérativement porter le nom de favicon.ico sinon ça ne marche pas. L'autre méthode consiste à insérer une ligne de code dans balise <head>. Dans ce cas, il faudra le faire pour toutes les pages.

<head>
<title>Titre</title>
<link rel="shortcut icon" href="http://www.site.com/favicon.ico">
</head>

Mozilla et consort — Le code à insérer est pratiquement identique mais à l'avantage d'être conforme aux normes. Malheureusement, Internet Explorer ne comprend que ce qu'il veut bien et n'en tiendra pas compte. Remarquez le type informe le navigateur du type de document (une image) et son format (pgn). Une icône au format gif porte l'indication type="image/gif" et type="image/x-icon" pour un fichier .ico. N'oubliez pas d'envoyer votre image sur le serveur et au bon endroit.

<head>
<title>Titre</title>
<link rel="icon" type="image/png" href="http://www.site.com/image.png">
</head>

Capture InfoGSM.be

Selon www.infogsm.be, le site se visite dans une résolution de 1024 x 768, en 24 bits couleurs et muni du flash player. Il est peu probable que le quidam sache réellement de quoi il retourne. Que doivent faire toutes les autres personnes en-dehors de ce créneau ? Le web doit pouvoir offrir un accès à toutes personnes indépendamment de leur configuration matérielle et logicielle. Même si l'intention de bien faire est louable, ces indications n'ont pas leur place sur la page d'accueil et le site devrait fonctionner en tous temps.

Quiconque appose sur une page du web un logo du type: « Cette page est optimisée pour le navigateur X » est quelqu'un qui semble souhaiter revenir à l'époque préhistorique d'avant le web, lorsque l'on avait très peu de chances de pouvoir lire un document écrit sur un autre ordinateur, un autre traitement de texte, ou un autre réseau.

Tim Berners-Lee

Il n'est pas rare que je tombe sur des sites dont l'accès est exclusivement réservé aux seuls Français. Cette discrimination m'est désagréable en tant qu'internaute. Surtout dans un espace comme le web dont l'idée initiale est de permettre à chacun d'accéder au contenu. Même si je comprends les raisons souvent liées à la gestion des droits d'auteur, je trouve très regrettable de laisser sur le carreau un large public francophone. Pourquoi cela est-il une particularité française ? Comment libeller correctement ces liens discriminatoires ?

Capture m6video.fr

Capture m6replay.fr

Capture bonappetitbiensur.france3.fr/videos/

Capture kilowatch.be

Capture Hulu.com

[ Edit: mis à jour le 1er janvier 2009 ] Depuis quelques mois, Youtube a mis en place un filtre géographique basé sur l'IP avec cet avertissement: « Cette vidéo n'est pas disponible dans votre pays ». Cela permet aux auteurs de définir le périmètre pour lequel la vidéo est accessible. Par exemple, la BBC limite la diffusion de certains contenus en justifiant que la chaîne est financée par les impôts. Autrement dit, seuls les autochtones y ont accès.

Capture Youtube.com - Filtre géographique

[ Edit: mis à jour le 27 septembre 2009 ] Lipton (groupe Unilever) lance un concours en ligne intitulé: Durabilit-thé. Les gagnants se verront offrir un séjour d'une semaine en Inde pour constater par eux-mêmes les conditions de travail et la culture durable du thé. Lipton invite les blogueurs à faire la promotion du jeu-concours. Seulement voilà, le jeu est réservé aux participants résidant en France métropolitaine ou Corse.

Capture Durabili-the.com

En décembre 2009, WorMee fait une grosse campagne publicitaire pour son site web. La pub titre fièrement « Rien que de la musique en libre accès ». Une fois sur le site, l'écoute des clips est limitée aux résidants français.

Capture Wormee.com

Il m'arrive de temps en temps de supprimer des pages, des billets désuets ou sans intérêt. J'estime que tout ce qui s'écrit n'est pas forcément destinés à perdurer. J'ai donc pris l'habitude de faire du rangement. Mais avant de détruire ce contenu du serveur, d'autres reprennent l'information et pointent vers la source. Au final, j'ai des erreurs 404 en pagaille.

Capture Dicodunet.com

Les liens sur vos pages

Avant de commencer à rechercher les erreurs, il faut différencier les liens que vous hébergez et les liens externes dirigés vers votre site. Dans le premier cas, les sources d'erreurs sont variées:

• fichier ou dossier déplacé, renommé ou supprimé
• changement de nom de domaine
• changement du rétrolien sur un blog
• vous faites une faute dans le lien hypertexte
• vous bloquez l'accès à une page (commentaire fermé)

Un gestionnaire de sites comme Dreamweaver est capable de vérifier tous ces liens. La correction est rapide et efficace pour les liens internes. Pour ce qui est des liens externes, il faudra repasser avec un logiciel plus performant.

Vérificateur de liens dans Dreamweaver MX

Il existe des logiciels adaptés à cet effet. Pendant longtemps, j'ai utilisé le freeware Xenu. Il génère parfois une myriade de liens erronés sans justification. Il semble également allergique aux liens vers Wikipedia et Dailymotion. Je préfère de loin Link Examiner. Il est plus propre dans ses résultats et le tableau est plus riche: code HTTP, nofollow, mots-clés, description, titre, temps d'accès, niveau de profondeur... Il lui manque un scan programmé de manière périodique. L'outil est efficace mais doit être géré avec délicatesse. Par exemple, une erreur 404 ne signifie pas que la page est définitivement supprimée.

Link Examiner marque les liens brisés en rouge

Les liens sur le web vers vos pages

À l'inverse, il existe une série d'erreurs dont vous avez une action fort limitée. Les liens défectueux ne se trouvent pas sur vos pages mais disséminées un peu partout sur le web.

• un webmaster fait une erreur dans votre lien
• un webmaster héberge un lien désuet (cf les raisons ci-dessus)
• un internaute fait une faute de frappe dans l'adresse du site
• un internaute teste la présence d'une page (ex pour une série d'images)
• un robot teste des pages pour tenter de pirater le site

Il est vain de partir à la conquête des liens brisés laissés sur d'autres sites. Ces liens orphelins sont éparpillés tout azimut et resteront sans vie jusqu'au bon vouloir de l'hébergeur. Par contre - pour les liens pointant vers un même nom de domaine - il serait dommage d'en rester là et de ne pas profiter du trafic généré [¹]. L'exemple le plus courant est le renommage des permaliens [²]. Utilisez les redirections permanentes (type 301) pour dévier les hypertextes. WordPress possède d'ailleurs un plug-in assez génial: Redirection. L'administration est simple comme bonjour et évite de passer par le fichier .htaccess. L'extension gère également les erreurs 404.

Conclusion

La gestion des hyperliens doit être un travail quotidien sous peine de se retrouver à gérer un volume d'erreurs énorme. Pensez à nommer correctement vos URL dès le départ, de manière concise et contenant les bons mots clés. En cas de renommage, utilisez un système de redirection automatique pour vous épargner cette tâche rébarbative. Enfin, faite de la veille sur tous vos liens, non seulement les liens morts mais également les redirections.

[¹] La redirection peut être indépendante de votre volonté. C'est le cas des services en ligne pour raccourcir les adresses (du genre TinyURL).
[²] À lire: « Personnaliser ses permaliens »

Dans la pratique, le responsable d'un site a plusieurs solutions. La première consiste à mettre un formulaire de contact. Pour la partie dynamique, des scripts tout faits existent sur le net. Si vous utilisez un blog WordPress, des formulaires personnalisables sont disponibles. L'intérêt de la méthode ? l'internaute reste sur votre site sans devoir faire appel à un logiciel externe et la procédure est rapide. Prévoir une copie du message est un plus.

La deuxième méthode c'est le fameux mailto bien connu des wembasters. Un lien mailto déclenche le lancement d'un logiciel de messagerie installé sur l'ordinateur. Le contact avec le site web est rompu. Faut-il encore avoir une messagerie interne et configurée correctement. Dans la plupart des cas, le quidam redoute les demandes farfelues du SMTP et autres POP. La montée en puissance des webmails gratuits n'a pas favorisé cet essor.

L'autre raison pour laquelle je m'oppose à utiliser le mailto est l'avidité des aspirateurs d'e-mail. Ces derniers sont capables de pomper sauvagement une masse impressionnante de courriels en quelques clics. Pour contrer le problème, il existe de nombreuses solutions (cryptage dans le code, image, écriture sans lien). Ces techniques fonctionnent relativement bien contre le spam mais génèrent des contraintes au visiteur. Il ne comprend pas pourquoi le lien n'est pas cliquable ou séparé d'espace. Pour ces raisons, le formulaire reste la meilleure solution pour garder le contact.

À lire également: « Ouvrir un mailto avec Gmail »

Premier affichage par le navigateur

Rendu définitif de l'image originale

Ce mode d’enregistrement était utilisé il y a bien longtemps (vers 1996). À l’époque, il causait quelques soucis à différents navigateurs. Aujourd’hui, tous sont capables d’afficher du Jpep progressif. Reste que certains logiciels de gestion d’images ou d’animation font grise mine. Il faut alors convertir ses images dans le format Jpg original.

L’attribut lowsrc de la balise img permet d’afficher une version allégée de l’image en attendant la version définitive. L’utilisation de cet attribut alourdit la quantité de données à transférer. De plus, cet attribut n'est pas du tout conforme et ne fonctionne que sur Netscape.

(*) Pour réaliser un Jpg progressif dans Photoshop: Enregistrer pour le web — cocher la case Progressif puis enregistrez l’image. Pour choisir le nombre d'images intermédiaires: Enregistrer sous et cocher « progressif optimisé ».

Le format Gif accepte la transparence sur une seule valeur. Autrement dit, sur les 256 couleurs une seule peut être transparente à 100 % d'opacité. Il n'existe pas de dégradé dans l'opacité de la teinte. Les contours risquent alors d'être disgracieux par manque de souplesse dans la transition des pixels. Petit exercice pratique.

L'image ci-dessous a un fond complètement transparent et une opacité de 50 %. Il y a donc deux contraintes: faire apparaître un contour harmonieux et laisser passer la couleur du fond à travers les formes. Dans l'enregistrement pour le web de Photoshop, l'option détourage permet d'indiquer une couleur de transition entre le contour et le fond. En Gif, sans détourage les contours sont crénelés. Le blanc en détourage donne un bon résultat mais crée un halo disgracieux dès que la couleur du fond change. Le PNG-8 correspond au Gif avec les mêmes problèmes. Par contre, le PNG-24 supporte correctement la transparence.

Malheureusement, Internet Explorer 6 et les versions précédentes supportent très mal les niveaux de transparence. Il faut alors bidouiller des solutions pour contourner le problème ou patienter qu'Internet Explorer 7 s'impose sur les postes de travail. Reste que le format sans destruction ne rivalise pas avec le taux de compression du Jpg. Le PNG est donc une alternative au Gif, format propriétaire faut-il le rappeler.

GIF - sans détourage	GIF - détourage blanc	GIF - détourage blanc
PNG-8 - sans détourage	PNG-24	PNG-24