Préparez de grandes images pour des cartes interactives rapides

Les cartes interactives exigent des performances d’image bien supérieures à celles des photos Web classiques. Les visiteurs effectuent un panoramique, un pincement et un zoom avant pour inspecter les étiquettes architecturales fines, les dimensions des unités et les limites individuelles des stands.

Si votre image est trop petite, le texte et les lignes deviennent flous et illisibles lors d'un zoom avant. Si votre image est une exportation brute non compressée de 80 Mo, les temps de chargement des pages montent en flèche, les taux de rebond augmentent et les appareils mobiles tombent en panne en raison de contraintes de mémoire.

Layerpin comble cette lacune en utilisant une architecture de mosaïque à zoom profond. En préparant correctement votre image source, vous débloquez une réactivité instantanée de panoramique et de zoom avec une clarté de type vectoriel d'une netteté exceptionnelle.

Lorsque vous exportez des plans directeurs ou des plans d'étage à partir d'un logiciel de conception (AutoCAD, Revit, Adobe Illustrator, Canva ou Figma), suivez ces règles d'exportation pour des résultats optimaux :

Pour la CAO et les plans vectoriels : exportez à une échelle 2x ou 3x au format PNG ou WebP de haute qualité. Assurez-vous que l'épaisseur des lignes est d'au moins 1 pt à 1,5 pt d'épaisseur afin que les fines limites des murs ne disparaissent pas lors des vues d'ensemble avec un zoom large.

Pour la photographie aérienne et par drone : Exportez au format JPEG ou WebP progressif avec une qualité de 85 à 90 %. L'œil humain ne peut pas détecter les artefacts de compression avec une qualité de 85 %, mais la taille du fichier est réduite jusqu'à 70 % par rapport aux exportations à 100 % non compressées.

Lorsque vous téléchargez une image sur Layerpin, notre pipeline de traitement génère une pyramide d'images multi-résolution (tuiles à zoom profond).

Au lieu de forcer un navigateur mobile à télécharger une image de 50 Mo d'un seul coup, Layerpin diffuse dynamiquement uniquement les micro-tuiles spécifiques visibles dans la fenêtre d'affichage et le niveau de zoom actuels du visiteur. Avec un zoom faible, les vignettes d'aperçu à faible bande passante se chargent instantanément ; Lorsque l'utilisateur zoome sur la salle 402, des fragments de tuiles haute résolution y pénètrent de manière transparente.

Cette architecture réduit le transfert d'image initial tout en prenant en charge de très grands plans directeurs architecturaux. Le temps de chargement réel dépend toujours de la préparation de l'image, des conditions du réseau, de l'hébergement et de l'appareil du visiteur.

Avant de lancer votre carte publiquement, effectuez toujours un audit multi-appareils réel.

Ouvrez votre carte publiée dans une fenêtre de navigateur privé et testez dans trois conditions : écran 4K/retina de bureau, téléphone mobile de milieu de gamme connecté à une connexion cellulaire et tablette en orientation paysage et portrait.

Confirmez que le zoom par défaut initial affiche la zone d'intérêt complète sans nécessiter un zoom immédiat, et vérifiez que les étiquettes de texte restent nettes lors d'un panoramique dans les coins les plus éloignés du canevas.