Vignettes
Les vignettes permettent de représenter une ressource de l’Anap. Elles sont visible dans les listes (Accueil, Recherche, Expertises…) et en premier plan dans la page de la ressource.
Il est important de garantir sa lisibilité et sa délivrabilité.
Marges de sécurité
Les pochettes ont un format unique carré (1:1) pour l’ensemble du site.
Veillez à respecter les marges de sécurité autour des bords du cadre pour le contenu important :
- Généralement, une marge régulière de 10 % de la taille suffit.
- Dans le cas des Évènements, une étiquette apparait en bas à gauche pour les évènements À venir et En replay. Ici une marge en bas de 18 % est préconisée.
Cards génériques
Cards avec étiquette jointe
Distribution
Afin de garantir des temps de chargement rapides, il est recommandé d’avoir des images respectant les critères techniques suivants :
Taille
Maximum : 1500 × 1500 px
Recommandé : 800 × 800 px
Minimum : 300 × 300 px
Poids
Recommandé : 100 Ko ↔ 400 Ko
Type de fichier
PNG, JPG, WEBP
Paramètres dans les url
L’ajout des paramètres w_500, q_auto et f_auto dans l’url des vignettes permet de sécuriser le fait qu’on ne dépasse pas une certaine taille, que Cloudinary proposera le meilleur ratio taille/poids/format à chaque navigateur.
Concrètement au lieu d’avoir : https://res.cloudinary.com/dzm8hefe2/image/upload/v1745952141/TVA2_ykv2nu.jpg
on a : https://res.cloudinary.com/dzm8hefe2/image/upload/w_500,q_auto,f_auto/TVA2_ykv2nu.jpg
Compression
Pour atteindre les objectifs de distribution énoncés ci-dessus, vous devriez compresser vos images pour les alléger au plus possible tout en veillant à ne pas dégrader visuellement la pochette.
Si vous n’avez pas de logiciel, vous pouvez utiliser des outils en ligne gratuits comme ImageResizer (compression, redimmensionnement, conversion) et Ezgif.
