作者｜Nino Ross Rodriguez 譯者｜無明

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

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

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

alt 屬性的文本有什么用？

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

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

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

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

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

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

解決方案來了！

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

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

Jacob Peattie 開發了一個自動 alt 文本插件(https://wordpress.org/plugins/automatic-alternative-text/)，這也是一個使用了 Azure 計算機視覺 API 的 WordPress 插件。它基本上是工作流的一個補充，允許用戶上傳圖片并自動生成 alt 文本。

人工智能的介入

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

創建圖像識別插件非常簡單。首先，訪問微軟 Azure Computer Vision(https://azure.microsoft.com/en-au/services/cognitive-services/computer-vision/)。你需要登錄或創建帳戶，這樣才能獲取插件所需的 API 密鑰。

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

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

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

https://westus.dev.cognitive.microsoft.com/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fe

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

var request = new XMLHttpRequest();
request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1&language=en', true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');
request.send(JSON.stringify({ "url": "[IMAGE_URL]" }));
request.onload = function () {
var resp = request.responseText;
if (request.status >= 200 && request.status < 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。

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

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

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

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

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

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

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

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

英文原文：

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

課程推薦

前手淘前端負責人 winter 將在《重學前端》中幫助你以完備、體系化的方式搭建前端的知識架構，目前已經有 2.3w+ 用戶和 winter 一起重構前端。限時拼團僅需￥79，原價￥99。訂購后邀請好友購買，還可獲得￥24 現金返現。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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