Lors de l'adaptation mobile des images, la gestion du texte dans les images est un problème courant mais souvent négligé. Si le texte dans une image n'est pas clair, trop petit ou déformé sur un téléphone, cela affecte directement l'expérience utilisateur et l'image de l'entreprise. Voici quelques astuces pratiques à considérer lors de la création d'un site web d'entreprise.
1. Contrôler la taille réelle du texte dans l'image
Lors de la conception d'images sur PC, si le texte est défini en pixels, il peut devenir très petit lorsque l'image est redimensionnée pour l'écran du téléphone. Il est recommandé de définir une taille de police plus grande que d'habitude, par exemple au moins 24px pour le corps du texte et 36px pour les titres. De plus, la largeur de l'image doit s'adapter aux largeurs courantes des mobiles (comme 750px) pour garantir la lisibilité après redimensionnement. L'utilisation de graphiques vectoriels (comme SVG) peut également éviter la distorsion lors du zoom.
2. Utiliser SVG ou Icon Font à la place du texte dans les images
Pour les icônes, boutons ou petits textes, SVG ou Icon Font sont de meilleures options. SVG est un format vectoriel qui ne se floute pas lors du zoom et prend en charge le responsive. Icon Font peut également être redimensionné avec le texte et changer de couleur. Ainsi, il n'est pas nécessaire d'intégrer le texte dans l'image, ce qui offre plus de flexibilité. Par exemple, les icônes de navigation ou les boutons de partage conviennent bien à cette approche.
3. Remplacer le texte de l'image par du texte CSS
Si le texte dans l'image est décoratif, il peut être écrit directement en HTML et superposé à l'image à l'aide de CSS pour contrôler la position et le style. Ainsi, le texte s'adapte aux paramètres de police de l'appareil et est plus facilement indexé par les moteurs de recherche. Par exemple, le titre d'une bannière peut être écrit avec une balise <h1> et positionné au-dessus de l'image via CSS.
4. Utiliser des images responsives
Pour les cas où l'utilisation d'images est inévitable, la technique des images responsives peut être employée. Grâce aux attributs srcset et sizes de HTML5, différentes résolutions d'images peuvent être fournies pour différentes largeurs d'écran. Alternativement, l'élément <picture> permet de charger différentes versions d'images (recadrées ou avec un texte différent) en fonction des conditions de l'appareil. Cela permet d'afficher sur mobile une version de l'image optimisée pour les petits écrans.
5. Éviter le texte dans les images pour les éléments clés
Si le texte est un contenu essentiel (comme des titres ou des descriptions), il est préférable d'utiliser du texte HTML plutôt que du texte dans une image. Le texte dans les images n'est pas favorable au SEO et n'est pas reconnu par les lecteurs d'écran. Il ne faut envisager de mettre du texte dans une image que pour des polices spéciales ou des mises en page strictes. En cas de doute, privilégiez les polices web (Web Font) pour obtenir des effets spéciaux.
Rappel : Lors de la création d'un site web d'entreprise, le texte dans les images est généralement adapté pour créer une ambiance ou une décoration. Les informations essentielles doivent être en texte réel. Cela simplifie l'adaptation mobile et améliore l'optimisation du contenu.
6. Tester sur différents appareils
Quelle que soit la méthode choisie, il est essentiel de tester sur de vrais téléphones avant la mise en ligne. Vérifiez la clarté du texte dans les images, la taille de la police et ajustez si nécessaire. Préparez une liste de tests incluant différentes tailles d'écran, navigateurs et comportements après zoom. Identifiez et corrigez les problèmes rapidement.
Conclusion
L'adaptation du texte dans les images pour mobile repose sur une planification précoce. Dès la phase de conception, tenez compte de l'affichage mobile et choisissez judicieusement les solutions techniques. En général, privilégiez le texte réel, puis SVG ou Icon Font, et enfin le texte intégré dans les images. Cela garantit une bonne expérience mobile et facilite la maintenance et l'optimisation du site.
