Gérer les images sur Showit : tout ce que tu dois savoir

Votre site, c’est souvent la première impression que vous laissez. Et avant même que vos visiteurs lisent une seule ligne, ce sont vos images qui parlent. Elles transmettent votre univers, votre niveau d’exigence, votre crédibilité. Sur Showit, vous avez un contrôle précis sur chaque visuel – à condition de savoir quels réglages utiliser. Ce guide couvre tout : l’organisation de votre médiathèque, la mise en page de votre images, le recadrage et même les effets interactifs.

Votre médiathèque Showit : le point de départ

La médiathèque (ou bibliothèque de médias), c’est l’espace centralisé où sont stockés tous vos fichiers avant de les utiliser sur votre site : photos, logos, polices, vidéos, PDF. Avant de placer quoi que ce soit sur une page, tout passe par là.

Les formats acceptés selon le type de fichier

Showit ne prend pas en charge tous les formats. Voici ce qui fonctionne :

• Photos → JPG, GIF ou PNG
• Logos et icônes → PNG ou SVG (le SVG est un format vectoriel : il reste parfaitement net quelle que soit la taille d’affichage)
• Vidéos de fond → MP4 avec compression h.264
• Polices personnalisées → WOFF (format de police optimisé pour le web)
• PDF → pour des documents téléchargeables
• Animations Lottie → fichiers LOTTIE ou JSON (des animations légères et fluides, sans vidéo)

Organiser tes fichiers en dossiers

Vous pouvez créer des dossiers dans votre médiathèque. C’est un détail qui change tout dès que votre site grossit. Classe vos visuels par section : hero, portfolio, blog, offres – et vous gagnerez un temps précieux à chaque modification.

Sélectionner plusieurs fichiers rapidement

• Shift + clic → sélectionner une série d’images à la suite
• Ctrl/Cmd + clic → sélectionner plusieurs images dans n’importe quel ordre
• Option/Alt + clic → ajouter directement l’image sur le canvas sans passer par la sélection

Supprimer des fichiers inutiles

Pour faire le ménage : coche les fichiers à supprimer (case en haut à gauche de chaque vignette), puis cliquez sur Delete Selected.

<aside> 💡 ⚠️ Si vous supprimez une image utilisée sur votre site, elle disparaît immédiatement côté visiteur. Vérifie toujours avant de supprimer.

</aside>

Si vous voyez des vignettes avec un fond rouge dans votre médiathèque, c’est que l’upload n’a pas abouti. Supprimez ces fichiers cassés et réimportez-les.

Fill, Contain, Crop ou Stretch : quel réglage choisir ?

Quand vous placez une image sur votre canvas Showit, vous dovez lui dire comment elle se comporte dans son cadre. C’est dans l’onglet Image du panneau de propriétés à droite que ça se passe. Vous avez 4 options :

Fill – Remplir le cadre

L’image remplit entièrement son cadre. Si les proportions du cadre et de l’image ne correspondent pas, Showit recadre automatiquement une partie de l’image. Vous pouvez ensuite ajuster la Position (haut, centre, bas / gauche, droite) pour choisir quelle partie reste visible.

→ Idéal pour les images de fond ou les blocs plein cadre.

Contain – Conserver les proportions

L’image garde ses proportions d’origine et s’adapte au cadre sans être rognée. Si le ratio cadre/image ne correspond pas, des espaces vides apparaîtront sur les côtés.

→ Parfait pour les logos, les illustrations ou tout visuel dont vous ne voulez surtout pas couper les bords.

Crop – Recadrer manuellement

Cette option active le mode recadrage directement dans Showit. Vous décidez vous-même quelle partie de l’image vous gardez. On y revient en détail dans la section suivante.

Stretch – Étirer

L’image est étirée pour remplir tout le cadre, quelles que soient ses proportions. Résultat souvent déformé. À éviter sur les photos de personnes ou de produits.

Recadrer une image directement dans Showit

Vous n’avez plus besoin d’aller sur Canva ou Lightroom pour recadrer une photo. Showit intègre un outil de recadrage natif, simple et rapide.

Comment ça marche

1. Sélectionnez votre image sur le canvas
2. Cliquez sur Crop Image dans la barre d’outils qui apparaît au-dessus
3. En mode recadrage : déplace les bords du cadre et repositionne l’image à l’intérieur pour cadrer exactement ce que vous voulez
4. Quand vous êtes satisfaite du rendu, cliquez sur la coche bleue pour valider

Annuler un recadrage

Si vous changez d’avis, cliquez sur le bouton reset dans la même barre d’outils. L’image retrouve ses proportions d’origine. Aucune modification n’est définitive tant que vous n’avez pas publié.

Les images de fond : ce qu’il faut anticiper

Les images de fond (background) ont un comportement particulier sur Showit. L’éditeur est calibré sur une largeur de 1 200 px, mais les écrans réels sont souvent beaucoup plus larges.

Ce que ça veut dire concrètement : votre image de fond va s’étirer en largeur selon la taille de l’écran de votre visiteur. La hauteur du canvas, elle, reste fixe. Résultat : selon les formats d’écran, l’image peut être recadrée en haut ou en bas.

Comment anticiper ce comportement :

• Utilisez des images dont le sujet principal est centré – il y a moins de risque de le voir coupé
• Augmentez la hauteur du canvas si vous voulez préserver plus de surface visible sur les grands écrans
• Testez toujours en prévisualisation sur plusieurs tailles avant de publier

Edge Locking : pour les éléments qui doivent s’adapter aux grands écrans

Si vous avez une image (pas de fond) que vous voulez voir s’adapter aux écrans très larges, vous pouvez utiliser la fonction Edge Locking (le verrouillage des bords). Elle fixe les bords de l’image aux limites de l’écran, quelle que soit sa largeur. Utile pour les éléments décoratifs ou les séparateurs visuels.

L’effet hover sur une image : ajouter de l’interactivité

L’effet hover, c’est ce qui se passe quand un visiteur passe sa souris sur une image. Sur Showit, vous pouvez créer un effet où l’image devient transparente pour révéler un fond coloré et du texte en dessous.

Ce type d’effet est parfait pour :

• Des sections services (hover = nom du service + call-to-action)
• Un portfolio (hover = titre du projet)
• Une section équipe (hover = nom + poste)

Comment le mettre en place, étape par étape

1. Placez votre image sur le canvas, dimensionnez-la et positionnez-la
2. Masquez-la temporairement : cliquez sur l’icône moniteur à gauche de son calque pour la rendre invisible

1. Ajoutez un fond coloré via l’outil Shape, exactement au même endroit – c’est lui qui apparaîtra au survol
2. Ajoutez le texte que vous voulez voir s’afficher (titre, lien, bouton…)

1. Réactivez l’image en recliquant sur l’icône moniteur – vérifie qu’elle est bien au-dessus du fond coloré et du texte dans l’ordre des calques
2. Configurez l’action hover : sélectionne l’image → onglet Hover dans le panneau de droite → choisis Custom Action → réduis l’opacité à votre convenance

Quand le visiteur survole l’image, elle devient transparente et laisse apparaître le fond coloré et le texte en dessous.

<aside> 💡 ⚠️ Important : l’effet hover ne fonctionne que sur desktop. Sur mobile, il n’y a pas de « survol » avec le doigt – cet effet n’est pas applicable à la version mobile de votre site.

</aside>

Ce que vous pouvez faire maintenant

Les images sur Showit, c’est bien plus que de l’esthétique. La façon dont vous les organisez, les cadres et les animes a un impact direct sur la perception que vos visiteurs ont de votre business. Un site soigné dans ses visuels, c’est un premier niveau de confiance avant même que vous ayez dit quoi que ce soit.

Trois actions concrètes pour commencer :

• Faites le tri dans votre médiathèque et créez votre dossiers si ce n’est pas encore fait
• Vérifiez le réglage Fill/Contain de chaque image c’est souvent là que se cachent les décalages visuels
• Testez l’effet hover sur une section de votre site pour ajouter une touche d’interactivité sans une ligne de code