L'utilisation de texte incorporé dans une image est-elle une mauvaise pratique, pour des utilisations très contrôlées?
Que pensez-vous de l'écriture de votre texte en images?
Je ne dis pas tout au long du site Web ... Mais dans certains endroits clés comme les carrousels d'images. Et je ne parle pas des cas particuliers où vous avez des types de polices que les navigateurs ne peuvent pas afficher. Je parle de texte qui utilise des polices standard et qui n'est pas trop gros (3/4 balles).
Dois-je intégrer le texte dans les images qui composent le carrousel? Ou dois-je appliquer le texte aux images en tant que HTML "texte réel"?
Quels sont les avantages/inconvénients de l'utilisation de texte dans une image?
Eh bien, juste au dessus de ma tête (et quelques nouveaux ajoutés en fonction des commentaires contre ce post) ...
Contre
- Le texte ne peut pas être mis à l'échelle, il n'est donc pas ajusté avec les options standard de mise à l'échelle des polices du navigateur
- Aucun avantage SEO - les moteurs de recherche ne lisent pas les images, donc ils ignoreront tout texte dans les images.
- Les lecteurs d'écran ne le liront pas, donc cela ne sera utile qu'aux utilisateurs voyants. (Eh bien, avec du texte Alt, vous pouvez l'annoncer, mais ce sera un texte descriptif, pas un texte de paragraphe/en-tête)
- Les images ne sont pas des vecteurs (contrairement au texte) donc lors du zoom/pincement pour zoomer le texte sera déformé. Cela ne se produirait pas s'il s'agissait d'un texte réel.
- Les navigateurs "Retina" n'afficheront pas les images de texte aussi clairement que les appareils non rétiniens.
- Les images sont plus grandes que le texte, c'est donc une augmentation du temps de chargement des pages et des demandes du serveur.
- Les traducteurs de page (tels que Google Translate) ne seront pas en mesure de traduire le texte de l'image, et la localisation/internationalisation future sera rendue plus difficile à cause de cela.
- L'enregistrement de la page dans des navigateurs hors ligne (tels que Pocket) peut ignorer complètement le texte de l'image.
- Le contenu ne sera pas reconnu dans la recherche interne, donc les personnes recherchant sur votre site Web les termes mentionnés dans le texte de l'image ne seront pas trouvées sur la page de résultats
- Maintenabilité - Si vous devez apporter des modifications au texte, vous changez simplement le texte! Vous ne pouvez pas modifier le texte à l'intérieur d'une image à moins d'avoir le fichier d'origine avec lequel l'image a été créée ainsi que le programme qui l'a créée. Donc, si l'image a été créée dans Photoshop, vous auriez besoin du fichier Photoshop d'origine ainsi que de l'application Photoshop pour modifier le texte.
- Les utilisateurs ne pourront pas copier et coller à partir d'une image.
Avantages
- Cela gardera votre concepteur heureux (jusqu'à ce qu'il le voit sur un appareil qui n'est pas le même que celui sur lequel il l'a conçu).
À moins qu'il ne s'agisse d'un logo d'entreprise, il n'est pas vraiment nécessaire d'avoir des images sous forme de texte.
Avec des techniques telles que l'utilisation de font-face vous pouvez fournir la police réelle au navigateur des utilisateurs.
Il n'est pas conseillé d'utiliser des images comme texte alors que ce texte doit réellement être lu et frise la paresse.
Jakob Nielsen dans ses livres "Eyetracking Web Ergonomie", déconseille de placer du texte sur des images ou un arrière-plan texturé dans des publicités car seulement 35% des gens le regarderont.
Cela pourrait être une bonne mais ancienne solution pour ajouter du texte aux images pour empêcher les utilisateurs de copier des données. De nos jours, vous pouvez empêcher la copie sur des sites/vous pouvez également rendre les éléments non sélectionnables.
Une autre chose clé à noter, c'est qu'en utilisant du texte dans les images, vous ajoutez éventuellement plus de travail pour changer n'importe quel élément. Je peux sembler être un partisan de angular.js mais en l'utilisant, on peut simplement obtenir dynamiquement le même effet, par la liaison de données bidirectionnelle, et cela crée une meilleure expérience pour l'utilisateur!