FFCT-Centre-Val de Loire
Le cyclotourisme dans la région Centre-Val de Loire
Les rubriques du site :
Photo gagnante du concours jeunes
2019
La citation du jour
Michel Audiard : On roule à bicyclette, on court à vélo.
Concours photo 2018 : toutes les photos participantes
Dernières brèves
21 janvier ANNULÉE > SF2020, une experience a vivre.

La Semaine Federale SF2020 se tiendra du 2 au 9 août à Valognes dans le Cotentin avec un programme route et VTT sur des tracés accessibles mais (...)

Concours photo 2018 : toutes les photos participantes
Catégories
- Documentation
- Commissions
- Organisations
- Dossiers
- espaces
- Qualifications
- Gestion du site
- Glossaire
2018 2017
FFCT-Centre-Val de Loire

Toute l’information régionale du tourisme à vélo et du cyclotourisme.

https://ffct-centre.org


Cours précédent :Positionner une illustration dans le texte d’un article. << Le programme >> Cours suivant :Positionner une image et sa légende


 Le cours

Quand on souhaite insérer une image pour illustrer un article, il faut d’abord s’assurer que l’image peut être ré-utilisée. Elle doit donc être libre de droit. C’est toujours le cas avec les images (ou photos) que l’on a soi-même créées. Quelquefois le droit de réutilisation est associé d’une licence particulière ou... n’est pas autorisé (Copyright). Mais le sujet de ce cours n’est pas celui-là. Si on dispose sur sa machine d’une illustration dont a le droit d’usage et de publication, il semble judicieux de pouvoir s’en servir pour illustrer un article ou même apporter des compléments d’information ("un dessin vaut mieux qu’un long discours" aurait dit Napoléon Bonaparte. Bon, il parlait de croquis... et pas de dessin !).

Mais les images et plus particulièrement les photos, sont des fichiers souvent d’une taille conséquente. Deux motifs vont à l’inverse de cette tendance :

  • A l’heure de la circulation rapide de l’information, si une page n’est pas chargée très rapidement, son lecteur a fortement tendance a... zappé ! Et sur un écran, une image n’a pas à être nécessairement d’une très grande qualité.
  • Ensuite l’affichage est restreint par la taille de l’écran non pas en centimètres (ou plutôt en pouces) mais en densité de points. Pourquoi alors afficher sur un écran une image de la taille d’un poster à la taille d’un timbre poste ?

Si une page comprend plusieurs images (quelquefois ce peut être un grand nombre), il est donc nécessaire de trouver des outils adaptés.

Spip   recalcule les images pour qu’elles s’affichent correctement et soient des fichiers de taille à peu près correctes mais cela demande un peu de temps [1]. Mais il est beaucoup plus judicieux de joindre les illustrations avec une taille tout de suite adéquate (le serveur aura moins de travail).

Pour un site web , il est donc recommandé d’utiliser des images adaptées à la largeur de l’écran (maximum deux mille pixels) et d’une densité de 72 DPI   en mode RVB  . mais aussi qui soient plutôt chargées rapidement sur la machine de l’utilisateur.

Voici ce qui est conseillé pour le site du coreg   Centre-Val de Loire :

  • largeur maximale : 600 pixels (plutôt 400 pixels pour une simple illustration) et ne jamais dépasser les 1000 pixels
  • densité maximale : 96 DPI   (et même, très souvent 72 DPI   suffisent largement.
  • Format des fichiers : jpg, png ou gif (attention, ce dernier format -gif- n’est pas libre de droits).

Comment adapter une image pour servir d’illustration ?

Ce paragraphe est un cours supplémentaire sur le travail nécessaire pour adapter une image à un écran. Ce n’est pas du tout spécifique à Spip  .

Il est indispensable d’utiliser des logiciels adaptés mais tous ne se valent pas (et ce n’est pas toujours le prix qui fait vraiment la différence). Logiciel recommandé : IrfanView. C’est un logiciel libre en Open Source (et gratuit), téléchargeable gratuitement (https://www.irfanview.com/) [2]. Voici la démarche à suivre :

  1. Ouvrir IrfanView
  2. Ouvrir le fichier de l’image
  3. Sélectionner avec la souris la zone a conserver
  4. Cliquer sur "Éditer" puis sur "Auto-rogner les cadres" dans le sous-menu qui s’affiche (touches : [Ctrl]+[Maj]+[Y])
  5. Cliquer sur "Éditer" (encore !) puis sur "Couper hors de la sélection" dans le sous-menu qui s’affiche (pas de combinaison de touches)
  6. Retailler
  7. Cliquer sur "Image" puis sur "Retailler/Echantillonner" (touches [Ctrl]+[R])
  8. Vérifier que l’unité "pixels" est bien cochée et définir le champ "largeur" dans "Nouvelle taille" à 400 (ou 600). Puis, vérifier que "Préserver les proportions" est bien coché. Enfin, dans le champ DPI  , saisir 72 (ou 96).
  9. Cliquer sur "OK"
  10. Enregistrer l’image sous un autre nom (conseil : ajouter "-r" ou "red" pour "réduit" en à la fin du nom de fichier et enregistrer au même endroit que le fichier original.
  11. Utiliser cette image.

D’autres logiciels sont utilisables et les instructions ci-dessus y sont probablement disponibles.

Comment utiliser l’image préparée (ou pas) ?

  • Ouvrir l’article dans l’espace privé et passer en mode édition.
  • Tout en haut de l’écran, un encadré propose "Ajouter une image ou un document" avec le dessin d’un trombone.
  • Cliquer sur le bouton "Parcourir" puis sélectionner le fichier image sur la machine
  • Cliquer sur téléverser (le nom du fichier est affiché, précédé d’une croix en forme de x pour annuler le choix s’il y a une erreur de choix).
  • Après téléchargement, copier le code sous l’image (c’est celui donné lors du cours précédent) et le coller à l’emplacement choisi. Spip   permet d’aller plus vite : si le curseur est positionné à l’emplacement choisi, un double clic sur le code réalisera instantanément le copier/coller.

Pour en savoir davantage...


 Exercices

  • Choisir un fichier-photo et en adapter la taille puis l’insérer dans un article dans le bac à sable. Répéter plusieurs fois l’opération dans le même article.

 Auto-évaluation

- Quelle est, en nombre de pixels, la largeur conseillée pour un fichier image destiné à illustrer un article sur le site du coreg Centre-Val de Loire, site qui est "propulsé" par Spip ?
- Quelle densité maximale est recommandée pour un fichier image sur le site sous Spip pour un affichage uniquement sur un écran (sans impression nécessaire) ?


Cours précédent :Positionner une illustration dans le texte d’un article. << Le programme >> Cours suivant :Positionner une image et sa légende



Pour contacter le formateur, cliquer sur le lien suivant : contact

vendredi 13 mars 2020 , par Roland Bouat (MDT)


[1Le temps des traitement de telles requêtes peut paraître dérisoire pour les êtres humains que nous sommes mais c’est peut-être ce qui coûte le plus cher dans un hébergement !

[2Si la langue française ne figure pas dans les options, la télécharger depuis https://www.irfanview.com/languages.htm puis cliquer sur "Installer" dans la ligne "French Installer ou ZIP".

Mots clés : doc. web, Formation, web

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document


Article précédent : Covid19 : message de la présidente de la FFCT (FFvélo)

Article suivant : SNEJ 2020 : le règlement