Préparer du texte et des images pour le Web

Vous avez un site Internet ou êtes sur le point d'en avoir un. Il vous faut apprendre à préparer le texte et les images que vous ajouterez à votre site Web s'il existe déjà, ou que j'ajouterai pour vous si je suis en train de réaliser votre site.

Préparer le texte

Le travail de rédaction est à réaliser sur un traitement de texte : MS Word, OpenOffice… Les photographies devront être préparées à l'aide d'un logiciel de dessin (voir ci-dessous).

Créer un fichier par grande rubrique du site Internet. Dans chaque « fichier-rubrique », écrire les articles. Pour chaque article : écrire le titre, écrire le corps de l'article (un texte dépassant vingt lignes), et indiquer au sein de ce texte, entre crochets et en couleur, le nom des fichiers images (le plus souvent de une à trois images) qui illustreront l'article. Puis, tirer un trait (par exemple avec un suite de traits d'union) et passer à l'article suivant.

Certaines mises en forme sont à proscrire : ne pas utiliser d'effets spéciaux (surtout pas de WordArt svp), pas de changement de police, ni de taille de police, et laisser le texte comme il est sans forcer la justification ou l'alignement à gauche. Ne pas utiliser de multi-colonnes et le moins possible de tableaux. Pas non plus de schémas : les schémas sont à transformer en images et à traiter comme des photographies. Ne pas hésiter en revanche à utiliser la mise en italique, en gras, l'utilisation des listes à puces, le centrage.

Des images (photographies, schémas…) illustrent le texte. Mieux vaut éviter de les insérer dans le traitement de texte. Indiquer simplement dans le corps de l'article le nom du fichier image à insérer (faire ressortir ces indications, par exemple les mettre entre crochet et en rouge).

L'insertion des articles depuis le traitement de texte vers le site Web sera faite manuellement. Il est donc possible de m'indiquer des directives pour insérer telle ou telle photographie. Rendez visibles ces directives d'une manière ou d'une autre, par exemple avec de la couleur.

En résumé, il y a un fichier par rubrique à rédiger dans un traitement de texte et à m'envoyer. Et il faut aussi regrouper et trier en dehors du traitement de texte les photographies qui illustreront les textes.

Préparer les images et maîtriser le poids des fichiers

La lecture des explications qui suivent n'est pas nécessaire pour le client que je peux former. Dans ce cas, prendre la peine de trier les photos dans des dossiers par rubriques et articles sera suffisant. Un client distant en revanche doit apprendre seul à manipuler les photographies, sous peine de ne pas pouvoir me les faire parvenir et d'être ensuite incapable d'en ajouter sur son site Internet.

Dans un site Web, le poids des images (photographies) est nécessairement réduit. Le poids d'une image dépend de trois paramètres : les dimensions, le format d'encodage et la qualité d'encodage.

Les dimensions, c'est le nombre de pixels (points de l'écran) en largeur et celui en hauteur. Le format d'encodage doit être JPEG pour les photographies ou PNG pour les images contenant des couleurs unies (logos, schémas, diagrammes etc.). Ou bien éventuellement GIF qui est le prédécesseur de PNG. Les formats PNG et GIF compressent l'image sans perte, il n'y a donc pas de réglage de la qualité d'encodage avec eux. Le format JPEG dégrade en revanche les couleurs de l'image, plus ou moins, selon la qualité d'encodage que l'on choisit.

La modification de ces trois paramètres se fait depuis un logiciel de retouche photographique. Photoshop (logiciel vendu par Adobe, leader du domaine), Gimp (challenger, logiciel libre donc gratuit) ou PhotoFiltre (logiciel libre donc gratuit, plus modeste) par exemple. Je décris ci-après la procédure pour PhotoFiltre et Gimp.

Tout d'abord, si vous n'en avez pas déjà, il vous fautun logiciel de retouche photographique : télécharger PhotoFiltre ou Gimp. Puis, exécuter le fichier téléchargé et suivre le processus d'installation.

Ensuite, voici comment préparer une image pour le Web :

  1. Créer un dossier et y déposer des copies des images à préparer pour le Web. Il est important de travailler sur des copies et de conserver par ailleurs les fichiers originaux puisque l'opération de réduction modifie l'image.
  2. Ouvrir avec PhotoFiltre (ou Gimp) une image à traiter. Par exemple via un clic droit sur l'image → Ouvrir avec…
  3. Ouvrir le menu « Image → Taille de l'image » (PhotoFiltre) ou « Image → Échelle et taille de l'image » (Gimp). Dans le champ « Largeur », diminuer la taille en pixels (réduire à 1600 pixels pour les photos en format paysage, 1200 pixels pour le format portrait). La valeur du champ « Hauteur » se recalcule instantanément si la case à cocher « Conserver les proportions » est activée (PhotoFiltre) ou les deux maillons de chaine sont solidaires (Gimp). Puis, cliquer sur le bouton « OK » (PhotoFiltre) ou « Échelle » (Gimp).
  4. Cliquer sur le menu Fichier → « Enregistrer sous… ». Choisir le type de fichier JPEG (pour les photographies) ou PNG (logos, schémas, diagrammes etc.) et cliquer sur le bouton « Enregistrer ».
  5. Dans le cas d'un enregistrement au format JPEG, le logiciel demande encore la qualité d'encodage, en pourcentage. Si le but de l'opération est de me transmettre des images que je retravaillerai, alors choisir une très haute qualité d'encodage (entre 92% et 98%). S'il s'agit en revanche d'inclure l'image directement sur le site Web (une fois que le site Web est en fonctionnement), alors préférer une qualité moyenne (85%) qui enregistrera un fichier plus léger. Puis, cliquer sur le bouton « OK ».
  6. Fermer l'image et recommencer avec la suivante.

Une fois que les images ont toutes été réduites, vérifier leurs poids depuis le gestionnaire de fichiers. Elles devraient peser entre 50 Ko et 800 Ko.

Transformer des schémas (et des tableaux) en images

Les schémas doivent obligatoirement être convertis en images avant d'être insérés dans une page Web. Les tableaux aussi à part dans les cas les plus simples. Il faut au préalable avoir installé un logiciel de dessin. Si vous n'en avez pas, je vous suggère PhotoFiltre (pour Windows) qui est gratuit et léger. Ensuite, voici la procédure :

  1. Depuis le traitement de texte, afficher le tableau ou le schéma en Aperçu avant impression, et écarter la souris ;
  2. Appuyer sur la touche « Impression d'écran » du clavier ;
  3. Ouvrir le logiciel de dessin (PhotoFiltre, Gimp, Photoshop…) ;
  4. Menu Édition → « Coller en tant qu'image » (PhotoFiltre) ou « Coller comme → Nouvelle image » (Gimp) ;
  5. Utiliser l'outil de sélection (l'icône de flèche de souris sous PhotoFiltre, le rectangle pointillé sous Gimp) pour encadrer le tableau ou le schéma, jouer sur le zoom éventuellement pour être précis ;
  6. Menu Image → « Recadrer » (PhotoFiltre) ou « Découper la sélection » (Gimp) ;
  7. Enregistrer l'image au format PNG (ou à défaut au format GIF ou JPEG) ;
  8. Fermer l'image.

Vous avez parcouru cette notice et êtes prêt à produire le contenu de votre site Web ? Peut-être que des idées de sujets vous seraient utiles. Vous êtes déjà en train d'écrire ? Il est temps alors de trouver un bon webmestre ou encore me contacter afin de créer votre site Internet.