Conseils pour faire des pages HTML rapides et qui s'affichent bien.

Pourquoi suivre mes conseils ?

D'après vous, qu'est-ce qui se passe quand un Internaute vient se connecter à votre page et qu'il faut 3 minutes pour qu'elle s'affiche, hum ? Eh bien il zap.

Et même une fois que c'est chargé, à quoi ça sert de faire une page super-chiadée si de toute façon elle ne s'affiche pas correctement d'un navigateur à l'autre ?

Voici quelques conseils qui vous permettront d'avoir des pages qui se chargent VITE et s'affichent correctement.

Sachez qu'on estime qu'une page d'accueil doit s'afficher en 15 ou 20 secondes pour que l'Internaute moyen ne zappe pas. Evitez de dépasser 30 ko quand c'est possible.

Quand vous faites vos pages, gardez l'esprit KISS (Keep It Simple Stupid) (rester simple).


Un navigateur averti en vaut deux

Dans toutes les images que vous mettez (<IMG SRC...> ), utilisez les tags ALT, WIDTH et HEIGHT.
Explication:

Donc, ne faites pas

<IMG SRC=poisson.gif LOWSRC=petitpoisson.gif>

mais faites

<IMG SRC=poisson.gif WIDTH=100 HEIGHT=80 ALT="Mon poisson">


Pas encadrer un site

Les frames permettent par exemple d'avoir des menus qui restent à l'écran, mais utilisez-les avec parcimonie.

Il y a d'autres moyens de faire des menus, par exemple Javascript ou les CSS.


En avant les œillères !...

N'utilisez que les formats GIF, JPEG et PNG.
OUI, il existe des formats graphiques plus performants et compacts (FIF, Wavelet...). Mais tout le monde ne peut pas les lire. En plus, la plupart nécessitent des plug-ins qui ont une fâcheuse tendance à n'exister que pour les processeurs Intel sous Windows. Et puis ce vivier de plug-ins, ça finit par mettre un sacré bordel dans votre nagivateur, sans compter qu'ils sont lents à charger.
A quoi bon faire de super images si une partie de la communauté Internet ne peut pas les lire ?

N'utilisez jamais le format BMP, TIFF ou PCX: les images dans ces formats sont très lourdes.


Laurel et Hardy : GIF et JPEG

Si votre image est de petite taille et/ou comporte de nombreux aplats de couleurs (des zones de couleur unie, sans le moindre dégradé), ou bien des images en noir & blanc (j'ai dit en NOIR ET BLANC, PAS EN NIVEAUX DE GRIS) alors les formats GIF et PNG sont intéressants.

Etoile et coeur en GIF
2 692 octets
  Etoile et coeur en JPEG
2 743 octets
Un bon candidat pour le GIF ou le PNG...   ...mais pas pour le JPEG !


Le format JPEG est intéressant pour le reste (principalement les photos). Evitez de compresser les dessins au trait en JPEG.

Chat en GIF
36 348 octets
  Chat en JPEG
5 788 octets
Un mauvais candidat pour le GIF...   ...mais un bon pour le JPEG !

Small is beautiful (1)

Optimisez vos fichiers GIF et PNG !

Règle 1 : quand vous convertissez une image de plus de 256 vers 256 couleurs ou moins, utilisez le moins de couleurs possibles. Typiquement, essayez en 8 couleurs. Si ce n'est pas suffisant (que ça dégrade trop la qualité d'image), essayez en 16, 32, 64, 128 et enfin 256 couleurs. Moins il y a de couleurs utilisées, plus l'image se compressera facilement.

Règle 2 : Lors de la conversion en x couleurs, n'utilisez aucun tramage (par de floyd ou ordered dithering, pas de tramage). Si un tramage semble nécessaire, alors vous feriez sans doute mieux d'utiliser le format JPEG. L'absence de tramage va permettre de mieux compresser l'image.

Enfin, vous pouvez utiliser des utilitaires qui sont capable de gagner de la place sur les fichiers GIF. GIFLITE permet de gagner en moyenne 30% sur la taille d'un fichier GIF avec une très légère dégradation d'image. Le fichier GIF ainsi compressé reste un simple fichier GIF lisible par n'importe quel logiciel.

Vous pouvez librement utiliser le GIF entrelacé ou non. Cela n'a pratiquement pas d'impact sur la taille du fichier. Le GIF entrelacé est surtout utile pour les images dont la hauteur dépasse 100 pixels : ça permet d'avoir une vue rapide de l'image avant qu'elle soit totalement chargée.

Le format PNG est généralement plus compact que le format GIF, sauf pour les très petites images.

Avec un programme comme PNGCrush, vous pouvez également optimiser la compression des fichiers PNG.


Small is beautiful (2)

Le format JPEG utilise une compression dite destructive : on perd donc un peu en qualité d'image.
Contrairement à ce que font certains, il est parfaitement inutile de compresser une image en JPEG avec une qualité de 100%.
Avec un taux de 40%, la qualité d'image est souvent largement suffisante.

Chat en JPEG, qualité 30%
5 788 octets
  Chat en JPEG qualité 100%
59 782 octets
JPEG en qualité 30% c'est suffisant,   pas la peine de faire du 100% !

En fait, il est bien souvent possible de descendre encore plus bas, mais cela dépend de l'image.
Dites-vous bien que vous publiez un site Web qui sera affiché sur un écran, pas un livre d'art imprimé sur papier glacé.
Avec le JPEG, un site peut être rapide et beau.

Il existe des programmes qui permettent d'optimiser la qualité des images JPEG: un curseur gradué de 0 à 100% permet de tester pratiquement en temps réel la qualité de l'image avec un taux de compression donné. The Gimp est capable de faire de genre de chose, et il est gratuit (Fichier > Enregistrer sous... > entrer le nom du fichier en .jpg > cliquer le bouton Enregistrer > cocher la case "Afficher l'aperçu dans la fenêtre d'image" et déplacez le curseur de 0 à 100 pour voir le résultat. La taille du fichier final est également indiquée.)

Cela permet de trouver le bon compromis entre qualité d'image et taille du fichier.

Vous pouvez également utiliser des programmes comme PureJPEG pour retirer toutes les informations inutiles d'un JPEG (par exemple les miniatures, les informations EXIF, etc., informations qui ne sont généralement pas utiles pour le web.)

 


Passe-moi la clé à molette

Le meilleur code HTML est celui fait à la main. Mais il faut être honnête, on ne peut pas aller bien loin et dès que le site devient un peu complexe, c'est impossible à tenir à jour. Il faut un éditeur HTML. Choisissez-en un qui génère du code HTML propre.

Voici une petite revue d'éditeurs HTML:

Cette liste est très loin d'être complète : il existe des tas d'autres utilitaires commerciaux ou freewares (comme 1st Page 2000 ou HTML-Kit). Faites un tour sur les sites de sharewares/freewares (jetez un coup d'œil sur cette liste).

Tant que c'est possible, passez votre code HTML à la moulinette de Tidy: Ce programme rectifiera votre code HTML pour qu'il soit plus correct, et vous signalera les erreurs qu'il n'a pas pu corriger lui-même.

Et surtout : testez votre site avec des navigateurs différents.

Pour terminer, par pitité, pas de site 'optimisés pour Internet Explorer'. C'est marquer un mépris total pour les internautes.


Et les shadocks pompaient, pompaient...

Si vous avez un tant soit peu d'amour propre, ne passez pas votre temps à repomper les pages et les images des autres. Si vous n'avez rien à présenter de nouveau sur le net, N'Y SOYEZ PAS !

Petite note à ceux qui volent des images pour leur site : méfiez-vous, certains sites (dont celui-ci), utilisent des systèmes de marquage éléctronique des images. Ces images sont traquées automatiquement sur le réseau Internet entier. Une image même recoupée, redimensionnée, modifiée ou torturée reste identifiable.

Il existe des lois qui garantissent, protègent et défendent la propriété intellectuelle, même si ces œuvres ne sont pas déposées auprès d'organismes spécialisés. Les récents procès en matière de propriété intellectuelle ont fait jurisprudence et les contrevenant sont désormais sévèrement punis.

Quand vous reprenez une image, une animation, une vidéo, une musique ou un texte, assurez-vous que son auteur est d'accord. Vous trouverez de nombreux sites qui donnent gratuitement des tas d'images.


Les cafouillazibules qui font whizzzz

Non, ça ne sert à rien de mettre une applet Java pour faire clignoter le fond ou faire des zigouigoui sur votre logo en taille 48. C'est chiant, désagréable, lent à charger et ça sert à rien. En plus, Java met un temps pas possible à démarrer sur certains navigateurs (quand ça ne les plante pas...).

Et puis pensez aux navigateurs qui n'ont pas Java ou ceux qui ont désactivé Java. Oui il y en a. Il n'y a aucune raison de les mépriser.

Quant à javascript, ça marche pas pareil d'un navigateur à l'autre, quand ça ne provoque pas des javascript error sur chaque page. C'est vraiment gonflant.

Si vous faites un site, essayez de vous arranger pour qu'il ne dépende pas du navigateur de l'internaute, tout simplement parceque vous n'avez pas la moindre idée du navigateur qui va être utilisé.

Si vous avez vraiment besoin d'afficher des animations sur votre site, utilisez Flash (de chez Macromedia). Il permet de produire des animations vectorielles de très petite taille, d'excellente qualité et interactives. 92% des nagivateurs peuvent les lire. Pour les anciens navigateurs, les plugins Shockwave sont disponibles gratuitement chez Macromedia. Un exemple de site utilisant Flash est Eye4U (http://www.eye4u.com).


Les textes très longs

Si vous avez un long listing ou un texte très long à afficher à l'écran, ne le mettez pas dans un tableau : les navigateur ne les affichent que quand la totalité du tableau est reçue.
En dehors d'un tableau, les navigateurs affichent tout de suite le texte reçu, ce qui permet à l'Internaute de commencer à lire le texte même si la page n'est pas complètement chargée.

Exemple typique : un listing de répertoire (nom fichier, taille, date). Il vaut mieux les afficher sous forme de simple texte (pas dans un tableau). Pour les alignements, utilisez les tags <CODE> ou <PRE> : ils utilisent la typo Courier qui est à largeur fixe. Petit exemple:

En texte normal (Times):

ANYDAMN GIF 6 266 03/02/99 8:33 ANYDAMN.GIF
DRAP_FRA GIF 527 03/02/99 13:57 DRAP_FRA.GIF
DRAP_UK GIF 1 494 03/02/99 13:56 DRAP_UK.GIF
CONSTRUE GIF 2 831 03/02/99 14:06 CONSTRUE.GIF
CONSTRUF GIF 2 494 03/02/99 14:02 CONSTRUF.GIF
BTHTML GIF 337 03/02/99 14:50 bthtml.GIF

Avec <PRE> ou <CODE> (Courier):

ANYDAMN GIF       6 266 03/02/99  8:33 ANYDAMN.GIF
DRAP_FRA GIF        527 03/02/99 13:57 DRAP_FRA.GIF
DRAP_UK GIF       1 494 03/02/99 13:56 DRAP_UK.GIF
CONSTRUE GIF      2 831 03/02/99 14:06 CONSTRUE.GIF
CONSTRUF GIF      2 494 03/02/99 14:02 CONSTRUF.GIF
BTHTML GIF          337 03/02/99 14:50 bthtml.GIF

Centrage

Évitez de centrer tout le texte. C'est peu esthétique et très difficile à suivre.

Par contre,
évitez
de centrer
tout le texte.
C'est peu esthérique
et très difficile
à suivre.

Fonds d'écran

Vous pouvez mettre des fonds d'écran pour vos pages ( <BODY BACKGROUND="monpapier.gif"> ), mais assurez-vous que le texte reste bien lisible.

Il n'y a rien de plus pénible qu'un texte qu'il faut déchiffrer le nez collé à l'écran parce que le fond est tellement bariolé que le texte est à peine discernable.

Vous pouvez mettre des fonds d'écran pour vos pages (<BODY BACKGROUND="monpapier.gif">), mais assurez-vous que le texte reste bien lisible.

Il n'y a rien de plus pénible qu'un texte qu'il faut déchiffrer le nez collé à l'écran parce que le fond est tellement bariolé que le texte est à peine discernable.

De jolis fonds d'écran, ça peut apporter un plus esthétique, mais il ne faut pas en abuser.

Vous trouvez ça lisible ?

Vous pouvez mettre des fonds d'écran pour vos pages (<BODY BACKGROUND="monpapier.gif">), mais assurez-vous que le texte reste bien lisible.

Il n'y a rien de plus pénible qu'un texte qu'il faut déchiffrer le nez collé à l'écran parce que le fond est tellement bariolé que le texte est à peine discernable.

De jolis fonds d'écran, ça peut apporter un plus esthétique, mais il ne faut pas en abuser.

C'est déjà plus lisible, non ?

De jolis fonds d'écran, ça peut apporter un plus esthétique, mais il ne faut pas en abuser.

A propos des couleurs, évitez également certains mélanges. Par exemple, un texte rouge sur fond noir n'est pas très lisible. Quelles que soient les couleurs que vous utilisez, arrangez-vous pour que le contraste entre le texte et le fond soit suffisant.

A propos des couleurs, évitez également certains mélanges. Par exemple, un texte rouge sur fond noir n'est pas très lisible. Quelles que soient les couleurs que vous utilisez, arrangez-vous pour que le contraste entre le texte et le fond soit suffisant. A propos des couleurs, évitez également certains mélanges. Par exemple, un texte rouge sur fond noir n'est pas très lisible. Quelles que soient les couleurs que vous utilisez, arrangez-vous pour que le contraste entre le texte et le fond soit suffisant.

Typographie

Choisissez judicieusement vos typographiques (vos fontes).

Exemple de typographie illisible

Aération

Evitez les pages surchargées. Aérez vos pages. Trop d'information tue l'information.

HTML permet - grâce aux hyperliens - d'obtenir rapidement une information sur un point précis en cliquant dessus. Pas la peine de vouloir donner tout à l'internaute en une seule page.

Un écran trop chargé, c'est long à charger, illisible, pénible à regarder et surtout on ne sait plus quelle partie lire ni où cliquer.
Les pages d'accueil style "sapin de noël", c'est pénible.


Politesse

Soyez poli envers l'internaute : ne décidez pas pour lui.

Beaucoup d'internautes sont allergiques à ce genre de chose et n'iront pas plus loin que la page d'accueil.


Un site avec du style

HTML n'est pas tout ! Il y a aussi les CSS (Cascading Style Sheets). Qu'est-ce que c'est ?

HTML et CSS permettent de séparer la structure des documents de leur présentation:

Les CSS permettent de définir un style sur votre site entier.
Par exemple, vous définissez vos titres comme étant Arial taille 16 gras bleu sombre:

h1 { font-family: Arial; font-size: 16pt; font-weight: bold ; color: #000099 }

Puis utilisez simplement la balise h1:

<h1>Bienvenue !</h1>

Elle apparaîtra bien en bleu comme définie !
C'est plus court qu'utiliser <font face="Arial" color="#000099" size=...><b>...</b></font> partout !

Et cela a un autre avantage: si un jour vous voulez changer la couleur (ou la police), modifiez juste le style de h1 et cela se répercutera automatiquement sur tous les titres de votre site d'un coup !
C'est un gain de temps formidable.

Vous pouvez définir un style sur votre site entier, sur des groupes de pages ou même créer un style spécifique à une seule page.

Et les CSS ont d'autres avantages, par exemple ils offrent plus de possibilité de formattage (justification du texte, bordures, espacement des lignes...).

On peut aller très loin: Regardez par exemple le site CSS Zen Garden (http://www.csszengarden.com/tr/francais/). Cliquez sur un des styles proposés. La page HTML reste la même. Seule la feuille de style (CSS) change.

Cela vous donne une idée des possibilités.

En redéfinissant p, h1, h2, li... et les autres balises HTML, vous pouvez mettre en forme votre site (et le modifier facilement) tout en le laissant lisible et clair pour les navigateur ne supportant pas les CSS.


Respecter les règles

Un organisme est chargé de la normalisation du HTML et des CSS: W3C.

Pourquoi respecter ces règles ? Pour permettre à tout le monde de mieux communiquer. Pour ne pas rendre internet élitiste.

Par exemple, certains sites comme Hotmail fonctionnent mal, ou même pas du tout, avec des navigateurs autres que Internet Explorer. Ne faites pas la même chose.

Le site du W3C se trouve là: http://www.w3c.org

Et voici 2 excellents sites, en français, qui pourront vous donner des conseils sur le respect des normes et vous aider à mieux utiliser HTML, XHTML et CSS: http://www.openweb.eu.org et http://www.aful.org/gdt/interop/.

Cela vous facilitera également la vie pour la création de votre site web, sans compter que cela rendra votre site plus accessible à tous les navigateurs et aux non-voyants.


Liens complémentaires

En complément des liens déjà cités dans cette page, je vous propose:



Des idées ? des suggestions ? des critiques ? Ecrivez au Webmaster: [L'adresse email est une image]

Toutes ces pages et leur contenu (textes, images, sons, animations et toute autre forme de média) sont de par les lois françaises et internationales sur le droit d'auteur et la propriété intellectuelle protégées jusqu'à 70 ans après le décès de leur auteur, Sébastien SAUVAGE (alias MWPC2). Toute reproduction est interdite sans le visa de l'auteur. Toute personne morale ou physique portant atteinte à ces droits s'expose à des poursuites. Les images utilisées dans ces pages sont marquées électroniquement.
Merci de prévenir le Webmaster ([L'adresse email est une image]) de tout lien effectué vers ces pages.
h t t p : / / s e b s a u v a g e . n e t