L’image d’arrière-plan représente une image, un éclaboussure de couleurs ou un élément de conception qui remplit l’écran de votre site web. C’est également la première chose que voit un visiteur concernant votre site web, votre entreprise ou votre marque. La meilleure image d’arrière-plan transmettra l’histoire de votre marque, tandis qu’une mauvaise image déformera votre message. L’arrière-plan peut être considéré comme la tenue que vous portez pour passer un entretien d’embauche par exemple. Il est nécessaire de choisir entre un look décontracté et accessible ou formel et professionnel.
En réalité, il y a beaucoup à savoir dans cet aspect simpliste de la conception web que vous ne l'imaginez pas. Il ne suffit pas qu’un arrière-plan soit beau pour faire la différence. Comme avec un premier rendez-vous, vous devez vous assurer de raconter votre histoire. L’image d’arrière-plan doit fournir une expérience utilisateur agréable et être lisible pour le public.
Découvrez les Ficelles de l’Image d’Arrière-Plan !
Nous vous ferons découvrir dans cet article, tout ce qu’il y a à savoir sur l’image d’arrière-plan à travers les points suivants :
- Comment Choisir une Image d’Arrière-Plan ?
- Comment Ajouter une Image d’Arrière-Plan à Strikingly ?
Comment Choisir une Image d’Arrière-Plan ?
Il est souvent difficile de sélectionner une bonne image d’arrière-plan pour un site web. C’est un aspect essentiel de la conception web et il est difficile de faire correspondre votre image de marque à un design spécifique. Les directives ci-dessous, devraient vous aider à choisir une image d’arrière-plan appropriée :
- Une Haute Définition est Requise
- Une Complémentarité avec l’Image de Marque
- La Reconnaissance des Contrastes
- L’Accessibilité comme Priorité Absolue
- Des Textures Subtiles et Homogènes
- Une Variété d’Écrans et d’Appareils
- La Présentation de Vraies Personnes
- L’Optimisation des Images
- Le Choix d’un Bon Format
- L’Image Doit Parler d’Elle-Même
1. Une Haute Définition est Requise
La pire erreur à faire est d’utiliser une image d’arrière-plan avec une mauvaise qualité de définition. L’arrière-plan dans ce cas précis est soit granuleux avec une basse résolution, soit un style en mosaïque qui ressemble aux images de Windows 95. Les images en haute définition permettront d’avoir un site web plus attrayant et professionnel. Même s’il est intéressant d’engager un photographe pour un design personnalisé, de nombreuses photographies sont disponibles en ligne. Beaucoup sont gratuites, tandis que d’autres ne coûtent que quelques dollars.
Image Tirée de BISONS
2. Une Complémentarité avec l’Image de Marque
De nombreuses entreprises ont un problème avec l’image d’arrière-plan puisque les professionnels apprécient des choses qu’ils tentent d’imposer. Ce n’est pas la bonne manière de faire. Il n’est pas recommandé de choisir une image d’arrière-plan et de construire votre site autour d’elle. Vous pouvez sélectionner un arrière-plan qui répond à vos besoins en comprenant l’identité de votre marque.
3. La Reconnaissance des Contrastes
Une image d’arrière-plan n’est qu’une sorte de toile de fond. Cela ne doit pas prendre le contrôle de votre site web. Gardez à l’esprit le contraste visuel entre le premier plan et l’arrière-plan. Si vos en-têtes se confondent, alors quelque chose doit changer. C’est toujours une bonne idée de penser à la typographie et au schéma des couleurs pour votre arrière-plan. Si cela ne fonctionne pas, alors essayez une autre méthode.
Image Tirée de CD MENTIEL
4. L’Accessibilité comme Priorité Absolue
La première chose à considérer avant de choisir une image d’arrière-plan, est de savoir comment cela affectera la lecture des articles. Vérifiez que le texte est lisible et que le rapport de contraste est approprié. Si vous n’êtes pas sûr des problèmes d’accessibilité mentionnés ci-dessus, mais que vous souhaitez tout de même utiliser une image, alors vous pouvez procéder de plusieurs manières pour que cela fonctionne. Il est possible d’utiliser des outils d’édition d’images ou même CSS pour modifier des éléments comme l’opacité, les contrastes ou encore les masques de calque pour garantir la lisibilité. Il est également essentiel de choisir une police appropriée pour le matériel.
5. Des Textures Subtiles et Homogènes
Les textures peuvent ajouter une touche de classe à l’apparence générale de votre site web. Recherchez des textures homogènes puisqu’elles peuvent répéter un motif sur l’écran afin de donner l’impression d’une seule et grande image afin de s’en servir comme image d’arrière-plan ou comme visuel pour un contenu particulier. Une image texturée et pleine de grandeur peut être utilisée occasionnellement et ces images ne fonctionnent pas toujours correctement sur tous les écrans.
Les photos de grande taille peuvent ralentir le temps de chargement d’un site web. À moins que vous ne recherchiez un look plus brutal, la subtilité est une caractéristique importante pour la texture. L’objectif est d’empêcher les grands modèles de submerger les consommateurs. Recherchez des images avec des lignes plus douces et des couleurs vives pour apparaître sur le fond.
Image Tirée de Vivement la Pluie
6. Une Variété d’Écrans et d’Appareils
La zone d’arrière-plan peut varier considérablement en fonction de la taille de l’écran. Cela se voit clairement sur les photographies. Ce qui est beau sur un écran large peut être horrible sur un smartphone. Des parties importantes d’une image peuvent être supprimées ce qui entraîne une perte de contexte. La sélection de photos et le codage sont une partie du problème. Recherchez des photos avec le même aspect que le conteneur et elles seront plus adaptées aux écrans plus petits.
7. La Présentation de Vraies Personnes
Choisir une image d’arrière-plan avec de vraies personnes est un excellent moyen d’augmenter le taux de conversion de votre site web. Si possible, évitez d’utiliser des photos d’archives au profit de personnes réelles. Si vous utilisez une photo d’archive, vous risquez de retrouver cette image sur d’autres sites web. Le site web I2B Venture présente des personnes et montre aux clients à quoi ressemble les produits plutôt que d’afficher les articles seuls.
Image Tirée de I2B VENTURE
8. L’Optimisation des Images
Que vous soyez propriétaire d’un blog, d’une entreprise ou d’un site web personnel, vous devez améliorer la qualité de vos photographies en optimisant vos images. Pour commencer, assurez-vous que les photographies soient de bonne qualité comme c’est décrit précédemment. Vous pourrez ensuite vérifier que votre fichier image dispose d’un nom approprié afin qu’il soit indexé par les moteurs de recherche. Sachez que les noms du style “Photo1.jpg” ou “Screen1.jpg” sont de mauvais choix pour une image d’arrière-plan. Gardez un nom cohérent et évitez d’utiliser des tirets ou des signes de ponctuation. Les traits d’union doivent être utilisés à la place des traits de soulignement.
9. Le Choix d’un Bon Format
Savez-vous quel type de fichier utiliser pour votre image d’arrière-plan. Voyons voir ensemble les formats possibles :
- JPG : Ces fichiers sont idéaux pour les images car ils peuvent gérer une large gamme de couleurs tout en conservant une petite taille. Lorsque vous utilisez ce format, vous n’aurez pas à vous soucier du volume, ce qui réduira le temps de chargement.
- PNG : Ce type est idéal pour les graphiques surtout lorsqu’il y a des zones de couleurs étendues ou plates. Cette catégorie comprend la majorité des conceptions, des infographies et des images contenant des textes et des logos.
- Les fichiers PNG peuvent également avoir un fond transparent qui est idéal pour les logos. Enregistrez votre PNG au format “24 bits” pour une meilleure qualité et un affichage des couleurs variés.
10. L’Image Doit Parler d’Elle-Même
Une image d’arrière-plan captivante suscitera l’intérêt des visiteurs pour votre site web. Utilisez une image qui transmet un message au lieu de mots. Même si l’écriture est intéressante à lire, les visiteurs comprendront mieux vos idées à travers une image.
Comment Ajouter une Image d’Arrière-Plan à Strikingly ?
L’image d’arrière-plan Strikingly est conçue pour s’adapter à différentes tailles d’écran que ce soit des ordinateurs, des tablettes ou des smartphones. Pour que votre image de fond soit optimisée sur tous les écrans, il est recommandé d’utiliser une taille de 1600 pixels de large sur 900 pixels de longueur. Incluez des photographies non contextuelles de personnes et de marques avec prudence. Utilisez la fonctionnalité aperçu pour voir à quoi va ressembler votre site. Vous pouvez utiliser une image de la bibliothèque Strikingly ou télécharger l’une des photographies sur votre ordinateur. Il existe trois options pour ajouter une image de fond sur le constructeur de sites. Suivez les étapes suivantes pour ajouter votre image d’arrière-plan :
- Connectez-vous à votre compte Strikingly et ouvrez votre éditeur de sites.
Image Tirée de Strikingly
- Cliquez sur le bouton arrière-plan pour ajouter une image d’arrière-plan ou une vidéo.
Image Tirée de Strikingly
- Accédez à la bibliothèque en cliquant sur “PLUS”. Vous pourrez télécharger votre image en cliquant sur “Télécharger une image”. Gardez juste à l’esprit que seuls les formats d’image GIF, JPEG, PNG, BMP et ICO sont acceptés.
Image Tirée de Strikingly
Pour Conclure
Avec autant de technologies qui peuvent influencer la conception web, il est compréhensible que les professionnels n’accordent pas suffisamment d'importance à l’image d’arrière-plan. Ces images jouent cependant un rôle important dans la narration tout en développant une interface-utilisateur plus agréable. L’arrière-plan complet aide à établir le ton d’un site, alors que l’arrière-plan par section donne aux contenus un peu de répit. Tout fonctionne mieux avec des photographies adaptées aux besoins. N’oubliez pas de garder à l’esprit les fonctionnalités comme la taille, le format de l’image et la compatibilité des appareils mobiles.
Si vous souhaitez créer un site web avec la meilleure image d’arrière-plan, alors inscrivez-vous dès à présent sur la plateforme Strikingly !
