|
| 1 | +--- |
| 2 | +title: "Héberger des images" |
| 3 | +subtitle: Guide d'utilisation de notre service d'hébergement des images |
| 4 | +authors: |
| 5 | + - Julien MOURA |
| 6 | +categories: |
| 7 | + - article |
| 8 | + - meta |
| 9 | +date: 2022-11-22 10:20 |
| 10 | +description: "Sous le GéoCapot : gérer l'hétérogénéité des contributions et garantir une qualité minimale, des git hooks sont à l'oeuvre sur Geotribu. Explication de leur fonctionnement." |
| 11 | +icon: material/image-plus |
| 12 | +image: "https://cdn.geotribu.fr/img/internal/contribution/git_hooks/pre-commit_ci_result_master.png" |
| 13 | +robots: index, follow |
| 14 | +tags: |
| 15 | + - cdn |
| 16 | + - coulisses |
| 17 | + - images |
| 18 | +--- |
| 19 | + |
| 20 | +# Héberger des images sur Geotribu |
| 21 | + |
| 22 | +Le terme CDN est ici bien sûr abusif mais c'est ainsi que nous désignons notre hébergement et gestionnaire de fichiers medias statiques. |
| 23 | + |
| 24 | +Traditionnellement, nous hébergeons les images sur notre propre serveur pour plusieurs raisons : |
| 25 | + |
| 26 | +- ça évite de surcharger les serveurs des autres sites en pointant dessus |
| 27 | +- ça évite les restrictions liées au "partage de ressources entre origines multiples", enfin le [CORS](https://fr.wikipedia.org/wiki/Cross-origin_resource_sharing) quoi |
| 28 | +- ça permet de garantir de toujours disposer des images, même si elles n'existent plus à l'adresse originale (site supprimé, refonte du site, etc.) |
| 29 | + |
| 30 | +---- |
| 31 | + |
| 32 | +## Structure |
| 33 | + |
| 34 | +Globalement, voici comment les images sont organisées : |
| 35 | + |
| 36 | +- racine : :rotating_light: éviter d'ajouter de nouvelles images ici :rotating_light: |
| 37 | +- articles-blog-rdp : |
| 38 | + - captures d'écrans utilisées pour illustrer une revue de presse |
| 39 | +- external |
| 40 | +- internal : ressources propres au site. |
| 41 | + - charte graphique |
| 42 | + - photos des contributeurs : nommage avec initiale du prénom et 3 premières lettres du nom |
| 43 | + - images liées à la section contribution du site, de cet article entre autres (captures d'écran, exemples, etc.) |
| 44 | + - icônes créées par Geotribu pour symboliser le sujet d'une news d'une revue de presse |
| 45 | +- logos-icones : entreprises, associations, logiciels, librairies, technologies, etc. Idéales pour l'icône d'une news de revue de presse. |
| 46 | +- projets-geotribu |
| 47 | +- slideshow : images du diaporama sur l'ancien site de Geotribu. Elles étaient pour la plupart pré-découpées en rectangle mais ça peut toujours servir à des fins d'illustration. :rotating_light: éviter d'ajouter de nouvelles images ici :rotating_light:. |
| 48 | +- tuto : contenus liés aux tutoriels publiés. Un sous-dossier par tutoriel. |
| 49 | + |
| 50 | +---- |
| 51 | + |
| 52 | +## Bonnes pratiques |
| 53 | + |
| 54 | +Sur le site historique de Geotribu, la difficile gestion des images a laissé un héritage chaotique : doublons en pagaille (jusqu'à 10 exemplaires dans certains cas...), noms d'images abscons rendant impossible la recherche, caractères spéciaux, dimensions démesurées (qui avait même provoqué un crash du serveur à l'époque :boom: !), etc. |
| 55 | + |
| 56 | +Merci de suivre au mieux ces recommandations qui permettent de garantir une utilisation sereine des mêmes ressources par plusieurs personnes :pray: : |
| 57 | + |
| 58 | +- chercher d'abord si l'image n'existe pas déjà (voir structure du CDN) |
| 59 | +- redimensionner les images avant de les téléverser (= _uploader_) : 800px maximum en largeur ou en hauteur sont largement suffisants pour illustrer un article ou une news sur Geotribu. |
| 60 | +- utiliser des formats avec de bons niveaux de compression : |
| 61 | + - [SVG](https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics) |
| 62 | + - [WebP](https://fr.wikipedia.org/wiki/WebP) |
| 63 | + - [PNG](https://fr.wikipedia.org/wiki/Portable_Network_Graphics) |
| 64 | + - [JPEG](https://fr.wikipedia.org/wiki/JPEG) |
| 65 | + - :no_entry_sign: à éviter Bitmap, Tiff, etc. |
| 66 | +- nommer proprement les fichiers : |
| 67 | + - choisir un nom explicite qui permette la recherche par d'autres : `carte_densite_nyt.jpg` plutôt que `0f1f4706b8f1ea520747e3fd231a5bd0.jpg` (ce dernier exemple n'est pas une invention spontanée, il correspond réellement à une image stockée dans le CDN...) |
| 68 | + - pas de caractères spéciaux (espaces, accents, etc.) |
| 69 | + |
| 70 | +Ce n'est évidemment pas exhaustif et il n'y a pas de brigade des images dans l'équipe, on s'en remet donc au bon sens de chacun/e :slightly_smiling_face:. |
| 71 | + |
| 72 | +---- |
| 73 | + |
| 74 | +## Pas à pas |
| 75 | + |
| 76 | +1. Se connecter au gestionnaire de fichiers en ligne : <https://cdn.geotribu.fr/> |
| 77 | + |
| 78 | +  |
| 79 | + |
| 80 | + > l'identifiant et mot de passe sont transmis sur demande par mail, MP Mastodon/Twitter, etc. |
| 81 | +
|
| 82 | +2. Utiliser la recherche pour savoir si jamais une image correspond au besoin |
| 83 | +3. Se positionner dans le dossier souhaité |
| 84 | +4. Cliquer sur :cloud: `Envoyer` |
| 85 | +5. Glisser/déposer ou sélectionner l'image |
| 86 | + |
| 87 | +  |
| 88 | + |
| 89 | +6. Cliquer `Retour` et récupérer l'URL de l'image. Par exemple, avec un clic droit sur l'icône de lien ou en cliquant sur l'image puis sur `Ouvrir`` |
| 90 | + |
| 91 | +  |
| 92 | + |
| 93 | +---- |
| 94 | + |
| 95 | +## Ressources |
| 96 | + |
| 97 | +- [EzGIF](https://ezgif.com/resize/) pour manipuler, redimensionner et optimiser les GIF en ligne |
| 98 | +- [ImageOptim](https://imageoptim.com/), opimisation des JPEG et PNG |
| 99 | +- [Reshot](https://www.reshot.com/), icônes et images libres de droits |
| 100 | +- [TinyPNG](https://tinypng.com/), optimisation des images JPEG, PNG, WebP... |
0 commit comments