Un site libre pour de l'art libre : Un Renard en Corée

a marqué ce sujet comme résolu.

Salut les agrumes,

Un besoin

En revenant de voyage cet automne, je me suis demandé : comment vais-je diffuser mes photos de voyage ?

Il y a la solution classique qui consiste à passer par des galeries tierces, mais cette solution ne me satisfaisait pas. D’une part à cause des CGU à rallonge, d’autre part parce que j’ai déjà un serveur en capacité d’héberger tout ça. Quand ça n’est pas les galeries de résaux sociaux qui fusillent les images en les compressant à mort et en s’attribuant trop de droits sur les images. Le classique « je met tout dans un ZIP et les gens se débrouillent » n’est vraiment pas pratique.

Alors, pourquoi pas me faire un site ? D’autant plus que ça pourrait très bien être un site statique, il n’y a pas besoin de quoi que ce soit de dynamique pour ce genre d’utilisation, et si je peux m’éviter de gérer et maintenir un serveur applicatif, ça m’arrange…

Sauf que… j’ai quand même un joli paquet de photos, et j’aimerais bien que mon site affiche des métadonnées liées à ces photos, alors comment faire ?

Dans les entrailles du site

Comment rendre un site dynamique, mais pas trop ?

En fait j’ai besoin d’extraire les informations pour générer le site, et pas après – une fois le site généré, plus besoin de dynamisme.

J’ai donc créé un script Kotlin pour aller lire toutes les métadonnées utiles de mes photos et les ranger dans un joli CSV.

J’ai enrichit le CSV à la main avec des tags, titres, descriptions, etc.

Et j’ai fait un deuxième script Kotlin pour gérer les templates de pages à partir du CSV. Et c’est parti !

Du coup, y’a quoi dans ce site ?

J’ai pris Hugo, un moteur de site statique que j’avais déjà utilisé un peu avant. Les fichiers correspondant aux images étaient générés via du code Kotlin (merci aux gens qui écrivent des libs de lecture de données EXIF). Il ne restait plus qu’à faire un design pour présenter ça, et là j’ai aucune honte à dire que j’ai massivement utilisé Bootstrap parce que bon, je ne suis clairement pas webdesigner, et le CSS me donne des boutons. L’outil d’audit de Chromium m’a aidé à corriger pas mal de coquilles, aussi. Selon lui, le site est plutôt accessible et analysable par les moteurs.

Ah, et qui dit voyage, dit destinations, donc j’ai utilisé OpenStreetMap pour afficher diverses cartes.

Tout ça donne un paquet de code sous licence MIT et disponible sur Github. N’hésitez pas à vous en servir et/ou à me créer des tickets voire des MR !

Je me permet de pinger @nohar qui disait être intéressé par Hugo : le voilà, l’exemple dont je te parlais.

Quant à l’hébergement… c’est facile, c’est un site statique. Donc, un serveur web (nginx), un coup de certbot pour gérer le HTTPS, et ça fonctionne :)

Tu as parlé d’art libre, non ?

Oui, parce que toutes les photos et textes du site sont sous licence CC BY 4.0, parce que… pourquoi pas ?

Tout ça est à voir ici :

J’avais même pour projet de diffuser les fichiers RAW, mais ça implique que je trouve moyen d’uploader et d’héberger plus de 20 Go de données, sachant que je n’ai pas la fibre à domicile… (l’upload des 6 Go du site, avec toutes les photos en haute qualité, m’a déjà pris plus de 12 heures).

Et maintenant ?

Pour commencer, il y a sans doute du paufinage à faire (dont le texte sur les images de la page d’accueil, qui est assez peu lisible), et si je trouve une solution, diffuser les RAW. PS : et ajouter les métadonnées pour que lors du partage sur les réseaux sociaux, il y ait les miniatures qui s’affichent.

Edit : l’accueil et les opengraph ont été faits :)

La seconde étape, c’est de réutiliser tout ça pour refaire le site de mon précédent voyage au Japon… peut-être même que j’y retravaillerai les photos.

Merci de partager tes photos, elles sont vraiment sympas !

En inspectant les requêtes sur ton site, il m’a semblé que tu n’utilises pas de CDN. Me trouvant à l’autre bout du monde par rapport à ton serveur (non loin de ta dernière destination), je suis quand même surpris de voir à quelle point les galleries s’affichent vite, malgré la bonne qualité des images. C’est dû à la puissance du WebP, ou tu as une petite technique serète pour bien optimiser les images ? :p

Vraiment sympa ! Je vais voir en profondeur comment adapter ça (et regarder tes photos et me donner envie de partir, mais c’est une autre histoire), mais en tout cas j’aime beaucoup !

+0 -0

En inspectant les requêtes sur ton site, il m’a semblé que tu n’utilises pas de CDN. Me trouvant à l’autre bout du monde par rapport à ton serveur (non loin de ta dernière destination), je suis quand même surpris de voir à quelle point les galleries s’affichent vite, malgré la bonne qualité des images. C’est dû à la puissance du WebP, ou tu as une petite technique serète pour bien optimiser les images ? :p

sgble

Je n’utilise pas de CDN, en effet. En ce qui concerne les JPG :

  1. Je choisis un niveau de qualité pas trop haut mais qui reste propre,
  2. Je les optimise à coup de jpgoptim (et mine de rien, ça peut faire gagner pas mal sans perte de qualité.

De mémoire les miniatures et les grandes images des galeries sont en qualité 90 sans exif, et les grandes versions à télécharger sont en qualité 95 avec exif.

Sur une suggestion de l’outil d’audit de Chrome, j’ai ajouté du webp pour les miniatures et les images de la galerie – mais pas pour les images à télécharger. Ce qui apporte deux inconvénients :

  1. On doit garder une double gestion parce que Safari ne gère toujours pas le webp…
  2. La qualité par défaut (75) est franchement limite pour les miniature, et massacre les grandes versions dès qu’il y a des dégradés (typiquement cette photo est une horreur à compresser, jpeg comme webp).

J’ai dû monter les qualités, à 85 pour les miniatures (ce qui fait gagner quand même pas mal) et à 95 pour les grandes images (ce qui fait gagner 20 % environ). J’ai l’impression que les images standard, sans dégradé ni détails trop précis, passent plutôt bien, mais dès qu’il y a des à-plats, des dégradés ou des détails fins, le format perds de son intérêt.

et regarder tes photos et me donner envie de partir, mais c’est une autre histoire

qwerty

Héhé, c’est le but :)

Hello. Merci de partager toutes les libs !

C’est tellement sympa comme projet qu’on aurait presque envie de tout recoder soi-même cela dit :P (note : c’est un chouette sujet si vous voulez explorer un langage)

L’outil d’audit de Chromium m’a aidé à corriger pas mal de coquilles

Si t’as envie d’essayer le même outil chez Firefox à l’occaz il est absolument génial, notamment dans le cas de CSS un peu tarabiscotées, il va te dire POURQUOI il a choisi telle propriété et pas telle autre, etc. etc. Super taff de la part de l’équipe Firefox Dev Tools :)

En tout le rendu est simple, propre chouette, et les photos aussi. Bravo.

+0 -0

@Javier tu le trouves où l’outil de Firefox ? Dans les navigateurs basés sur Chrome, dans les outils de dev j’ai directement un outil Audit, mais pas d’équivalent sur Firefox (qui par contre a un outil de vérification d’accessibilité qui me remonte des erreurs).

Je les optimise à coup de jpgoptim (et mine de rien, ça peut faire gagner pas mal sans perte de qualité.

C’est possible d’avoir + de précision à ce sujet ?

+0 -0

@qwerty cf ces explications par exemple.

Sur un fichier JPEG tu as 3 axes d’amélioration :

  1. Augmenter le niveau de compression (destructif, mais parfois nécessaire si l’image d’origine est en haute qualité,
  2. Supprimer tous les commentaires et métadonnées (sur les miniatures c’est une part non négligeable du poids de l’images),
  3. Optimiser je ne sais pas trop quoi dans les paramètres d’enregistrement de JPEG pour gagner en taille sans changer la qualité.

jpegoptim fait par défaut le 3 et peut faire le 1 et le 2 à la demande. Il y a un équivalent pour les PNG (optipng).

On ne devrait pas mettre d’image (hors ressources à télécharger) sur un site internet ou dans une application mobile qui ne soit pas passée par l’un de ces outils.

Exemple réel de sortie d'optipng sur un fichier. Pourtant j’avais décoché toutes les options dans Gimp…

$ optipng SpaceFoxKR.png 
** Processing: SpaceFoxKR.png
900x700 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 3x8 bits/pixel, RGB
Input IDAT size = 28153 bytes
Input file size = 28246 bytes

Trying:
  zc = 9  zm = 8  zs = 0  f = 0     IDAT size = 17573
                               
Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 0     IDAT size = 17573

Output IDAT size = 17573 bytes (10580 bytes decrease)
Output file size = 17630 bytes (10616 bytes = 37.58% decrease)

Hop, j’ai mis à jour l’accueil et divers détails que vous ne voyez pas (comme les métadonnées opengraph pour les réseaux sociaux, et un robots.txt).

L’accueil devrait être plus lisible, j’espère que l’effet au survol n’est pas trop gênant.

ctrl-f5 si vous voyez encore l’ancienne version.


@qwerty j’ai pas compris ta question ?

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte