Comment choisir les images de votre site Webfow ? Et comment les gérer ? 😅 Si vous vous sentez démuni face à cet enjeu, j'ai une bonne nouvelle ! En lisant cet article (jusqu'à la fin, on ne triche pas 😉) vous aurez toutes les cartes en main pour faire les meilleurs choix et arborer de magnifiques visuels sur votre site internet !
Un article haut en couleurs 🎨
Vous en avez déjà vu une quantité infinie sans même vous en apercevoir ✌🏼
En fait, une image matricielle est une image numérique composée d'un ensemble de pixels disposés en grille régulière. Chaque pixel attribué une valeur de couleur est stocké dans la mémoire de l'ordinateur sous forme de code numérique.
On obtient ces images matricielles grâce à un appareil photo numérique, un scanner ou un logiciel de traitement d'image. Elles sont couramment utilisées pour stocker des photographies et des images qui ont des dégradations de couleurs subtiles et des transitions de tons douces.
Une photographie est donc une image matricielle 🤓
Pourquoi c'est intéressant ? Parce que les mages matricielles ont des caractéristiques particulières qu'il est important de prendre en compte si l'on souhaite en utiliser sur son site.
Voyons leurs limites 👇
La qualité d'une image matricielle dépend de plusieurs facteurs comme la résolution, la taille de l'image, le nombre de couleurs et la compression. Les images avec une résolution plus élevée (plus de pixels par pouce) ont une qualité d'image meilleure, mais nécessitent également plus d'espace de stockage et peuvent prendre plus de temps à charger ⏳
Les images matricielles ont également des limites en termes de redimensionnement, car si elles sont agrandies, les pixels deviennent visibles et l'image peut devenir floue ou pixelisée. Ce n'est donc pas une bonne idée de les agrandir pour votre site web ... En revanche, elles peuvent être recadrées sans perdre trop de qualité, car seuls les pixels en dehors de la zone recadrée seront supprimés 😊
Une image vectorielle est une image numérique qui est créée à l'aide de formes géométriques, de lignes, de courbes, de cercles et de polygones, et non à partir de pixels comme c'est le cas pour les photos.
Ces images sont généralement créées à l'aide de logiciels de dessin vectoriel comme Adobe Illustrator. Contrairement aux images matricielles, elles sont redimensionnables à l'infini sans perte de qualité, car elles sont basées sur des formules mathématiques 🤓
Sur un site, elles sont très utilisées, notamment pour les logos, les icons et les illustrations ✌🏼L'atout majeur des images vectorielles est qu'elles peuvent être agrandies ou réduites sans perdre leur netteté ou leur qualité 🤩
Vous l'aurez compris, les images vectorielles ne sont pas des photos, mais plutôt des illustrations.
Leur limite étant qu'elles ne peuvent pas reproduire les détails et les nuances d'images aussi complexes qu'une photographie.
Maintenant que vous connaissez les subtilités des images, il est temps de passer à quelque chose de plus concret. J'ai nommé le choix des visuels pour votre site 👇
L'identité visuelle d'une marque est l'ensemble des éléments graphiques qui permettent de l'identifier visuellement. C'est un peu comme la carte d'identité d'une entreprise.
.gif)
Elle comprend des éléments comme le logo, les couleurs, les typographies, les formes ... et les images ! 😎
Tout cela est réuni dans une charte graphique, qui établit les règles d'utilisation de ces éléments graphiques pour que la marque soit cohérente et reconnaissable.
L'identité visuelle est un élément clé du branding, qui consiste en l'ensemble des actions et des stratégies mises en place pour développer l'image de la marque dans l'esprit des consommateurs. L'identité visuelle doit donc être en cohérence avec la stratégie de marque pour être efficace ✌🏼
Une bonne identité visuelle doit permettre à la marque de se différencier de ses concurrents, de transmettre ses valeurs et sa personnalité, et d'attirer l'attention des consommateurs. Elle doit également être adaptable aux différents supports de communication, qu'il s'agisse d'un site web, d'un emballage, d'une publicité, ou encore d'une enseigne.
Psst, pour en savoir plus sur l'identité visuelle, cliquez sur ce guide pour réussir votre charte graphique et votre logo 😇 https://www.elias.studio/blog/le-guide-pour-reussir-votre-charte-graphique-et-votre-logo
Grâce à ce rappel de l'identité visuelle, vous comprenez pourquoi vous ne pouvez pas choisir les visuels de votre site au hasard. En fait, vous devez faire en sorte que tous vos contenus de marque soit cohérents et respecte l'identité de votre marque 🤞
En ce sens, le choix de vos visuels sera lié à votre charte graphique. Que contient-elle ? Au moment de sa création, vous avez dû réfléchir à ces éléments ...
.gif)
Suivant l'identité visuelle propre à votre marque, vous pourriez choisir de mettre en ligne sur votre site des photos, des illustrations, ou un mix des deux !
Si vous avez fait le choix d'ajouter des illustrations à votre site web ceci pourrait vous intéresser 🤓
Un mauvais choix d'illustrations peut tuer votre direction artistique ! 😵
Si vous n’êtes pas sûr des illustrations de votre site, peut-être qu’il s’agit d’illustrations datées ... Alors, quoi de mieux que de s’imprégner des tendances de cette année pour trouver l’inspiration ? 😇
En 2023, on crée un univers immersif empreint de simplicité, dune touche d’humour et d’un brin de nostalgie !
Si vous choisissez de réaliser un shooting photos en vue de mettre ces dernières sur votre site web, vous faites un choix intéressant ✌🏼 Des photos personnalisées (à condition qu'elles soient réussies, ça va sans dire 😅) représentent un élément de réassurance important et sont très valorisantes pour votre image de marque.
En 2023, les photos corporate surfent sur des tendances de fond. On recherche de l'authenticité, de la simplicité et du bien-être 🌿
Concrètement, cela se traduit par :
C'est votre jour de chance ! 😎
Voici 50 outils pour trouver les visuels de votre site web avec un budget zéro (+ 1 outil bonus) :
Pour trouver des illustrations et/ou les personnaliser :
💎 Stubborn : https://stubborn.fun/
✌🏼Undraw : https://undraw.co/illustrations
🔥 Humaaans : https://www.humaaans.com/
👾 Icons8 : https://icons8.com/
👑 Absurd design : https://absurd.design/
🎯 Pimp my Drawing : https://pimpmydrawing.com/
🤓 Lukas Zadam : https://lukaszadam.com/illustrations
✅ Vecteesy : https://fr.vecteezy.com/
🥇Open Doodles : https://www.opendoodles.com/
⭐️ Illustrations : https://illlustrations.co/
😎 Vector Portal : https://vectorportal.com/
💎 DrawKit : https://www.drawkit.com/
✌🏼Fresh Folk : https://fresh-folk.com/
🔥 Mixkit : https://mixkit.co/free-stock-art/
👾 Open Peeps : https://www.openpeeps.com/
👑 Blush : https://blush.design/fr
🎯 Skribbl : https://weareskribbl.com/
🤓 Nice Illustrations : https://niceillustrations.com/
✅ Storyset : https://storyset.com/
⚒ Highlights : https://www.highlights.design/
🔥 Coco Material : https://cocomaterial.com/
💁♂️ Personas : https://personas.draftbit.com/
Bonus : Olio Constructor https://olio.work/
Pour trouver des icons et/ou les personnaliser :
🔥 Isometric Love : https://www.isometriclove.com/
👾 Dreamstime : https://fr.dreamstime.com/vectors
👑 Flaticon : https://www.flaticon.com/
🔥 Freepik : https://www.freepik.com/
✅ Animaticons : https://animaticons.co/
☀️ Icomoon : https://icomoon.io/
🧤 Medialoot : https://medialoot.com/icons/
⚒ The Noun project : https://thenounproject.com/
🥇 Heroicons : https://heroicons.com/
⭐️ Linea : https://linea.io/
🐵 Icône : https://icones.js.org/
💎 Emoji Cloud : https://alohe.github.io/emojicloud/
🍇 Shape : https://shape.so/
✌🏼Iconhub : https://iconhub.io/
Pour trouver des visuels gratuits libres de droit :
🎯 Unsplash : https://unsplash.com/fr
🤓 Gratisopgraphy : https://gratisography.com/
🕶 Piqsels : https://www.piqsels.com/fr
⚒ Visual Hunt : https://visualhunt.com/
🥇 Pixabay : https://pixabay.com/fr/
⭐️ Free Photos : https://freephotos.cc/fr
💎 Pexels : https://www.pexels.com/fr-fr/
✌🏼Magdeleine : https://magdeleine.co/
🚴🏻♂️ StockSnap : https://stocksnap.io/
👾 Burst : https://burst.shopify.com/
Pour détourer vos photos en deux clics :
💡Remove bg : https://www.remove.bg/fr
👑 Sticker mule : https://www.stickermule.com/trace
🎯Picsart : https://picsart.com/background-remover
🤓 BG Eraser : https://bgeraser.com/
✅ Pixlr : https://pixlr.com/fr/remove-background/
De manière tout à fait classique, vous pouvez sur Webflow, ajouter vos images, les éditer, les remplacer (encore heureux 😆) mais également les styliser et ajouter un alt-text.
Pour ajouter une image sur votre site depuis l'éditeur Webflow, il existe plusieurs manières de le faire. Vous pouvez l'ajouter depuis le panneau Add, le panneau Assets, la recherche rapide ou directement depuis votre ordinateur via un drag & drop.
Je vous laisse consulter les leçons de Webflow pour lire de plus amples explications 📚 !
Notez quand même que la taille maximale de votre fichier photo est de 4MB ! 😇
Bien entendu, les tailles d'images pour un site peuvent varier en fonction de plusieurs facteurs comme la résolution, la taille de l'écran et la qualité d'image souhaitée. Cela étant, on peut noter ces quelques quelques recommandations pour optimiser ses images sur son site Internet 👇
Voici quelques tailles d'images couramment utilisées :
.gif)
La taille de l'image ne doit pas être confondue avec la taille du fichier !
Comme évoqué plus haut, la taille maximale autorisée pour un fichier photo sur Webflow est de 4 MB. Si votre fichier excède ce poids, pas de panique ! 💡
En ayant recours à la compression vous pourrez non seulement ajouter vos visuels mais le temps de chargement de votre site sera réduit 😊 On en reparle juste après !
Sur Webflow, vous pouvez ajouter des images au format GIF, PNG, JPEG, SVG, et WebP sur votre site internet. Chaque format a ses spécificités :
Si vous souhaitez approfondir ces sujets, rendez-vous ici !
En détourant vos visuels, vous pourrez améliorer l'esthétique de vos visuels, et donc de votre site internet 😊 Les éléments indésirables seront supprimés ce qui donne une apparence plus nette et professionnelle.
De plus, en retirant les parties inutiles de l'image, comme le fond, son poids peut être réduit, ce qui améliorera la vitesse de chargement de la page. Et ça, c'est super pour améliorer l'expérience utilisateur et le référencement naturel 🤩
Enfin, les images détourées peuvent être utilisées sur différents supports sans problème de compatibilité.
Vous vous en doutez, la compression est un processus qui permet de réduire la taille des fichiers d'image sans sacrifier la qualité visuelle. C'est une option (qui ne devrait plus en être une 🤪) très intéressante pour les sites Web car les visuels occupent souvent une grande partie de la bande passante et peuvent ralentir le temps de chargement de la page.
Pour ce faire, je vous recommande d'utiliser un outil de compression en ligne. Il en existe plusieurs permettant de réduire la taille des fichiers tout en préservant la qualité visuelle. Une valeur sûre : ILOVEIMG.
Aussi, animer vos visuels peut faire la différence, notamment si vous cherchez à expliquer vos produits ou services. À nouveau, je vous donne un outil qui vous permettra de le faire facilement et gratuitement ! Jitter 😎
Amusez-vous bien, l'outil est très intuitif !
Connaissez-vous les visuels Favicon, Webclip et OpenGraph ? 🤔
Il s'agit pourtant de visuels importants pour un site web. Voici une brève explication de chacun :
Un favicon est une petite icône qui apparaît dans l'onglet du navigateur à côté du nom du site web. Il est également utilisé comme icône pour les signets et les raccourcis sur les appareils mobiles. Les favicons sont généralement de petite taille, souvent 16x16 pixels ou 32x32 pixels.
Pour choisir un favicon, il est important de sélectionner un visuel simple et facilement reconnaissable qui représente l'identité visuelle de votre site web ✨
Un webclip est une icône spécifique aux appareils Apple, qui apparaît sur l'écran d'accueil lorsqu'un utilisateur ajoute votre site web à ses raccourcis. Les dimensions recommandées pour un webclip sont de 180x180 pixels pour les appareils iOS et de 192x192 pixels pour les appareils Android.
🧐 Les visuels utilisées pour les webclips doivent être claires et facilement reconnaissables pour les utilisateurs.
OpenGraph est un protocole de métadonnées qui permet aux sites web de fournir des informations supplémentaires aux réseaux sociaux et aux moteurs de recherche lorsqu'ils partagent des liens vers votre site web. Les images OpenGraph sont généralement de grande taille, souvent 1200x630 pixels ou 800x800 pixels, et doivent être de haute qualité pour s'assurer que le visuel est net et attrayant sur les réseaux sociaux.
Les images OpenGraph doivent également être pertinentes pour la page ou l'article qu'elles représentent 💡
Au final, comme d'habitude, il est important de choisir des visuels appropriés et de s'assurer qu'ils sont optimisés pour leur utilisation spécifique. Les visuels Favicon et Webclip sont importants pour améliorer l'expérience utilisateur et faciliter l'accès au site web, tandis que les images OpenGraph sont importantes pour améliorer le partage sur les réseaux sociaux et les moteurs de recherche ! 💯
En choisissant soigneusement les visuels pour chaque type, vous pouvez améliorer l'apparence et la fonctionnalité de votre site web et augmenter la visibilité de votre site web sur les réseaux sociaux !
On passe à la notion suivante, le SEO !
.gif)
Mordus de Webflow, je vous attends là-bas 🚀
