Images

Découvrez comment optimiser vos images dans PandaSuite, ajouter de nouvelles images, les différentes propriétés et interactions possibles.

Les formats d’image acceptés par PandaSuite sont : .JPG, .JPEG, .PNG, .TIFF, .TIF et .GIF. De plus, PandaSuite permet également l’insertion d’images vectorielles (SVG).

Préparation des images

Pour assurer un rendu optimal sur tous les appareils, il est recommandé de préparer vos images en mode @2x. Concrètement, cela signifie que la résolution de vos images doit être deux fois supérieure à la taille à laquelle elles seront affichées dans votre projet.

Par exemple, si l’image présente dans votre projet est destinée à être affichée en 120x300, l’idéal est de travailler sur un fichier (source) image de 240x600 pixels. Cela permet d’éviter les problèmes de qualité qui apparaissent lorsque l’écart entre la résolution réelle de l’image et sa taille dans le projet est trop important.

Cette approche est particulièrement importante pour les résolutions HD et Retina, où une image en @2x garantit une netteté et une précision accrues. Grâce à la technologie cloud, PandaSuite optimise vos images en téléchargeant uniquement la version la plus adaptée à chaque appareil, ce qui contribue à alléger le poids global de votre application.

Ajouter une image

1. Cliquez sur l’icône Image ou Fichiers dans la barre de menu supérieure.
2. Une fenêtre s’ouvrira pour vous permettre de naviguer et de sélectionner l’image de votre choix depuis votre ordinateur.
3. Une fois l’image chargée, glissez-la votre espace de travail.

Propriétés des images

Sélectionnez votre image pour accéder à ses propriétés :

• Source : remplacez votre image par une autre tout en conservant les propriétés que vous avez précédemment définies pour l’image dans votre projet. C’est particulièrement utile lorsque vous dupliquez une mise en page.
• Qualité : cette information vous alerte sur la qualité de votre image en fonction de sa résolution. Si cet indicateur dépasse 50%, la qualité de votre image risque d’être dégradée.
• Masque : vous pouvez ajouter un masque pour définir la zone visible de votre image ainsi que sa forme (carré, rond, bulle, triangle, étoile, etc.).

Vous pouvez également définir son Opacité, son Radius, ajouter une Bordure et une Ombre.

Déclencher une action à partir d’une image

Vous pouvez déclencher une action depuis votre image.

• Sélectionnez votre image et dans le panneau ACTIONS, cliquez sur le bouton +.
• Sélectionnez un événement déclencheur : Tape/Clique, Survol entrant…
• Ajoutez une action