是时候对图像更换技术说实话了-css教程-PHP中文网

首页

web前端

css教程

是时候对图像更换技术说实话了

William Shakespeare

Feb 20, 2025 am 09:06 AM

是时候对图像更换技术说实话了

钥匙要点

>图像替换技术曾经以艺术形式传达文本内容而在保持可访问性的同时流行，因此由于可用的现代工具（例如自定义字体和功能强大的CSS工具）而经常受到批评。
使用文本代替文本图像具有多个好处。它允许用户轻松调整文本大小并更改其颜色，屏幕读取器和搜索引擎机器人可以访问，并且尊重关注点的分离。
>在某些情况下，Web字体和CSS可能不足以实现所需的结果，例如，徽标的字体无法在网络上可用时，或者无法使用CSS重新创建图形艺术品。在这些情况下，可能需要使用图形元素。
内联SVG是在网页上包含徽标的好方法。搜索引擎和辅助技术都可以访问它，无关可扩展和解决方案，并且不需要额外的HTTP请求。由于现代CSS，Web字体和矢量图形的功能，

在Sitepoint的较早文章中，Baljeet Rathi经历了许多图像替换技术，每个图像替代技术都比下一个更具巧妙的技术。这些技术都集中在解决一个问题上 - 如何在网络上以精美的艺术形式传达文本内容，同时将其访问，包括人和搜索引擎。在没有随时可用的自定义字体和功能强大的CSS工具的情况下，实现了这样一个目标，这是一项壮举。是时候对图像更换技术说实话了

从Rathi的文章中获取我的提示，我着手解决以下问题：>

>图像替换技术过去很受欢迎。如今，这些用背景图像代替文本的方法通常会在Web开发人员中引起不良的说唱。我将研究本文稍后的一些原因，但是鉴于这种情况，我们可以使用哪些工具和最佳实践？

>图像替换技术只是过去的Web Design中的幽灵，还是在今天仍然有意义地使用了图像替换技术，而不必担心更丑陋的网络？

>今天使用的工具，您几乎不需要任何图像才能以美丽的形式传递文本内容。

>轻松访问大量的自定义网络字体，对CSS @font-face属性的大量浏览器支持以及Typekit和Google字体（例如Typekit and Google字体）的字体流媒体服务都为您提供了巨大的力量，可以传达品牌，传达情感并制造一种品牌在网络上具有令人惊叹的版式的影响。

现代CSS的功能使控制透明度级别，在文本中添加文本阴影，混合模式甚至动画变得轻而易举 - 无需Photoshop或JavaScript Sleight。下面的

只是您可以使用Web字体和CSS的一个示例：

用户可以轻松调整文本大小并更改其颜色以满足其需求。

屏幕读取器可以访问文本和搜索引擎bot可以爬网和索引。>

>这是语义上正确的方法，并尊重关注点的分离，W3C建议还提倡有关满足Web内容可访问性指南（WCAG）成功标准的相关性。

如果您使用的是自定义字体，则很容易提供网络安全字体作为CSS字体堆栈中的后备。
>

>另外，请考虑使用图标而不支持文本。真正的问题是，屏幕阅读器和搜索引擎爬网很难理解图标的含义。图标不是文本，而是它们代表

>文本。例如，现在熟悉的汉堡图标代表“菜单”一词，但它本身并不是“菜单”一词。因此，仅显示图标而不支持网络上的文本可能会引起严重的可访问性问题。

在上面的两种情况下，目标是通过图像传达一些信息，而不会损害屏幕读取器和搜索引擎爬网访问其文本内容的访问。图像替换技术在过去有些可能，因此值得研究今天是否有更好的事情来完成这项工作，这是不久前的。

以下是一些选项。

inline svg

今天，当您无法利用Web字体和CSS的功能是Inline SVG时，在网页中包含徽标的一种好方法。 SVG代表可扩展的向量图形，这是一种基于XML的图形格式。我感兴趣的技术涉及创建徽标的SVG图形，并将其代码直接倒入HTML文档。如果您从Illustrator或Inkscape之类的编辑器中导出SVG，则可以进一步迈出一步，并通过消除冗余标记来优化其输出。

如果您检查了SitePoint网站徽标，则会看到此技术中的示例：>

这是使用Inline SVG很酷的一些原因：

> SVG代码只是标记，并且具有标题和DESC元素以添加有意义的上下文，搜索引擎和辅助技术都可以访问它。您可以通过遵循LéonieWatson在SitePoint上的这些提示以及CSS-Tricks上的Heather Migliorisi来提高Inline SVG图形的可访问性。

> 根据定义和独立于解决方案，SVG图形是可扩展的，这意味着它们看起来都很棒。 >您可以使用CSS和JavaScript微调Inline SVG图形的外观和行为，包括为您的艺术品的单部分动画，甚至动态变形其形状。要了解有关SVG动画技术的更多信息，请阅读Jordan Wade的Inline SVG动画。

与图标字体相反，您的网站永远不会加载内联SVG图标，因为SVG代码已经在HTML文档中。。

>另一个好消息是，Inline SVG具有很好的浏览器支持。只有IE8缺乏对内联SVG的支持。

>图标字体

>尽管不适合显示徽标，但图标字体还是在网站上显示图标的好方法。在线图标库（例如Glyphicons and Font Awesome）使您的易用性使您大大促成了网络上图标字体的大量存在。

>图标字体只是文本，因此您可以控制其外观，用户可以将它们调整到他们的喜好中。

对于没有随附文本的有意义的图标，您可以使用WAI-ARIA技术添加可访问的信息。

例如，假设您使用字体很棒来显示一个链接的汉堡图标来揭示隐藏的菜单。仅添加图标的标记使其完全看不见或对屏幕读者毫无意义：>

>将标题属性添加到链接读取器的链接作品，但具有有时不受欢迎的工具提示的副作用，向用户提供了无辅助技术的网站导航。

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

> aria-label属性使读者可以访问汉堡图标字体，并摆脱不需要的工具提示：

但是，正如Alex Walker和Seren Davies所指出的那样，在网络上实现图标字体具有许多陷阱，您需要充分了解。

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

>更多地了解解决使用图标字体所需的可访问性问题的信息，Zach Leatherman的Fullprofform Profulproof from-trofectible访问的图标字体是一种大开眼界。

> 是时候对图像更换技术说实话了 tag

>使用是时候对图像更换技术说实话了标签显示具有合适alt属性的徽标的图像是一种可接受且广泛使用的方法。

> alt属性包含文本，从而照顾可访问性问题，元素将文本的精美图形表示形式拉到文档中以进行显示。

W3C，他们的Web可访问性教程和Google Webmasters认可此方法。

您需要考虑的几个小缺点是：

>另外一个HTTP请求，这可能会影响网站的加载时间。在不久的将来，当HTTP/2完全实施时，这将成为一个问题。

>避免问题的分离是无视的：如果您决定更改文本的外观，则必须通过更改标记而不是CSS。当用户增加大小时，

栅格图像看起来像素化，尽管SVG图形没有提出此问题。

上面的要点一直是导致过去广泛使用的各种图像替换技术的动机之一。

>
反对图像更换的情况

>关于图像替代技术的大多数研究材料，我遇到的在线日期可以追溯到2000年代初期或2000年代中期。 2013年11月，HTML5样板删除了各种CSS图像更换技术。这些是重要的线索，表明将图像更换正处于弃用状态。
> css允许您直到几年前才能在图像编辑软件上做的事情。最重要的是，借助Web字体和矢量图形很容易获得，您为什么要与图像更换这样巧妙的黑客接触？
>
其他重要的考虑因素反对使用图像更换技术涉及其对搜索引擎排名的潜在负面影响。
Google有明确的指导方针，反对隐藏网页上的文本，而无视它们可能会导致严重的处罚。这是Google的网站认为在当今时代在网络上隐藏文本的可疑方式：

使用白色背景上的白色文本。
- >在图像后面找到文本。
- 使用CSS将文本放置在屏幕外。
- 将字体尺寸设置为0。
- 上面图中列表中的项目纳入了大多数流行的图像替换技术，这使我们所有人都对使用它们的谨慎。但是，情况并不明确。 Google指出，隐藏的文本“
[强调是我的]可以看作是欺骗性的，并且违反了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显示了如何在此处使用图像更换来保存一天。结论

>在本文中，我列出了您现在可以使用的工具和最佳实践，以替代图像替换技术，在过去的几天中如此受欢迎。其中包括自定义字体，CSS3和Inline SVG，过去浏览器不易获得或良好支持，以及具有适当的Alt属性的良好标签。
>
今天，图像更换看起来相当骇人听闻，而Google对隐藏文本的立场并不能鼓励其使用。但是，有一些边缘情况，主要涉及可访问性考虑因素，当图像更换技术仍然可以找到有限的应用程序时，希望不会长时间。
您对此做了什么，图像更换是死亡还是活着？让我在评论中收到您的来信！
>

经常询问有关图像更换技术的问题（常见问题解答）
>图像替换技术的不同类型是什么？
>开发人员使用了几种图像替换技术。其中包括Fahrner图像更换（FIR），Leahy/Langridge图像替换（LLIR），phark图像替换（PIR），Gilder/Levin图像替换（GIR）和Scott Kellum方法。这些技术中的每一个都有其自身的优势和缺点，而且技术的选择取决于项目的特定要求。
>
> Fahrner Image retacement（fir）技术如何工作？ Fahrner图像替换（FIR）技术涉及用图像替换文本元素，而不会影响文本的可访问性。这是通过使用CSS将文本放置在屏幕外的文本来完成的，从而允许图像取代。但是，该技术因其对屏幕读取器和搜索引擎优化的影响而受到批评。
>
什么是Leahy/Langridge Image替换（LLIR）技术？图像替换（LLIR）技术是FIR技术的修改。它涉及使用跨度元素保存文本，然后使用CSS隐藏。这允许将图像显示在其位置。该技术的优点是它不影响屏幕读取器或SEO。
> phark映像替换（PIR）技术与其他技术有何不同？
>
> phark image replacement（pir）技术是FIR技术的另一种修改。它涉及通过与背景相同的颜色来隐藏文本，从而可以将图像显示在其位置。该技术比其他技术更简单，但是它因其对SEO的影响而受到批评。

什么是Gilder/Levin Image替换（GIR）技术？（GIR）技术涉及使用背景图像并使用CSS隐藏文本。该技术比其他技术更适合SEO友好，但它因其对屏幕阅读器的影响而受到批评。
>
Scott Kellum方法如何工作？
> Scott Kellum方法涉及使用文本内部属性以将文本推开屏幕，允许将图像显示在其位置。该技术比其他技术更容易访问，但是它因其对SEO的影响而受到批评。

>使用图像更换技术的优点和缺点是什么？使用图像代替文本而不会影响文本的可访问性。但是，这些技术可能会对SEO和屏幕阅读器产生负面影响。因此，为每个项目选择正确的技术很重要。
>如何为项目选择正确的图像替换技术？

>

图像替换技术的选择取决于您项目的特定要求。您应该考虑诸如对SEO和屏幕读取器的影响，技术的复杂性以及与不同浏览器的兼容性等因素。
>
是否有任何替代图像替换技术的选择？有图像替换技术的替代方法。其中包括使用CSS3属性，例如文本阴影和盒子阴影，使用SVG图像以及使用Web字体。这些替代方案可以提供类似的结果，而不会在图像替换技术的缺点的情况下提供。
>
>我如何了解有关图像替换技术的更多信息？
>在线有许多资源可以在线可用来了解图像替换技术。这些包括教程，文章和论坛。您还可以从使用这些技术的网站的源代码中学习。
>