是時候對圖像更換技術說實話了-css教學-PHP中文網

鑰匙要點

inline svg

標籤。 " >>在本文中，我列出了您現在可以使用的工具和最佳實踐，以替代圖像替換技術，在過去的幾天中如此受歡迎。其中包括自定義字體，CSS3和Inline SVG，過去瀏覽器不易獲得或良好支持，以及具有適當的Alt屬性的良好是時候對圖像更換技術說實話了

標籤。

>使用圖像更換技術的優點和缺點是什麼？使用圖像代替文本而不會影響文本的可訪問性。但是，這些技術可能會對SEO和屏幕閱讀器產生負面影響。因此，為每個項目選擇正確的技術很重要。

>如何為項目選擇正確的圖像替換技術？

圖像替換技術的選擇取決於您項目的特定要求。您應該考慮諸如對SEO和屏幕讀取器的影響，技術的複雜性以及與不同瀏覽器的兼容性等因素。

首頁

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</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>

登入後複製

>更多地了解解決使用圖標字體所需的可訪問性問題的信息，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字體。這些替代方案可以提供類似的結果，而不會在圖像替換技術的缺點的情況下提供。
>
>我如何了解有關圖像替換技術的更多信息？
>在線有許多資源可以在線可用來了解圖像替換技術。這些包括教程，文章和論壇。您還可以從使用這些技術的網站的源代碼中學習。
>