Bien nommer ses fichiers pour le web
- 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.
J’ai chargé récemment un MitchumLoveHate.jpg , puis ayant fait un copier-coller de l’adresse je n’ai pas eu de souci, mais si on tape mitchumlovehate.jpg mon serveur sensible à la casse ne le trouvera pas. Et si j’avais nommé le fichier mitchum-love-hate.jpg , un fan de Robert Mitchum aurait pu arriver sur mon blog… à condition d’aller dans les fins fonds du moteur de recherche, mon exemple est mal choisi. d:-)
Je fais pire dans mes adresses. Les titres de mes billets musicaux commencent par le caractère ♫, repris dans les adresses… Mais dans ce cas, être hors normes m’amuse, ça doit être mon côté rebelle.
Très bon rappel en effet !
P.S : pourquoi écrire aussi petit sur ton site. Je n’y vois rien… :(
@ Christophe, quand on a le luxe de pouvoir être hors normes, il faut en profiter :)
@ Aurélien, désolée, c’est vrai que la police des commentaires est un peu petite. Je vais regarder ça… en attendant crtl ++
En fait, tout le site est en 11 pixels chez moi…
La feuille de style est en em et pas en pixels.
Cela dit, ça donne effectivement du 11 pixels pour les textes. Une taille “raisonnable” non ? J’ai l’habitude de travailler en 9 ou 10 pixels dans mes docs, donc ça ne me choque pas.
C’est d’ailleurs une des raisons pour lesquelles j’avais pris ce thème :D
Je suis en train de bosser sur une nouvelle version, je ne vais pas changer ici, trop risqué ^^
A noter que pour la réduction des images, il y a le plugin WP Smush It sous wordpress qui utilise l’appli de Yahoo!
Le plugin Smush.it semble éprouver des difficultés dans le traitement par lots. Peut-être, justement, à cause de fichiers « mal » nommés. C’est du moins le cas sur nos blogs étrangers.
Il me semble que le nom du fichier a son importance pour la gestion de la « bibliothèque des médias ». Pas vérifié ça sur mon blog en français, car je n’utilise pas la fonction d’envoi automatique. Tout se fait à l’ancienne : mise à l’échelle et amaigrissement de la photo, puis upload par FTP. Cela m’évite d’avoir deux images sur trois qui ne servent à rien sur le serveur. :-P
Cela dit, la gestion des uploads d’image sur WordPress est catastrophique. Va donc demander à un néophyte d’insérer une image avec de bonnes dimensions, un poids optimisé, un affichage au bon endroit (par exemple à droite, ou à gauche, etc. mais pas n’importe où), une légende signifiante et un lien cliquable qui s’ouvrira dans une nouvelle fenêtre ! Ben le néophyte, même après avoir zyeuté le tutoriel d’Elephorm (celui de Gobet), il n’y parviendra probablement pas.
J’espère que WP 3.3 mettra bon ordre à son organisation foutraque et chronophage (parce que si l’on doit faire une chose plusieurs fois par semaines, autant que ça puisse aller vite).
Quant à la taille du texte, effectivement c’est pas top. Les PC affichent du 96 ppp et les Mac sont à 72 ppp, pour autant qu’il m’en souvienne. Le résultat, c’est qu’un écran PC a un effet loupe (nan, j’ai pas dit loupé;)) donc un effet grossissant ; ce qui paraît décemment gros sur PC se révèle souvent microscopique sur Mac. En l’occurrence, c’est nanométrique sur mon minuscule Powerbook.
Il y a toujours la solution d’augmenter manuellement la taille d’affichage. Ce que je fais systématiquement ici comme souvent ailleurs, mais c’est aussi pour cause de presbytie. ;-)
Le problème de ce blog, c’est que les colonnes de gauche (donc le pavé de texte) et de droite butent vite sur les bords sans guère soulager le calvaire des presbytes – en l’occurrence, du presbyte astigmate à myopie fortement asymétrique qui conclut ce post par son vrai prénom,
Philippe
(texte non corrigé, flemme du vendredi soir)
Effectivement, je comprends mieux le problème avec Mac. Mais dans ce cas je ne dois pas être le seul site, et il y a toujours l’excellente possibilité de paramétrer la taille par défaut de la police dans le browser.
Je promets, pour la prochaine version, de me pencher là dessus.
Ne serait ce que pas solidarité de presbyte astigmate hypermétrope et amblyope :D
Pour le nom de fichier, quand il est catastrophique, il peut parfois coincer au chargement, mais c’est surtout après qu”il va poser des problèmes.
Le problème d’upload est triple : il y a la fonctionnalité “bibliothèque des médias” avec ses imperfections. Je suis en train de chercher les hooks adéquats pour pouvoir en faire justement une version simplifiée, avec des valeurs remplies par défaut, et plus de choix.
Il y a ensuite le code généré dans l’éditeur de texte. Selon la version de WP et les options du thème (par exemple disable autotop), les choix pour l’insertion d’image, le contenu des champs titre, alt, etc… le code ne sera pas le même. Je hais positivement le shortcode caption
Il y a enfin le problème de tinymce. Pour les images comme pour le reste, y’a pas à tortiller, si on veut savoir EXACTEMENT où on insère quelque chose, il faut aller dans la version html.
Mais c’est pareil sur de très nombreux CMS.
La seule chose, c’est que le bouton natif d’insertion d’image de TinyMCE dispose de nettement plus d’options de formatage. Elles permettent effectivement de beaucoup mieux positionner l’image, mais avec du css embarqué dans le code du post, ce qui peut s’avérer catastrophique quand on change de thème.
Mais même ce bouton d’image ne résout pas le problème du point d’insertion. “Ailleurs” (prestashop) où je voulais insérer une image en float avant un h2, elle a été insérée dans le h2. Hérésie que WordPress ne commet pas.
Il existe un plugin pour TinyMCE qui permet de transformer la rédaction d’article en véritable wysiwig, en prenant les styles du thème. Je pense que cela aide beaucoup pour le positionnement.
J’arrive généralement à expliquer relativement facile à mes clients néophytes comment préparer leurs images. Et pour le placement, je leur explique que le web n’est pas un système de PAO ou un PDF, et que de toute façon, si ils veulent sortir un peu des options de base, il faut apprendre les bases de la mécanique. Et ça ne sert pas qu’aux images :)
Sinon je viens de regarder WPSmush it. Il supprime manifestement les meta datas, ce qui ne me convient pas du tout. Si je me suis donnée la peine de créer ces metas datas, c’est pour quelque chose :)
Mieux vaut attendre la 3.3 finale avant de trafiquer la gestion des bibliothèques et l’insertion des images, puisqu’il n’y aura plus qu’un seul bouton pour l’insertion des médias (pas vérifié plus en détail cette chose-là).
Ah oui, me suis toujours demandé pourquoi on avait une boîte de dialogue avec des éléments redondants, par exemple gauche flottante ou classe CSS. N’était pas technicien… je crois que je commets une hérésie : je sélectionne les deux à la fois (flottant et CSS), en me disant que le plus fort des deux l’emportera, j’ai des convictions darwiniennes. :-D
Pour ce qui est de la place des insertions et d’autres trucs, y compris pour les hyperliens, je vérifie généralement dans l’éditeur HTML quand je ne le fais pas directement.
Mais il faut se mettre à la place de gens dont ce n’est pas le métier ni la vocation. Sur trois blogueurs étrangers, on a un génie qui pige tout du premier coup (sauf les balises h2, h3, etc.), un anglophone qui s’y intéresse car il veut aussi ouvrir son blog perso, et un néophyte complet qui m’a pris des heures en Skype pour juste plus ou moins piger les rudiments des rudiments, c’est dire !
Il y en a d’autres, il ne faut même pas leur parler d’HTML sinon ils se barrent en courant (c’est presque vrai, notre blog brésilien a par deux fois eu jet d’éponge, une première fois à l’appel de la deuxième reprise et une seconde fois avant même le début du match).
Quant au gommage systématique de certains éléments dans l’éditeur HTML (genre espaces insécables, etc.), j’ignore si c’est dû à WordPress ou à TinyMCE, mais c’est extrêmement préjudiciable à la crédibilité du discours. (Je ne parle pas des remplacements d’attributs HTML par leurs équivalents XHTML, où cette fonction s’avère utile.)
Je déplore aussi l’absence de gestion typographique aussi élémentaire que la division des mots en fin de ligne. Il ne serait pas malséant non plus d’intégrer un réglage par défaut *facile à modifier* (sans modifier les fichiers de base) permettant de choisir soi-même le type de justification indépendamment des réglages par défaut du thème utilisé. C’est-à-dire un réglage indépendant des – et préexistant aux – réglages manuels.
Bref, les développeurs de WordPress feraient mieux de corriger leurs erreurs plutôt que de claironner des « changements » qui ne changent rien.
Et pendant que je suis dans mon mode « gueulante du soir », j’avais omis de signaler, dans mon précédent post, que les quelques éléments du DVD de formation « Elephorm by Gobet » que j’ai déjà visionnés me semblent particulièrement abscons. Ce type est sans doute un as de WordPress. Il ne lui reste plus qu’à apprendre la pédagogie… :-P
Je ne connais pas le DVD, j’irais voir :)
Pour la division des mots en fin de ligne, c’est tout simplement impossible. Ce n’est pas un formattage html. Donc pour pouvoir le faire, il faudrait modifier le texte à la base, mais cette césure serait dépendante du thème. De plus, si on accroit la taille des caractères, les mots ne seraient plus coupés de la même façon. On voit là les limites de la présentation sur le web, qui n’est pas un logiciel de PAO.
Pour la justification des mots, par exemple, c’est un des élements de base du CSS :)
En fait, personnellement, je pense que 99,99% de la mise en page doit être décidée par le thème. Le style “en ligne” est une horreur. En revanche, décider des classes css supplémentaires qu’on peut appliquer peut être une bonne chose, simplement il faut savoir ce qu’on fait :)
Le “problème” de WordPress est assez simple : c’est l’interface, donc il est a priori responsable de tout, ce qui est loin d’être le cas (TinyMce est un outil externe, comme FCKEditeur, qu’on peut utiliser à la place, via des plguins), et il y a des contraintes propres aux HTML, plus des insuffisances de WordPress
Pour les images, je les trouve plus dans la gestion de l’upload et de la bibliothèque que dans l’insertion dans les posts.
La seule solution possible pour que l’utilisateur soit entièrement guidé, c’est de créer des éléments additionnels pour les images (du type de l’image à la une), où l’utilisateur saisit à part l’image, le titre, le alt, etc… et ensuite le thème fait tout. C’est la solution choisie par Typo3 par exemple. C’est nettement moins perturbant pour l’utilisateur qui ne connait rien au HTML, mais en fait cela enlève beaucoup de liberté.
“Liberté ou simplicité, il faut choisir” :)
Alors là j’applaudis car il est rare de lire qu’il faut privilégier les urls courtes alors que c’est un vrai bon conseil !
Pour ma part je réecris les urls de mes posts en supprimant les stopwords et en utilisant des synonymes et avec maximum 4 tirets.
@ Marie, exactement pareil :) il y a deux trois plugins sympas d’ailleurs sur WordPress ^^
@Marie-Aude : j’ai vu que tu faisais comme moi en regardant le nommage des pages de ce blog :D
Par contre des fois j’oublie de renommer et j’envoie le post et quand je m’en aperçois, le lien a déjà été tweeté automatiquement et dans ce cas, j’hésite un peu à re-changer l’url…
Pareil… :)
Et puis de temps en temps, une petite url sous optimisée, c’est pas mauvais non plus.
Tu as Better SEO Slugs qui est pas mal
Merci pour le paragraphe “optimisation du référencement” : je mets (mettais) alternativement des “-” ou des “_” dans mes séparateurs sans savoir lequel choisir…
Merci pour l’information sur les PDF dont la taille est souvent 3 fois celle d’un fichier Word et qui atteint souvent les limites demandées en upload.
Et pour la taille des images, j’utilise FileMinimizer qui permet des traitements par lots par simple “glisser-déposer “pour diminuer celle des fichiers jpg.
Bon, j’ai bien tout lu et c’est en gros ce que je fais à chaque fois. Mais même dans Windows, j’évite les espaces pour mettre des tirets du 6 entre chaque mot, toujours en minuscule. Limite, je fais pareil quand je fais un chèque, parano moi ? nonnn ^^
Merci pour toutes ces précisions, je connaissais quelques trucs mais un cours plus complet ne fait jamais de mal.
Qu’est-ce qu’il advient si le nom que l’on donne à un fichier/photo contient trop de caractère?
Merci,
Patricia
Vu qu’on parlait de Smush.it ci-dessus et que ce plugin n’est plus disponible (du moins en version gratuite, si j’ai bien compris), j’ai testé avec succès un plugin qui fait à peu près la même chose : ShortPixel Image Optimizer (chercher ce nom dans le registre des plugins téléchargeables.
Pour répondre à la question la longueur d’un nom de fichier, le plus simple est de… tester la chose dans un brouillon d’article. ;)
Pas testé la chose. Mais à mon avis, le slug nominatif (en gros, l’URL) sera abrégé ou alors un message d’erreur apparaîtra.