Web開發人員和內容編輯人員經常會忘記或忽略了img標簽的alt屬性，這是一個可以提升網站可訪問性和SEO性能的重要部分，這個屬性通常用來描述圖片：

???\u0026lt;img src=\u0026quot;/cute/sloth/image.jpg\u0026quot; alt=\u0026quot;A brown baby sloth staring straight into the camera with a tongue sticking out.\u0026quot; \u0026gt;

如果你經常在網絡上發布內容，你就應該知道，為圖片提供描述性文本是一件很枯燥的事情。當然，如果只有幾張圖片倒沒什么問題，但如果我們說的是數百或數千張圖片呢？你該怎么辦？

讓我們來看看使用谷歌、IBM和微軟等公司提供的計算機視覺和圖像識別服務自動為圖片生成描述性文本的一些可能性。

alt屬性的文本有什么用？

alt屬性是一小段HTML代碼，用于描述頁面上顯示的圖片，但在Web開發和編輯內容時經常被忽略。它是如此的不起眼，以至于它似乎對普通用戶沒有任何影響，但它確實具有非常重要的用途：

• 屏幕閱讀器的Web可訪問性：假設我們有一個包含大量圖片的頁面，但沒有一張圖片包含了alt屬性文本。使用屏幕閱讀器進行沖浪的用戶只能聽到“image”這個詞，這對他們來說這不是很有用。他們只知道這是一張圖片，除此之外沒有其他任何信息。如果有了alt屬性文本，屏幕閱讀器就可以幫助視障人士“看到”圖片里有什么，以便更好地理解頁面的內容。有人說一張圖片勝過千言萬語，但如果沒有alt屬性文本，這些用戶就錯失了這些千言萬語。

• 如果無法加載圖片，就顯示文本：Web似乎是絕對可靠的，就像紐約一樣，從來不需要睡覺，但錯誤的連接確實是存在的，如果發生這種情況，圖片往往無法被正確加載，并且出現“損壞”。alt文本是一種安全措施，它會顯示在頁面上出現“損壞”圖像的位置，為用戶提供后備內容。

• SEO性能：圖片的alt文本也有助于提升SEO性能。雖然它并不能讓網頁的搜索排名更靠前，但它也是提升SEO性能的一個考慮因素。

在了解了這些重要性之后，希望你能夠在開發和內容編輯期間加入正確的alt文本。但是，試圖為大量積壓的圖像進行詳細描述可能是一項艱巨的任務，特別是如果你的時間很緊迫或者奔忙于多個項目之間。

如果有一種方法可以在上傳圖片時應用alt文本該有多好！如果有辦法檢查頁面是否缺少alt屬性，并自動填充它們，那該有多好！

解決方案來了！

計算機視覺（或圖像識別）實際上已經出現了相當長一段時間。谷歌、IBM和微軟等公司都提供了自己的公開API，開發人員可以利用這些功能來識別圖像以及圖像中的內容。

有些開發人員已經在使用這些服務，并創建了自己的插件來生成alt文本。以Sarah Drasner的生成器為例，它演示了如何使用Azure的計算機視覺API為上傳的圖片或URL鏈接的圖片創建alt文本。

Jacob Peattie開發了一個自動alt文本插件，這也是一個使用了Azure計算機視覺API的WordPress插件。它基本上是工作流的一個補充，允許用戶上傳圖片并自動生成alt文本。

人工智能的介入

我曾經嘗試過一些人工智能服務，我敢說，Azure計算機視覺生成的結果是最好的。谷歌和IBM提供的服務肯定也有他們的專長，它們仍然可以識別出圖像并得到正確的結果，但微軟的服務非常好，非常準確，以至于我認為沒有必要再去考慮其他選項。

創建圖像識別插件非常簡單。首先，訪問微軟Azure Computer Vision。你需要登錄或創建帳戶，這樣才能獲取插件所需的API密鑰。

進入儀表盤后，搜索并選擇“Computer Vision”，然后填寫必要的信息。

等待平臺啟動一個計算機視覺實例，在實例啟動后就可以使用API密鑰。

現在開始進入有趣的部分！出于演示的目的，我將使用普通的JavaScript代碼。對于其他語言，你可以查看文檔。

你可以直接復制和粘貼下面的代碼，只需要替換占位符就可以了。

var request = new XMLHttpRequest();request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1\u0026amp;language=en', true);request.setRequestHeader('Content-Type', 'application/json');request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');request.send(JSON.stringify({ \u0026quot;url\u0026quot;: \u0026quot;[IMAGE_URL]\u0026quot; }));request.onload = function () {? ? var resp = request.responseText;? ? if (request.status \u0026gt;= 200 \u0026amp;\u0026amp; request.status \u0026lt; 400) {? ? ? ? // Success!? ? ? ? console.log('Success!');? ? } else {? ? ? ? // We reached our target server, but it returned an error? ? ? ? console.error('Error!');? ? }? ? console.log(JSON.parse(resp));};request.onerror = function (e) {? ? console.log(e);};

好吧，讓我們來看看AI服務的一些關鍵術語。

位置：這是在獲取訂閱密鑰之前選擇的服務的訂閱位置。如果由于某種原因忘記了位置，可以轉到“Overview”頁面，并在“Endpoint”下找到它。

訂閱密鑰：這是為插件解鎖服務的密鑰，可以在“Keys”頁面中獲得。其中有兩個，但使用哪一個并不重要。

圖片URL：這是需要獲取alt文本的圖片的路徑。請注意，發送給API的圖片必須滿足特定的要求：

• 文件類型必須是JPEG、PNG、GIF、BMP；

• 文件大小必須小于4MB；

• 尺寸應該大于50×50像素。

易如反掌

感謝這些大公司為開發人員開放他們的服務和API，現在任何人都可以相對輕松地使用計算機視覺。作為一個簡單的演示，我將下面的圖片上傳給Azure Computer Vision API。

這個服務返回以下這些詳細信息：

{? ? \u0026quot;description\u0026quot;: {? ? ? ? \u0026quot;tags\u0026quot;: [? ? ? ? ? ? \u0026quot;person\u0026quot;,? ? ? ? ? ? \u0026quot;holding\u0026quot;,? ? ? ? ? ? \u0026quot;cellphone\u0026quot;,? ? ? ? ? ? \u0026quot;phone\u0026quot;,? ? ? ? ? ? \u0026quot;hand\u0026quot;,? ? ? ? ? ? \u0026quot;screen\u0026quot;,? ? ? ? ? ? \u0026quot;looking\u0026quot;,? ? ? ? ? ? \u0026quot;camera\u0026quot;,? ? ? ? ? ? \u0026quot;small\u0026quot;,? ? ? ? ? ? \u0026quot;held\u0026quot;,? ? ? ? ? ? \u0026quot;someone\u0026quot;,? ? ? ? ? ? \u0026quot;man\u0026quot;,? ? ? ? ? ? \u0026quot;using\u0026quot;,? ? ? ? ? ? \u0026quot;orange\u0026quot;,? ? ? ? ? ? \u0026quot;display\u0026quot;,? ? ? ? ? ? \u0026quot;blue\u0026quot;? ? ? ? ],? ? ? ? \u0026quot;captions\u0026quot;: [? ? ? ? ? ? {? ? ? ? ? ? ? ? \u0026quot;text\u0026quot;: \u0026quot;a hand holding a cellphone\u0026quot;,? ? ? ? ? ? ? ? \u0026quot;confidence\u0026quot;: 0.9583763512737793? ? ? ? ? ? }? ? ? ? ]? ? },? ? \u0026quot;requestId\u0026quot;: \u0026quot;31084ce4-94fe-4776-bb31-448d9b83c730\u0026quot;,? ? \u0026quot;metadata\u0026quot;: {? ? ? ? \u0026quot;width\u0026quot;: 920,? ? ? ? \u0026quot;height\u0026quot;: 613,? ? ? ? \u0026quot;format\u0026quot;: \u0026quot;Jpeg\u0026quot;? ? }}

你可以從中選擇可能用于圖片的alt文本。如何構建這個功能取決于你：

• 你可以創建一個CMS插件，并將其添加到內容工作流中，當上載圖片并將其保存到CMS中時，會生成圖像的alt文本。

• 你可以開發一個JavaScript插件，如果加載的圖片缺少alt文，可以即時添加alt文本。

• 你可以創建一個瀏覽器擴展程序，當它發現網頁中的圖片缺少alt文本時，會自動為它們添加alt文本。

• 你可以編寫代碼來搜索現有數據庫或內容存儲庫，找出缺失的alt文本，并更新它們，或創建拉取請求做出相應的更改。

請注意，這些服務并非100％準確。它們有時候會返回低置信度和與主題完全不一致的描述。但是，這些平臺也在不斷學習和改進。畢竟，羅馬不是一天建成的。

英文原文：https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/

更多內容，請關注前端之巔。

會議推薦

2019年6月，GMTC全球大前端技術大會2019即將到來。小程序、Flutter、移動AI、工程化、性能優化…大前端的下一站在哪里？點擊下圖了解更多詳情。

總結

以上是生活随笔為你收集整理的如何自动搞定全站图片的alt属性？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。