Est-ce que je peux changer les images uniquement sur la version mobile ?
Adapter vos visuels selon l’appareil pour une expérience optimale
Points clés
• Il est possible d’afficher une image différente sur mobile
• Le Designer permet de masquer/afficher des images selon le breakpoint
• L’Editor ne permet pas de gérer une image spécifique au mobile
• Une optimisation mobile-first améliore la vitesse et la lisibilité
Oui, vous pouvez afficher une image différente sur la version mobile de votre site hôtelier. C’est une pratique courante lorsque l’image desktop est trop large, trop complexe ou mal cadrée sur les petits écrans. En revanche, cette manipulation se fait principalement dans le Designer, car l’Editor ne permet pas de gérer des visuels distincts selon les appareils.
Voici la méthode la plus propre et recommandée.
Modifier une image uniquement sur mobile via le Designer
Pour remplacer ou ajuster une image sur mobile, vous pouvez utiliser la fonction de visibilité par appareil.
Procédure :
- Ouvrez le Designer.
- Sélectionnez l’image actuelle (celle affichée sur desktop).
- Dans le panneau de droite, ouvrez les icônes de visibilité (œil).
- Désactivez l’affichage sur mobile pour cette image.
- Ajoutez une nouvelle image, conçue pour mobile :
• Taille plus verticale
• Visuel simplifié
• Poids allégé pour plus de performance - Sélectionnez cette nouvelle image et désactivez son affichage pour :
• Desktop
• Tablette
(ne laissez activé que Mobile) - Ajustez les tailles, marges et positions si nécessaire.
- Publiez le site.
💡 Cette méthode permet de gérer deux versions distinctes d’une même section : une pour desktop, une pour mobile.
Pourquoi utiliser une image spécifique pour mobile ?
Certaines images affichées sur desktop ne fonctionnent pas bien sur mobile :
• Recadrage trop serré
• Sujet principal coupé
• Image trop large ou trop horizontale
• Texte difficile à lire sur mobile
• Poids trop important → ralentit le chargement
Une version mobile permet :
• Un cadrage vertical adapté
• Une lisibilité optimale
• Une meilleure performance en 4G
• Un rendu haut de gamme sur petit écran
Peut-on le faire dans l’Editor ?
L’Editor ne permet pas :
• d’ajouter une image visible uniquement sur mobile
• de masquer une image selon un appareil
• de gérer le responsive avancé
En revanche, l’Editor permet de :
• remplacer une image commune à tous les appareils
• modifier un visuel présent dans une Collection
Pour une personnalisation mobile-only, le Designer est obligatoire.
Technique alternative : image en background différente sur mobile
Certaines sections utilisent une image en background. Vous pouvez :
• garder une image large pour desktop
• charger une version adaptée pour mobile
Méthode :
- Sélectionnez la section dans le Designer.
- Passez en mode mobile.
- Changez l’image de background uniquement pour ce breakpoint.
- Ajustez les réglages :
• Cover
• Center top (souvent mieux pour mobile)
• Hauteur adaptée - Publiez.
💡 Le Designer permet de modifier le background par breakpoint sans toucher au desktop.
Optimiser la performance mobile
Pour une image mobile, privilégiez :
• Format WebP
• Moins de 300–400 Ko
• Dimensions verticales (ex : 800×1200 px)
• Cadrage simple et lisible
Un site rapide améliore :
• le référencement
• le taux de conversion
• l’expérience utilisateur en situation réelle (4G, wifi public)
Ce qu’il ne faut pas faire
Pour préserver la cohérence et la performance :
• Ne collez jamais du texte directement dans l’image mobile
• Ne laissez pas deux images actives sur mobile → surcharge
• Ne remplacez pas la mauvaise image dans le mauvais breakpoint
• N’oubliez pas de vérifier le rendu sur de vrais appareils
Conclusion
Oui, vous pouvez changer les images uniquement sur la version mobile de votre site hôtelier, mais cela se fait dans le Designer. En utilisant les règles de visibilité ou les backgrounds par breakpoint, vous pouvez adapter vos visuels pour garantir une expérience mobile élégante, performante et parfaitement cadrée. L’Editor, lui, permet seulement de remplacer une image commune à tous les formats.