HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

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

  • 2019-03-12
  • 本文字数:2935 字

    阅读完需:约 10 分钟

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

Web 开发人员和内容编辑人员经常会忘记或忽略了 img 标签的 alt 属性,这是一个可以提升网站可访问性和 SEO 性能的重要部分,这个属性通常用来描述图片:


​​​<img src="/cute/sloth/image.jpg" alt="A brown baby sloth staring straight into the camera with a tongue sticking out." >
复制代码


如果你经常在网络上发布内容,你就应该知道,为图片提供描述性文本是一件很枯燥的事情。当然,如果只有几张图片倒没什么问题,但如果我们说的是数百或数千张图片呢?你该怎么办?


让我们来看看使用谷歌、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&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/


更多内容,请关注前端之巅。



会议推荐


2019 年 6 月,GMTC 全球大前端技术大会 2019 即将到来。小程序、Flutter、移动 AI、工程化、性能优化…大前端的下一站在哪里?点击下图了解更多详情。



2019-03-12 09:534958
用户头像

发布了 731 篇内容, 共 449.1 次阅读, 收获喜欢 2002 次。

关注

评论 1 条评论

发布
用户头像
2019-03-14 09:44
回复
没有更多了
发现更多内容

「GitLab篇」如何用Git平台账号登录建木CI

Jianmu

开源 持续集成 CI/CD 持续部署 流水线

LCD液晶屏和LED显示屏有什么区别?

Dylan

LED显示屏 户外LED显示屏 led显示屏厂家

阿里云 EMAS Serverless 重磅发布

hum建应用专家

云原生

发展靠扩大人力规模,而不是技术研发创新,国内软件行业如何破局?

龙归科技

开源项目 Idaas 龙归科技 统一软件市场 ArkID

自动化元数据管理的“七宗最”?

雨果

元数据

SAP AMDP 介绍 - ABAP 托管的 HANA 数据库过程

汪子熙

数据库 SAP abap 8月月更 AMDP

【IT运维】Linux运维需要掌握哪些技能?

行云管家

Linux 运维 linux运维 IT运维

MSE 费芮新金融行业标杆案例

阿里巴巴中间件

阿里云 微服务 云原生

开源一夏 |企业内部应用接入钉钉获取部门及人员信息

六月的雨在InfoQ

开源 钉钉 API 钉钉开放平台 8月月更

教育行业运维审计用什么堡垒机好?有什么作用?

行云管家

网络安全 教育 堡垒机 IT运维 运维审计

什么样的数据架构可以彻底解决企业数据孤岛的问题?

雨果

数据孤岛

Hadoop与数据湖是什么关系?终于有人说明白了!

雨果

hadoop 数据湖

即时通讯安全篇(十):IM聊天系统安全手段之通信连接层加密技术

JackJiang

网络安全 https 网络编程 即时通讯 SSL/TLS

【有奖评测局】阿里云容器镜像 ACR 测评团限时招募中!

阿里巴巴中间件

阿里云 云原生 容器镜像

技术开发人员:一款远超Hue的SQL工具!

雨果

sql

大型软件团队协作中的常见难题和避坑策略|ONES 研发管理大师课

万事ONES

2022年中国生鲜电商年度综合分析

易观分析

电商 生鲜

阿里的职级是如何上升的,是工作经验还是能力?(附阿里面试题)

程序知音

Java 阿里巴巴 java面试 后端技术 八股文

云会议玩法升级

sofiya

从入门到高手,数据从业者的成长一般都要经过哪些阶段?

雨果

数据工程师必备技能

企业引进外部专家合作开发时,如何保证数字资产既开放又安全?

ModelWhale

数字化转型 数据安全 资产安全 技术专家 协同开发

如何做好分支管理,保证高效CI/CD?

华为云开发者联盟

git 开发

零故障支持数百场重大会议成功举办,HW云会议做了这些事

科技怪咖

太强了!字节大佬的《设计模式宝典》越读越有意思!

退休的汤姆

Java、 面经 社招 Java工程师 秋招

MAUI + Masa Blazor 开发带自动更新功能的安卓App

MASA技术团队

.net blazor MASA MAUI Xamarin

1对1直播源码:运行多个任务,资源如何切换?

开源直播系统源码

软件开发 一对一直播源码 直播系统源码 语音连麦app

如何完美的进行数字化转型?

雨果

数字化转型

一箭双雕!刷完阿里P8架构师spring学习笔记+源码剖析,涨薪8K

退休的汤姆

Java 面试 阿里 Java工程师 spring、

Spring Security + Vue + Flowable 怎么玩?

江南一点雨

Java spring springsecurity flowable

ArkID 企业级开源 IDaaS/IAM 统一身份认证授权管理解决方案

龙归科技

开源项目 iam SSO Idaas

SAP Fiori Launchpad Tile,UI5 应用,和 PFCG Role 的对应关系

汪子熙

SAP Fiori Launchpad ui5 8月月更

如何自动搞定全站图片的alt属性?_大前端_Nino Ross Rodriguez_InfoQ精选文章