• 1 — Bien nommer ses fichiers pour le web

Ceci est un résumé des points auxquels il faut faire attention quand on prépare ses fichiers pour les utiliser sur un site web. Ça s’adresse plutôt aux débutants, mais ça ne me semble pas inutile, vu le nombre de fois où j’ai dû le répéter !

Un fichier pour internet, ça ne se nomme pas comme un fichier sur Windows. Ou alors Windows95.

Pour résumer, le nom idéal sera composé uniquement des 26 lettres de l’alphabet, sans accent et en minuscules, et/​ou de chiffres, et des deux caractères — et _​ . Les mots seront séparés par un — (dit tiret du 6). Le nom ne sera pas trop long (3−4 mots maximum, trentaine de caractères), et aura tendance à « vouloir dire quelque chose ». Et l’extension (.jpg, .pdf) sera aussi en minuscule.

Pourquoi ?

Les contraintes techniques

Selon la configuration du serveur (hébergeur) sur lequel vous chargez les fichiers, celui-​​ci peut ou pas faire la différence entre minuscules et majuscules. Vous pouvez être actuellement sur un serveur qui ne fait pas la différence, et passer sur un serveur « case sensitive », ou l’inverse, et avoir des problèmes de fichiers non trouvés, ou au contraire, de fichiers « multiples » (avec et sans majuscules).

Selon les serveurs, les outils utilisés, et les endroits où les urls seront postées (forums, mails, etc), les caractères « exotiques » (caractères accentués, espaces, %, ‘ et autres…) seront plus ou moins bien convertis, et il y a toujours un risque de voir une url tronquée, et un fichier impossible à afficher. (Et oui, un caractère accentué, c’est exotique, en tout cas pour les anglo saxons à l’origine des normes du web).

L’optimisation du référencement

Les urls les plus courtes sont les meilleures, et cela vaut pour les noms de fichiers aussi.

Le seul séparateur de mot reconnu par Google est le – (Matt Cutts ayant expliqué récemment pourquoi, et que ça n’allait pas changer de si tôt, donc fin d’une légende urbaine).

Le nom de votre fichier fait partie de la sémantique de votre page. Il participe à son référencement sur Google Images. Et pour vous aussi, marie-​​vacances-​​bretagne-​​01 c’est nettement plus facile que DCS990021789 (si le second nom vous parle plus que le premier, c’est que vous êtes déjà en état de geekitude avancée, et cet article n’est pas pour vous).

Les noms de fichier doivent donc être « significatifs », d’une longueur raisonnable, avec des mots séparés par des tirets.

L’utilisation dans un CMS (WordPress, Drupal, Prestashop)

Très souvent, ce type de système a une gestion des médias, et permet de créer d’un seul coup plusieurs tailles de fichiers par rapport à une image originale.

Dans ce cas, les différentes tailles vont être identifiées en ajoutant au nom de la première image un complément (le plus souvent la taille de l’image, sous la forme −150×100 pour une image de 150 pixels de large par 100 de haut.

Si c’est une très bonne chose pour l’affichage, cela rallonge d’autant le nom d’origine.

Prestashop donne un nom systématique à vos fichiers, basé uniquement sur l’id unique du produit, mais ce nom est ensuite « réécrit » avec le nom du produit (par exemple, le produit qui s’appelle ipod et dont l’id est 3 aura une image 3.jpg qui sera affichée avec le nom ipod.jpg, les différentes tailles étant 3-small.jpg, 3-thickbox.jpg. Cela permet d’avoir une image unique et de traduire le nom du fichier dans chaque langue de la boutique. Le module WPML Media (payant) permet d’arriver à un résultat similaire.

Optimiser la préparation des fichiers

Il est donc rare de pouvoir télécharger directement une image ou un document sur un site web. On va en profiter, en plus du nom, pour optimiser la taille, et dans les formats de fichier qui l’acceptent, les meta-​​données.

Limiter la taille des fichiers image

Même si vous avez une connexion de la mort qui tue à 56M il ne faut pas mettre sur votre site web de trop gros fichiers images, mais les préparer avant de les uploader.

Les raisons ?

  • Il y a encore des gens qui ont des connexions lentes
  • Il y a de plus en plus de gens qui surfent avec la 3G, donc une connexion lente
  • En uploadant une trop grosse image, c’est le CMS (WordPress, Drupal, Prestashop…) qui va la redimensionner à votre place. Cela prend beaucoup de mémoire php, et cela peut coincer sur des hébergements pas très performants (free par exemple, ou des entrées de gamme chez OVH ou 1&1). De plus, les logiciels « fait pour » sont plus efficaces et donneront à la fin une meilleure qualité d’image. Parmi les nombreux disponibles, il y a Paint.net, Irfan View (excellent pour traiter une série d’images d’un seul coup, les redimensionner, les renommer en même temps) et XnView, qui permet aussi de gérer les meta-​​données

Mettre des meta-​​données dans un fichier image

J’avoue qu’on s’éloigne un peu du sujet de base « bien nommer ses fichiers », mais les meta-​​données sont des informations utiles qu’on peut enregistrer dans une image. Elles peuvent être lues par la plupart des logiciels graphiques, par de nombreux sites web, dont Flickr, Facebook ou Picasa, et permettent notamment d’enregistrer un auteur, un titre, une description, des mots clés, l’url de votre site web. Il se pourrait qu’elles soient utilisées par Google Images pour le référencement.

Si vous chargez vos images sur plusieurs sites de partage, en stockant vos meta-​​données dans les fichiers, vous vous éviterez la peine d’indiquer le titre et la légende plusieurs fois… et vous aurez toujours les informations à disposition sur votre PC.

Limiter la taille d’un fichier PDF

Les fichiers PDF peuvent être très volumineux, selon les options de création et la qualité recherchée pour les images et les polices de caractère. Ce qui est nécessaire pour un imprimeur est totalement inutile pour le web. Si vous avez de gros fichiers PDF, une astuce pour en réduire la taille facilement : les réimprimer en PDF, une ou deux fois de suite. Toutes les informations « non nécessaires » pour la visualisation disparaîtront au premier ou au deuxième passage.

Pour cela, j’utilise PDF Creator.

Que pensez-vous de cet article ?
Super0
Bien0
Bof0
Nul0
Poster un commentaire