Encore des agen­ce­ments de photos

Je cherche toujours la grille idéale pour présen­ter des photos avec des formats arbi­traires de façon à ce que ça passe bien et sur mobile et sur écran de bureau.

Il n’existe pas de solu­tion passe-partout. J’avais listé l’état de l’art il y a quelques temps. Il y a de rares acteurs qui font des petits plus pour rompre la mono­to­nie ou mettre en avant des images parti­cu­lières mais dans l’en­semble on se contente d’un agen­ce­ment par carré (Insta­gram), par lignes (Flickr) ou par colonnes (Tumblr) suivant ce qu’on vise comme type de photos et si elles sont prin­ci­pa­le­ment affi­chées sur des écrans de bureau ou des mobiles. C’est géné­ra­le­ment spécia­lisé et assez illi­sible dès qu’on y met une photo d’un format diffé­rent ou qu’on visua­lise sur un écran non adapté.

J’avais tenté quelque chose d’un peu diffé­rent en m’au­to­ri­sant des confi­gu­ra­tions un peu plus limi­tées mais qui conti­nuent à respec­ter le rapport largeur/hauteur de chaque image : Des séries d’agen­ce­ments de 1 à 4 photos, empi­lés les un au dessus des autres. Ça permet d’avoir un rendu plus divers, plus riche et adapté au format de chaque image (une image format portrait peut être mise en regard d’images format paysage).

Trois ans après, ça tient toujours et ça ne m’a jamais créé de résul­tat qui jure visuel­le­ment. Du coup j’ai ajouté quelques agen­ce­ments plus complexes à la liste, ainsi que les varia­tions pour savoir si tel grand bloc va en haut ou en bas, à gauche ou à droite, etc.

Ça donne des formules de 3 km pour trou­ver la taille de chaque image en fonc­tion de son ratio, de la taille hori­zon­tale dispo­nible et de la taille des espa­ce­ments, mais ça fonc­tionne.

J’ai aussi changé la formule de sélec­tion.

Aupa­ra­vant je parcou­rais pas à pas en choi­sis­sant le bloc le plus adéquat au fur et à mesure du parcours. Ça me lais­sait parfois peu de choix sur les dernières images, avec par exemple une dernière image au format portrait à affi­cher en pleine largeur parce qu’il ne reste plus qu’elle et que je ne peux donc pas la mettre en regard d’une autre. Désor­mais je calcule toutes les combi­nai­sons possibles sur l’en­semble des images et je garde la meilleure combi­nai­son de blocs de façon globale.

Le score d’une combi­nai­son c’est la somme des scores de chaque image. J’y compare la surface d’af­fi­chage à une surface cible « idéale » (aujourd’­hui c’est fixé à « ⅔ d’une photo au ratio 3:2 affi­chée en pleine largeur »).

Initia­le­ment je comp­tais le nombre de pixels de diffé­rence mais ça a tendance à encou­ra­ger des photos plus petites (on retire peu de pixels) par rapport aux photos plus grandes (on ajoute beau­coup de pixels). Depuis je calcule un facteur « photo la plus grande des deux / photo la plus petite des deux ». Comme je préfère une petite varia­tion sur toutes les photos à une énorme varia­tion sur une unique photo, j’élève cette diffé­rence au carré.

Le gros avan­tage de cette méthode c’est que je peux éven­tuel­le­ment faire varier la taille de réfé­rence. Une photo de moindre impor­tance sera compa­rée à une taille de réfé­rence plus petite. La photo prin­ci­pale sera compa­rée à une taille de réfé­rence plus grande. On arrive ainsi à mettre en valeur les bonnes images et mettre en retrait les autres.