.svg)
.svg)
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 🎨
Les différents types d’images pour votre site internet
Les images matricielles
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 😊
Pour résumer :
- Vos photos et vos images avec des dégradations de couleurs subtiles et des transitions de tons douces sont des images matricielles
- Ayez conscience qu'elles prennent de la place, qu'elles mettent un certain temps à charger
- Ne les agrandissez pas ! 😱
- Vous pouvez les reconnaitre grâce à leurs formats courants : JPEG, GIF, PNG, TIFF, RAW, PSD
Les images vectorielles
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.
Pour résumer :
- Les images vectorielles ne sont pas créés à partir de pixels mais avec des formes géométriques basées sur des formules mathématiques
- Elles peuvent être agrandies ou réduites sans affecter leur netteté ou leur qualité
- Elles ne peuvent pas reproduire toutes les nuances
- Vous pouvez les reconnaitre grâce à leurs formats courants : PDF, EPS, AI
Miser sur des photos ? Des illustrations ? Génériques ? Sur-mesure ?
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 👇
Respecter l'identité de sa marque
Rappel de l'identité visuelle
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
Décliner l'identité visuelle sur votre site
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 !
Les tendances des illustrations en 2023
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 ? 😇
A retenir :
En 2023, on crée un univers immersif empreint de simplicité, dune touche d’humour et d’un brin de nostalgie !
Les tendances des photographies corporate en 2023
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 :
- des photographies portrait pour mettre en avant les équipes de l'entreprise
- des prises de vue en lumière naturelle
- une volonté d'incorporer le mouvement et l'action
- des photo qui expriment de la joie
- des photographies colorées
- la mise en avant de personnes âgées
Les photos génériques : les meilleures banques d'images où en trouver
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/
Les bases pour apprendre à gérer ses images sur Webflow
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 ! 😇
Les tailles des images pour son site Webflow
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 :
- Bannière : La taille recommandée pour une image de bannière dépend de la résolution de l'écran. Pour les écrans à haute résolution, une taille de 1920 x 1080 pixels est couramment utilisée. Pour les écrans à résolution plus faible, une taille de 1366 x 768 pixels peut être suffisante.
- Vignettes : Les images de vignettes sont généralement de petite taille et sont utilisées pour représenter des galeries de visuels ou des produits sur un site internet. Leurs tailles courantes de vignettes sont 150 x 150 pixels ou 300 x 300 pixels.
- Produit : Les images de produit sont souvent de taille moyenne et sont utilisées pour montrer les détails d'un produit. Leurs tailles courantes sont 500 x 500 pixels ou 1000 x 1000 pixels.
- Fond : Les images de fond peuvent être utilisées pour ajouter de l'esthétique à un site internet. La taille recommandée est d'environ 1920 x 1080 pixels, mais il est important de garder à l'esprit que la cette taille peut avoir un impact sur le temps de chargement du site.
.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 !
Les formats d'image pour son site Webflow
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 :
- GIF : Format bitmap utilisé pour les images animées. Les fichiers GIF prennent en charge la transparence et la compression sans perte, mais ont une palette de couleurs limitée à 256 couleurs.
- PNG : Format bitmap qui prend en charge la transparence et la compression sans perte. Les fichiers PNG peuvent également prendre en charge des couleurs plus riches et des dégradés plus lisses que les GIF.
- JPEG : Format compressé avec perte utilisé pour les photographies et les images avec de nombreuses couleurs. Il peut y avoir une perte de qualité visible en raison de la compression.
- SVG : Format d'image vectorielle qui peut être redimensionné sans perte de qualité. Les fichiers SVG sont souvent utilisés pour les icônes et les logos, et peuvent être modifiés avec des outils de dessin vectoriel.
- WebP : Format développé par Google pour offrir une meilleure compression et une qualité supérieure aux formats JPEG et PNG. Les fichiers WebP peuvent être plus petits que les fichiers JPEG et PNG pour une qualité similaire (mais ne sont pas encore pris en charge par tous les navigateurs Web).
Si vous souhaitez approfondir ces sujets, rendez-vous ici !
3 conseils pour envoyer vos visuels à un niveau supérieur
Détourez vos visuels
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é.
Compressez vos visuels avant de les ajouter à votre site
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.
Animez vos visuels avec Jitter
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 !
Les images à ne pas oublier : Favicon, Webclip, Opengraph
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 :
Favicon
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 ✨
Webclip
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
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 !
Bonus : Le guide ultime pour optimiser son SEO sur Webflow
On passe à la notion suivante, le SEO !
.gif)
Mordus de Webflow, je vous attends là-bas 🚀
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
