如何自动搞定全站图片的alt属性？

桃扇骨 2022-02-22 00:24 432阅读 0赞

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”，然后填写必要的信息。

![\\"\\"][5c83b883ef746.png]

等待平台启动一个计算机视觉实例，在实例启动后就可以使用API密钥。

![\\"\\"][5c83b8a3ebe31.png]

现在开始进入有趣的部分！出于演示的目的，我将使用普通的JavaScript代码。对于其他语言，你可以查看文档。

你可以直接复制和粘贴下面的代码，只需要替换占位符就可以了。

好吧，让我们来看看AI服务的一些关键术语。

位置：这是在获取订阅密钥之前选择的服务的订阅位置。如果由于某种原因忘记了位置，可以转到“Overview”页面，并在“Endpoint”下找到它。

![\\"\\"][5c83b8e3860d3.png]

订阅密钥：这是为插件解锁服务的密钥，可以在“Keys”页面中获得。其中有两个，但使用哪一个并不重要。

图片URL：这是需要获取alt文本的图片的路径。请注意，发送给API的图片必须满足特定的要求：

*  文件类型必须是JPEG、PNG、GIF、BMP；
 *  文件大小必须小于4MB；
 *  尺寸应该大于50×50像素。

## 易如反掌 ##

感谢这些大公司为开发人员开放他们的服务和API，现在任何人都可以相对轻松地使用计算机视觉。作为一个简单的演示，我将下面的图片上传给Azure Computer Vision API。

![\\"\\"][5c83b91a5e059.png]

这个服务返回以下这些详细信息：

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