Il est temps d'être honnête à propos des techniques de remplacement d'image

Les plats clés

• Les techniques de remplacement d'images, autrefois populaires pour transporter du contenu textuel sous une forme artistique tout en maintenant l'accessibilité, sont désormais souvent critiquées en raison de la disponibilité d'outils modernes comme les polices personnalisées et les outils CSS puissants.
• L'utilisation de texte au lieu d'images de texte présente plusieurs avantages. Il permet aux utilisateurs de redimensionner facilement le texte et de modifier sa couleur, il est accessible aux lecteurs et aux bots de moteur de recherche, et il respecte la séparation des préoccupations.
• Il y a des cas où les polices Web et le CSS pourraient ne pas être suffisantes pour atteindre le résultat souhaité, par exemple lorsque la police du logo n'est pas disponible sur le Web ou que les illustrations graphiques ne peuvent pas être recréées avec CSS. Dans ces cas, l'utilisation d'un élément graphique peut être nécessaire.
• en ligne SVG est un excellent moyen d'inclure un logo sur une page Web lorsque les polices Web et le CSS ne peuvent pas être exploitées. Il est accessible à la fois aux moteurs de recherche et aux technologies d'assistance, indépendants et indépendants de la résolution, et ne nécessite pas afficher les demandes HTTP supplémentaires.
• Le remplacement d'images est en passe d'être déprécié en raison des capacités du CSS moderne, des polices Web et des graphiques vectoriels. Cependant, il existe encore des cas de bord, impliquant principalement des considérations d'accessibilité, où les techniques de remplacement d'image peuvent toujours trouver une application limitée.

Dans une pièce antérieure ici à SitePoint sur une histoire de remplacement d'image CSS, Baljeet Rathi passe en revue un certain nombre de techniques de remplacement d'images, chacune de plus ingénieuse que la suivante. Ces techniques étaient toutes axées sur la résolution d'un problème - comment transmettre le contenu textuel sous une forme magnifiquement artistique sur le Web tout en le gardant accessible, à la fois aux personnes et aux moteurs de recherche. Atteindre un tel objectif dans un monde de conception Web sans les polices personnalisées facilement disponibles et puissants outils CSS d'aujourd'hui était tout à fait une exploit.

En prenant mon point de l'article de Rathi, je me suis mis à aborder les questions suivantes:

• Les techniques de remplacement d'images étaient très populaires. Aujourd'hui, ces méthodes de remplacement du texte par des images d'arrière-plan obtiennent souvent un mauvais rap parmi les développeurs Web. Je vais examiner certaines des raisons pour lesquelles plus tard dans cet article, mais étant donné que c'est le cas, quels outils et les meilleures pratiques pouvons-nous utiliser à la place?
• Les techniques de remplacement de l'image sont-elles juste des fantômes du passé de conception Web, ou les techniques de remplacement de l'image peuvent-elles encore être utilisées de manière significative aujourd'hui sans crainte de rendre le Web plus laid?

Commençons par regarder le meilleur outil pour le travail.

Meilleur outil pour le travail: Fonts Web et CSS

Si votre contenu est du texte, utilisez du texte, n'utilisez pas d'images de texte.

Avec les outils à votre disposition aujourd'hui, vous aurez pratiquement besoin de aucune image afin de relayer le contenu textuel sous une belle forme.

Accès facile à un nombre stupéfiant de polices Web personnalisées, une excellente prise en charge du navigateur pour la propriété CSS @ Font-Face et les services de streaming de police comme Typekit et Google Fonts vous donnent tous une puissance énorme pour communiquer une marque, transmettre des émotions et faire un Impact avec une typographie étonnante sur le Web.

Les capacités du CSS moderne rendent un jeu d'enfant à contrôler les niveaux de transparence, à ajouter des ombres de texte, des modes de mélange et même une animation à votre texte - pas de slogan Photoshop ou JavaScript requis.

Vous trouverez ci-dessous un exemple de ce que vous pouvez faire avec les polices Web et CSS:

Le site Web Smart Designs affiche une excellente typographie sans aucune image, seulement des polices Web et CSS.

Les avantages clés de l'utilisation du texte au lieu des images de texte sont:

• Les utilisateurs peuvent facilement redimensionner le texte et changer sa couleur pour répondre à leurs besoins.
• Les lecteurs d'écran peuvent accéder à des robots de texte et de moteur de recherche peuvent ramper et l'indexer.
• Il s'agit de l'approche sémantiquement correcte et respecte la séparation des préoccupations, dont la pertinence est également préconisée par les recommandations du W3C pour répondre aux critères de réussite des directives d'accessibilité au contenu Web (WCAG).
• Si vous utilisez des polices personnalisées, il est facile de fournir des polices en matière de toile sur le Web comme une secours dans la pile de polices CSS.

Cependant, comme beaucoup d’entre vous le savent, cette approche ne fonctionne pas pour chaque situation. Alors…

Et si les polices Web et les CSS ne sont pas toujours à la hauteur du travail?

Il y a des situations où les polices Web et le CSS ne suffisent pas pour atteindre le résultat que vous recherchez et que vous vous tournez vers les graphiques est logique. Le logo d'un site Web en est un exemple.

Les logos font partie intégrante d'une marque, ce qui signifie que vous ne pouvez pas modifier, même légèrement, un logo sans compromettre l'identité de la marque. Il peut y avoir des cas où vous ne pouvez pas reproduire le logo exactement à l'aide de polices Web et de CSS. Peut-être que la police du logo n'est pas facilement disponible sur le Web, ou l'œuvre graphique ne peut pas être fidèlement recréée uniquement avec CSS. L'utilisation d'un élément graphique semble être la voie à suivre. Cependant, bien que vous souhaitiez que les utilisateurs voient l'élément graphique affiché sur votre site Web, vous voulez également que les lecteurs d'écran et les robots aient accès à la marque que le logo représente.

Envisagez également l'utilisation d'icônes sans texte de support. Le vrai problème ici est que les lecteurs d'écran et les robots de recherche ont du mal à comprendre ce que signifie l'icône. Les icônes ne sont pas du texte, ils sont plutôt pour du texte. Par exemple, l'icône de hamburger désormais familière représente le mot «menu», mais ce n'est pas lui-même le mot «menu». Par conséquent, l'affichage de l'icône sans support sur le Web peut soulever de graves problèmes d'accessibilité.

Dans les deux cas ci-dessus, l'objectif est de transmettre certaines informations par le biais d'une image sans compromettre l'accès par les lecteurs d'écran et les robots de recherche de moteurs à son contenu textuel. Les techniques de remplacement d'image ont rendu cela quelque peu possible dans le passé, il vaut donc la peine de se tourner vers si quelque chose de mieux est là-bas aujourd'hui pour faire le travail, qui n'était pas largement disponible il y a quelque temps.

Voici quelques options.

en ligne svg

Aujourd'hui, un excellent moyen d'inclure un logo dans une page Web lorsque vous ne pouvez pas tirer parti de la puissance des polices Web et CSS est en ligne SVG. SVG signifie Scalable Vector Graphics, qui est un format graphique basé sur XML. La technique qui m'intéresse consiste à créer un graphique SVG du logo et à vider son code directement dans le document HTML. Si vous exportez votre SVG à partir d'un éditeur comme Illustrator ou Inkscape, vous pouvez aller plus loin et optimiser sa sortie en se débarrassant du balisage redondant.

Si vous inspectez le logo du site Web SitePoint, vous verrez un exemple de cette technique en action:

SVG en ligne utilisé pour créer le logo sur le site Web SitePoint.

Ce n'est pas tout. Inline SVG fonctionne également sur les merveilles lorsqu'ils sont utilisés comme moyen d'ajouter des icônes à l'air net à une page Web. Si vous êtes impatient d'en savoir plus, consultez le cours SVG de Chris Coyer sur CSS-Tricks, qui comprend également quelques tutoriels vidéo sur les icônes SVG en ligne.

Voici quelques-unes des raisons pour lesquelles l'utilisation de SVG en ligne est cool:

• Le code SVG n'est que du balisage, et avec un élément de titre et de desc pour ajouter un contexte significatif, les moteurs de recherche et les technologies d'assistance peuvent y accéder. Vous pouvez intensifier l'accessibilité de vos graphiques SVG en ligne en suivant ces conseils de Léonie Watson sur SitePoint et Heather Migliorisi sur CSS-Tricks.
• Les graphiques SVG sont évolutifs par définition et indépendants de la résolution, ce qui signifie qu'ils ont l'air génial, peu importe combien les utilisateurs zooment sur eux.
• Les graphiques SVG en ligne ne nécessitent pas les demandes HTTP supplémentaires, ce qui est idéal pour les performances du site Web.
• Vous pouvez affiner l'apparence et le comportement des graphiques SVG en ligne à l'aide de CSS et JavaScript, y compris l'animation de parties uniques de vos œuvres et même la transmission dynamique de leurs formes. Pour en savoir plus sur les techniques d'animation SVG, lisez l'animation avec SVG en ligne de Jordan Wade.
• Contrairement aux polices d'icônes, votre site Web ne manquera jamais de charger les icônes SVG en ligne car le code SVG est déjà dans le document HTML.

Une autre bonne nouvelle est que SVG en ligne a un excellent support de navigateur; Seul IE8 manque de soutien à Svg en ligne

Fontes d'icônes

Bien qu'il ne soit pas adapté à l'affichage d'un logo, les polices d'icônes ont apprécié la popularité comme un excellent moyen d'afficher des icônes sur un site Web. La facilité d'utilisation rendue possible par les bibliothèques d'icônes en ligne comme les glyphicons et la police géniale a grandement contribué à la présence massive de polices d'icônes sur le Web.

Les polices d'icônes ne sont que du texte, donc vous pouvez contrôler leur apparence avec CSS et les utilisateurs peuvent les redimensionner à leur goût.

Pour les icônes significatives sans texte d'accompagnement, vous pouvez ajouter des informations accessibles à l'aide de techniques WAI-Aria.

Par exemple, disons que vous utilisez Font Awesome pour afficher une icône de hamburger liée pour révéler un menu caché. L'ajout de la balisage de l'icône rend totalement invisible ou dénué de signification des lecteurs:

<span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span>></span><span><span></a</span>></span></span>

L'ajout d'un attribut de titre au lien fonctionne pour les lecteurs d'écran, mais a pour effet secondaire de montrer une infraction parfois indésirable aux utilisateurs naviguant sur le site Web sans technologies d'assistance.

L'attribut Aria-Babel rend la police d'icône Hamburger accessible aux lecteurs d'écran et se débarrasse de l'info-bulle indésirable:

<span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span> aria-label<span>="Menu"</span>></span><span><span></a</span>></span></span>

Cependant, comme l'ont souligné Alex Walker et Seren Davies, la mise en œuvre des polices d'icônes sur le Web a un certain nombre de pièges, dont vous devez être pleinement conscient.

Pour en savoir plus sur ce qu'il faut pour s'attaquer aux problèmes d'accessibilité qui accompagnent l'utilisation de polices d'icônes, les polices d'icônes accessibles à l'épreuve des balles de Zach Leatherman du groupe de filament sont une révélation.

la balise

Affichage de l'image d'un logo à l'aide d'une balise avec un attribut ALT approprié est une approche acceptable et largement utilisée.

L'attribut Alt contient le texte, en prenant ainsi en charge les problèmes d'accessibilité, l'élément tire une représentation graphique fantaisie du texte dans le document pour l'affichage.

à la fois le W3C, leurs didacticiels d'accessibilité Web et Google Webmasters approuvent cette méthode.

quelques petits inconvénients que vous devez considérer sont:

• Une autre demande HTTP, ce qui peut avoir un impact sur le temps de chargement du site Web. Cela deviendra moins un problème dans un avenir proche, lorsque HTTP / 2 sera pleinement implémenté.
• La séparation des préoccupations est ignorée: si vous décidez de modifier l'apparence du texte, vous devrez le faire en modifiant le balisage, pas le CSS.
• Les images raster peuvent sembler pixélisées lorsque les utilisateurs augmentent leur taille, bien que les graphiques SVG ne présentent pas ce problème.

Les points ci-dessus ont été parmi les motivations menant aux différentes techniques de remplacement d'image si largement utilisées dans le passé.

Mais, pourquoi ces techniques sont-elles désapprouvées aujourd'hui? Avons-nous vraiment fini avec eux?

L'affaire contre le remplacement d'images

La plupart du matériel de recherche sur les techniques de remplacement d'images que j'ai rencontrés en ligne dates au début ou au milieu des années 2000. En novembre 2013, le chaudron HTML5 a abandonné toutes sortes de techniques de remplacement d'images CSS. Ce sont des indices significatifs suggérant que le remplacement de l'image est en bonne voie d'être déprécié.

CSS vous permet de faire des choses que vous ne pouviez faire que sur le logiciel d'édition d'image jusqu'à il y a quelques années à peine. En plus de cela, avec des polices Web et des graphiques vectoriels facilement disponibles, pourquoi chercheriez-vous un hack aussi intelligent que le remplacement d'image?

D'autres considérations importantes contre l'utilisation des techniques de remplacement d'images concernent leur impact négatif potentiel sur les classements des moteurs de recherche.

Google a des directives claires contre la cachette de texte sur les pages Web, et les ignorer pourrait entraîner de graves pénalités. Voici ce que le site Web de Google considère les moyens suspects de cacher du texte de nos jours sur le Web:

• en utilisant du texte blanc sur un fond blanc.
• Localisation du texte derrière une image.
• en utilisant CSS pour positionner le texte hors écran.
• Régler la taille de la police sur 0.

Les éléments de la liste ci-dessus figurent dans la plupart des techniques de remplacement d'images populaires, ce qui nous rend tous les méfiant de les utiliser.

Cependant, la situation n'est pas claire. Google souligne que le texte caché " pour manipuler les classements de recherche de Google [l'accent est mis sur le mien] peut être considéré comme trompeur et constitue une violation des directives de Webmaster de Google." De plus, Google continue en disant que:

«… Tous les texte cachés ne sont pas considérés comme trompeurs. Par exemple, si votre site comprend des technologies que les moteurs de recherche ont du mal à accéder, comme JavaScript, des images ou des fichiers flash, l'utilisation de texte descriptif pour ces éléments peut améliorer l'accessibilité de votre site. »

Tant qu'il n'y a pas de Mots-clés Farging ou une intention malveillante, le remplacement d'image pourrait être considéré comme conforme aux directives de Google. Comment communiquer votre bonne foi à Google Bots n'est pas simple, mais une bonne suggestion des experts du référencement a proposé est de s'assurer que le texte que vous cachez est exactement le même que le texte affiché sur votre site Web.

Ce n'est pas tout. Joost De Valk de Yoast, certainement une voix faisant autorité dans le domaine du référencement, fait partie des partisans du remplacement d'images, en particulier comme un moyen accessible d'utiliser des sprites sur un site Web.

Dans son remplacement d'image CSS, What Is Up Matt ?, De Valk a été publié avec Matt Cutts, ingénieur logiciel chez Google, sur la position de ce dernier contre l'utilisation du remplacement d'image. Vous diriez que la pièce de De Valk remonte à 2009, préhistoire dans le monde de la conception Web. Pourtant, au moins à ma connaissance, son auteur n'a rien écrit qui pourrait nous faire penser qu'il a changé d'avis sur le sujet, et au moment de la rédaction de cet article, le logo sur le site Web Yoast est toujours affiché en utilisant Remplacement d'image.

Le remplacement d'images est toujours acceptable du point de vue de l'accessibilité, au moins dans quelques cas. Cela n'est pas surprenant puisque le principal entraînement derrière ces méthodes a été celui de rendre possible l'affichage de contenu textuel esthétique mais entièrement accessible sur le Web.

Une note du groupe de travail W3C approuve explicitement les techniques de remplacement d'image tant que les utilisateurs peuvent facilement passer à une autre présentation en texte uniquement du même contenu au cas où l'implémentation ne devrait pas fonctionner comme prévu.

Le développeur de logiciels Logan Franken est un cas raisonnable pour une utilisation limitée des techniques de remplacement d'image, même aujourd'hui, arguant qu'ils peuvent toujours jouer un rôle lors de l'affichage de SVG dans une étiquette IMG ou des polices d'icônes sans accompagner de texte sur les sites Web.

Enfin, vous constaterez que le remplacement d'images peut toujours être pertinent pour améliorer l'accessibilité de la technologie SVG de pointe aujourd'hui. Dans la section intitulée Exemple 5: Icône liée, avec du texte dynamique Dans les SVG accessibles, Heather Migliorisi souligne que l'utilisation de l'attribut Aria-Label, tout en étant approprié lorsque le texte de liaison accompagnant une icon SVG en ligne est statique est statique statique est statique. , ne s'adresse pas aux situations dans lesquelles le texte du lien n'est pas connu à l'avance car il est ajouté dynamiquement à la page. Migliorisi montre comment le remplacement de l'image peut être utilisé avec fructualité ici pour sauver la journée.

Conclusion

Dans cet article, j'ai répertorié les outils et les meilleures pratiques que vous pouvez utiliser en ce moment comme alternative aux techniques de remplacement d'image si populaires dans les jours passés. Il s'agit notamment des polices personnalisées, CSS3 et SVG en ligne, qui n'étaient pas facilement disponibles ou bien prises en charge par les navigateurs dans le passé, ainsi que la bonne vieille balise avec un attribut ALT approprié.

Aujourd'hui, le remplacement d'images semble assez piraté et la position de Google sur le texte caché n'encourage pas son utilisation. Cependant, il existe des cas de bord, impliquant principalement des considérations d'accessibilité, lorsque les techniques de remplacement de l'image peuvent toujours trouver une application limitée, espérons-le pas longtemps.

Que faites-vous, le remplacement d'image est-il mort ou vivant? Laissez-moi vous entendre dans les commentaires!

Questions fréquemment posées (FAQ) sur les techniques de remplacement de l'image

Quels sont les différents types de techniques de remplacement d'images?

Il existe plusieurs techniques de remplacement d'image que les développeurs utilisent. Il s'agit notamment du remplacement d'image Fahrner (FIR), du remplacement d'image Leahy / Langridge (LLIR), du remplacement de l'image Phark (PIR), du remplacement d'image Gilder / Levin (GIR) et de la méthode Scott Kellum. Chacune de ces techniques a ses propres avantages et inconvénients, et le choix de la technique dépend des exigences spécifiques du projet.

Comment fonctionne la technique de remplacement d'image (FIR) Fahrner? La technique de remplacement d'image Fahrner (FIR) consiste à remplacer un élément de texte par une image sans affecter l'accessibilité du texte. Cela se fait en positionnant le texte hors écran à l'aide de CSS, permettant à l'image de prendre sa place. Cependant, cette technique a été critiquée pour son impact sur les lecteurs d'écran et l'optimisation des moteurs de recherche (SEO).

Quelle est la technique de remplacement d'image Leahy / Langridge (LLIR)?

La Leahy / Langridge La technique de remplacement d'image (LLIR) est une modification de la technique FIR. Il s'agit d'utiliser un élément de portée pour maintenir le texte, qui est ensuite caché à l'aide de CSS. Cela permet à l'image d'être affichée à sa place. L'avantage de cette technique est qu'il n'affecte pas les lecteurs d'écran ou le référencement.

En quoi la technique de remplacement de l'image Phark (PIR) diffère-t-elle des autres techniques?

Le remplacement de l'image Phark (PIR) La technique est une autre modification de la technique FIR. Cela implique de cacher le texte en le faisant la même couleur que l'arrière-plan, permettant à l'image d'être affichée à sa place. Cette technique est plus simple que les autres techniques, mais elle a été critiquée pour son impact sur le référence La technique (GIR) consiste à utiliser une image d'arrière-plan et à cacher le texte à l'aide de CSS. Cette technique est plus adaptée au référencement que les autres techniques, mais elle a été critiquée pour son impact sur les lecteurs d'écran.

Comment fonctionne la méthode Scott Kellum?

La méthode Scott Kellum implique l'utilisation d'un propriété text-indent pour pousser le texte hors écran, permettant à l'image d'être affiché à sa place. Cette technique est plus accessible que les autres techniques, mais elle a été critiquée pour son impact sur le référence Utilisez des images à la place du texte sans affecter l'accessibilité du texte. Cependant, ces techniques peuvent avoir un impact négatif sur les lecteurs de référencement et d'écran. Par conséquent, il est important de choisir la bonne technique pour chaque projet.

Comment puis-je choisir la bonne technique de remplacement d'image pour mon projet?

Le choix de la technique de remplacement d'image dépend des exigences spécifiques de votre projet. Vous devriez prendre en compte des facteurs tels que l'impact sur les lecteurs de référencement et d'écran, la complexité de la technique et la compatibilité avec différents navigateurs.

Y a-t-il des alternatives aux techniques de remplacement d'images?

Oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, Il existe des alternatives aux techniques de remplacement d'images. Il s'agit notamment de l'utilisation de propriétés CSS3 telles que Text-Shadow et Box-Shadow, à l'aide d'images SVG et à l'aide de polices Web. Ces alternatives peuvent fournir des résultats similaires sans les inconvénients des techniques de remplacement d'images.

Comment puis-je en savoir plus sur les techniques de remplacement d'images?

Il existe de nombreuses ressources disponibles en ligne pour en savoir plus sur les techniques de remplacement d'image. Il s'agit notamment de tutoriels, d'articles et de forums. Vous pouvez également apprendre du code source des sites Web qui utilisent ces techniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!