从Rathi的文章中获取我的提示，我着手解决以下问题：>图像替换技术过去很受欢迎。如今，这些用背景图像代替文本的方法通常会在Web开发人员中引起不良的说唱。我将研究本文稍后的一些原因，但是鉴于这种情况，我们可以使用哪些工具和最佳实践？
>图像替换技术只是过去的Web Design中的幽灵，还是在今天仍然有意义地使用了图像替换技术，而不必担心更丑陋的网络？
>轻松访问大量的自定义网络字体，对CSS @font-face属性的大量浏览器支持以及Typekit和Google字体（例如Typekit and Google字体）的字体流媒体服务都为您提供了巨大的力量，可以传达品牌，传达情感并制造一种品牌在网络上具有令人惊叹的版式的影响。
现代CSS的功能使控制透明度级别，在文本中添加文本阴影，混合模式甚至动画变得轻而易举 - 无需Photoshop或JavaScript Sleight。 下面的
只是您可以使用Web字体和CSS的一个示例：
>使用文本而不是文本图像的关键好处是：用户可以轻松调整文本大小并更改其颜色以满足其需求。
屏幕读取器可以访问文本和搜索引擎bot可以爬网和索引。
>另外，请考虑使用图标而不支持文本。真正的问题是，屏幕阅读器和搜索引擎爬网很难理解图标的含义。图标不是文本，而是它们代表
>文本。例如，现在熟悉的汉堡图标代表“菜单”一词，但它本身并不是“菜单”一词。因此，仅显示图标而不支持网络上的文本可能会引起严重的可访问性问题。在上面的两种情况下，目标是通过图像传达一些信息，而不会损害屏幕读取器和搜索引擎爬网访问其文本内容的访问。图像替换技术在过去有些可能，因此值得研究今天是否有更好的事情来完成这项工作，这是不久前的。
>以下是一些选项。
>
如果您检查了SitePoint网站徽标，则会看到此技术中的示例：
>
> SVG代码只是标记，并且具有标题和DESC元素以添加有意义的上下文，搜索引擎和辅助技术都可以访问它。您可以通过遵循LéonieWatson在SitePoint上的这些提示以及CSS-Tricks上的Heather Migliorisi来提高Inline SVG图形的可访问性。
> 根据定义和独立于解决方案，SVG图形是可扩展的，这意味着它们看起来都很棒。>尽管不适合显示徽标，但图标字体还是在网站上显示图标的好方法。在线图标库（例如Glyphicons and Font Awesome）使您的易用性使您大大促成了网络上图标字体的大量存在。
>图标字体只是文本，因此您可以控制其外观，用户可以将它们调整到他们的喜好中。对于没有随附文本的有意义的图标，您可以使用WAI-ARIA技术添加可访问的信息。
例如，假设您使用字体很棒来显示一个链接的汉堡图标来揭示隐藏的菜单。仅添加图标的标记使其完全看不见或对屏幕读者毫无意义：
>将标题属性添加到链接读取器的链接作品，但具有有时不受欢迎的工具提示的副作用，向用户提供了无辅助技术的网站导航。
<span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span>></span><span><span></a</span>></span></span>
> aria-label属性使读者可以访问汉堡图标字体，并摆脱不需要的工具提示：
>但是，正如Alex Walker和Seren Davies所指出的那样，在网络上实现图标字体具有许多陷阱，您需要充分了解。
<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>
>
tag
>使用标签显示具有合适alt属性的徽标的图像是一种可接受且广泛使用的方法。
您需要考虑的几个小缺点是：
>另外一个HTTP请求，这可能会影响网站的加载时间。在不久的将来，当HTTP/2完全实施时，这将成为一个问题。
>避免问题的分离是无视的：如果您决定更改文本的外观，则必须通过更改标记而不是CSS。 当用户增加大小时，栅格图像看起来像素化，尽管SVG图形没有提出此问题。
上面的要点一直是导致过去广泛使用的各种图像替换技术的动机之一。
>关于图像替代技术的大多数研究材料，我遇到的在线日期可以追溯到2000年代初期或2000年代中期。 2013年11月，HTML5样板删除了各种CSS图像更换技术。这些是重要的线索，表明将图像更换正处于弃用状态。
> css允许您直到几年前才能在图像编辑软件上做的事情。最重要的是，借助Web字体和矢量图形很容易获得，您为什么要与图像更换这样巧妙的黑客接触？>
其他重要的考虑因素反对使用图像更换技术涉及其对搜索引擎排名的潜在负面影响。Google有明确的指导方针，反对隐藏网页上的文本，而无视它们可能会导致严重的处罚。这是Google的网站认为在当今时代在网络上隐藏文本的可疑方式：
使用白色背景上的白色文本。
>
“…并非所有隐藏的文本都被视为欺骗性。例如，如果您的网站包括搜索引擎难以访问的技术，例如JavaScript，图像或Flash文件，则使用这些项目的描述性文本可以改善您的网站的可访问性。只要没有关键字填充或恶意意图，就可以根据Google的指南来考虑的图像替换>>>>。如何向Google机器人传达您的诚意并不直接，但是SEO专家提出的一个很好的建议是确保您隐藏的文本与网站上显示的文本完全相同。
那不是全部。 Yoast的Joost de Valk是SEO领域的权威声音，是图像更换的支持者之一，尤其是作为网站上使用Sprites的一种可访问方式。
在他的CSS图像更换中，Matt是怎么回事？De Valk对Google的软件工程师Matt Cutts的疑问，后者对使用图像更换的立场。 您会说，De Valk的作品可以追溯到2009年，即Web Design世界中的史前史。 但是，至少据我所知，它的作者没有写任何可以让我们认为他改变主意的内容，在撰写本文时，Yoast网站上的徽标仍在使用图像更换。
从可访问性的角度来看，至少在少数情况下，图像更换仍然可以接受。这并不奇怪，因为这些方法背后的主要驱动器是使您可以在网络上显示美学上抛光但完全访问的文本内容的可能性。
> W3C工作组的注释，只要用户可以轻松地切换到替代的，仅文本呈现相同内容的文本，以防实现不应按预期工作。
>>软件开发人员洛根·弗兰肯（Logan Franken）为有限使用图像替换技术提供了合理的理由，即使在今天，他们仍然可以在IMG标签或图标字体中显示SVG时仍可以发挥作用，而无需在网站上随附文本。
最后，您会发现，替换图像仍然与改善当今尖端SVG技术的可访问性有关。在标题为>示例5的部分中，不适合那些未提前链接文本的情况，因为它会动态添加到页面上。 Migliorisi显示了如何在此处使用图像更换来保存一天。 结论
今天，图像更换看起来相当骇人听闻，而Google对隐藏文本的立场并不能鼓励其使用。但是，有一些边缘情况，主要涉及可访问性考虑因素，当图像更换技术仍然可以找到有限的应用程序时，希望不会长时间。
您对此做了什么，图像更换是死亡还是活着？让我在评论中收到您的来信！>
>
> Fahrner Image retacement（fir）技术如何工作？ Fahrner图像替换（FIR）技术涉及用图像替换文本元素，而不会影响文本的可访问性。这是通过使用CSS将文本放置在屏幕外的文本来完成的，从而允许图像取代。但是，该技术因其对屏幕读取器和搜索引擎优化的影响而受到批评。什么是Gilder/Levin Image替换（GIR）技术？ （GIR）技术涉及使用背景图像并使用CSS隐藏文本。该技术比其他技术更适合SEO友好，但它因其对屏幕阅读器的影响而受到批评。
> Scott Kellum方法涉及使用文本内部属性以将文本推开屏幕，允许将图像显示在其位置。该技术比其他技术更容易访问，但是它因其对SEO的影响而受到批评。
>
是否有任何替代图像替换技术的选择？有图像替换技术的替代方法。其中包括使用CSS3属性，例如文本阴影和盒子阴影，使用SVG图像以及使用Web字体。这些替代方案可以提供类似的结果，而不会在图像替换技术的缺点的情况下提供。
>>
以上是是时候对图像更换技术说实话了的详细内容。更多信息请关注PHP中文网其他相关文章！
