Passer au contenu principal

Comment optimiser la qualité et le poids de vos visuels

Comprendre les formats d'images, la compression automatique et les bonnes pratiques pour un rendu optimal sur vos formulaires.

Cyril avatar
Écrit par Cyril
Mis à jour il y a plus d'un mois

❓Pourquoi mes images sont-elles compressées ?

Pour garantir un chargement ultra-rapide de vos pages de collecte (critère essentiel pour le SEO Google et la conversion sur mobile), la plateforme RGIVE optimise automatiquement vos visuels.

Vos images sont converties au format WebP. C’est un standard du web qui réduit le poids des fichiers sans sacrifier la qualité visible, assurant ainsi une expérience fluide pour vos donateurs.

💫 Les formats recommandés

Pour vos photos, celles utilisées en en-tête ou dans le corps de votre campagne, utilisez des fichiers JPG ou PNG, ou directement en WebP.

ℹ️ Il n'est pas obligatoire de convertir vous-même en WebP avant l'import, la plateforme s'en charge pour uniformiser le rendu.

N'utilisez jamais le SVG pour des photos complexes (bannières), car le poids du fichier serait trop important.

⚠️ Pour vos logos, et uniquement vos logos, privilégiez le format SVG, i.e. un format vectoriel.

Pourquoi ? Le SVG ne subit aucune compression. Votre logo restera parfaitement net, quel que soit l'écran ou le niveau de zoom.

🏋 Dimensions et poids idéaux

Pour obtenir le meilleur équilibre entre netteté et performance, voici nos recommandations pour vos images d'en-tête :

  • Largeur : Environ 2000 pixels. Cela couvre les écrans haute définition (Retina) sans surcharger inutilement le serveur.

  • Poids : Visez un fichier entre 1 Mo et 2 Mo maximum.

Pour information, la plateforme RGIVE permet d'aller à des dimensions plus importantes que celles précisées ci-dessus, à savoir 5M de pixels et 5Mo.
Cependant sachez que plus votre image est lourde plus le système devra appliquer une compression importante avec pour risque celui de dégrader le rendu visuel avec pixelisation ou flou.

🚀 Afin d'avoir la main sur votre compression, vous pouvez réduire le poids en amont via un outil comme Photoshop ou TinyPNG avant de l'importer.

🎨 Que faire si le rendu n'est pas optimal

Est-ce la bonne photo ?

La perception de la qualité d'une image est subjective et dépend de nombreux facteurs : réglages de l'écran, luminosité et contrastes de l'image, éléments présents sur la photo, etc.

Deux images soumises à la même compression peuvent paraître différentes.

L’œil humain ne perçoit pas les défauts de manière uniforme :

  • Il est beaucoup plus sensible aux artefacts de compression présents dans les zones claires et uniformes, où la moindre variation de luminosité devient visible.

  • À l'inverse, ces mêmes défauts passent presque inaperçus dans les zones sombres ou texturées (une forêt ou une foule par exemple). C'est ce qu'on appelle l'effet de masquage : la complexité visuelle de la texture "cache" naturellement les défauts de compression.

Ainsi, une image claire ou très lumineuse semblera parfois plus « pixellisée » qu’une image foncée, même si le traitement technique appliqué par la plateforme est strictement identique.

La méthode du Test & Learn

Si une image semble dégradée après import :

  1. Ne réimportez pas la même image en plus haute définition (cela ne changera pas le processus de compression).

  2. Testez une variante de l'image :

    • Choisissez une photo avec une luminosité légèrement plus basse ou plus de texture.

    • Évitez les images comportant de vastes zones unies très claires (ciel, mur blanc) si le rendu vous déplaît.

    • Vérifiez le rendu sur Mobile et sur Ordinateur pour valider votre choix.

⚠️ Certains éléments sont à éviter sur vos photos :

  • les grands aplats unis : si votre bannière comporte une vaste zone de ciel bleu ou de fond blanc par exemple, la compression sera très visible. Préférez des visuels avec de la texture ou du détail sur toute la surface.

  • les textes incrustés : évitez d'intégrer du texte directement dans vos images car le contraste fort autour des lettres crée du "bruit" visuel. Utilisez plutôt les titres et sous-titres RGIVE pour écrire du texte par-dessus l'image. C'est mieux pour la qualité visuelle, pour l'accessibilité et pour votre référencement Google.

Avez-vous trouvé la réponse à votre question ?