聊聊img元素

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

图像是Web中最常见的媒体属性之一,对于开发者而言,都知道使用HTML的<img>元素或CSS的background-image属性可以将图像放到Web上,但更多的时候都在聊,如何使用CSS相关的属性来处理Web中的图像,比如使用图像的适配、图像效果的处理等。事实上,HTML中的<img>元素也有很多属性对于我们在Web中使用图像起着重要的作用,特别是随着前端技术革新,<img>新增了一些新的属性,比如srcsetsizesloadingintrinsicsize等。

在这篇文章中,主要想和大家聊聊HTML的<img>中这些新增的属性对Web图像带来哪些方面的变化。如果你对CSS如何处理Web图像相关的知识感兴趣的话,可以阅读下面这些文章:

img元素的属性

HTML的<img>元素有很多个属性,有一些属性是不怎么常用的,甚至从未使用过,比如crossorigindecodingimportance等;有些属性是常用的,比如srcaltwidthheighttitle等;有些属性是在HTML5中新增加的,比如srcsetsizesloadingintrinsicsize等。其中有的属性是使用<img>必用的属性,比如 src,有些是用来优化性能的,比如loading,而且HTML中还有很多 全局属性 也可以运用于该元素上。

下面和大家一起聊聊其中一些有意思的属性。

指定图像源:src

Web开发者都知道使用<img>元素可以把图像放到Web页面或Web应用上。它是一个空元素(它不需要包含文本内容或闭合标签),只不过至少需要一个 src 属性来使用其生效。src属性包含了指向我们想要引入的图像路径,可以是相对路径绝对路径,就像<a>元素的href属性一样。

来看个例子,比如说你想把一个文件名为grapefruit-slice-332-332.jpg的图像,且它与你的HTML页面存放在相同的路径下,那么你可以像下面这样将图像嵌入到页面中:

<img src="grapefruit-slice-332-332.jpg" />

不过,在构建一个项目的时候,图像一般会放到一个文件目录为images下,那么引用的时候就像下面这样:

<img src="images/grapefruit-slice-332-332.jpg" />

上面示例中src采用的是相对路径方式,你也可以使用一个绝对路径地址,比如:

<img src="//www.w3cplus.com/sites/default/files/blogs/2020/2003/grapefruit-slice-332-332.jpg" />

但是这种方式是不被推荐的,这样做只会使浏览器做更多的工作,例如重新通过DNS再去寻找IP地址。通常我们都会把图像和HTML放在同一个服务器上。

很多时候会把图像存放在CDN,也可得到一个绝对路径

如果图片加载没有出问题的话,就会看到你想的图片效果,如果加载失败的话,会有一个缩略图标(不同的浏览器看到的效果会有所不同):

如果在加载或渲染图像时发生错误,且设置了至少一个 onerror 事件处理器来处理 error 事件,那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下,包括:

  • src 属性的属性值为空("")或者 null
  • src 属性的 URL 和用户正在浏览的页面的 URL 完全相同
  • 图像出于某些原因损坏了,从而无法加载
  • 图像的元数据被破坏了,无法检索它的分辨率/宽高,而且在 <img> 元素的属性中没有指定宽度和/或高度
  • 用户代理尚未支持该图片所用的格式

在使用src<img>指定加载的图片时,有的时候会使用JavaScript动态脚本来给src指定值,有的时候可能会给src指定一个空的或一些字符,比如像下面这样的一个示例:

<img src="//www.w3cplus.com/sites/default/files/blogs/2020/2003/grapefruit-slice-332-332.jpg" alt="" />
<img src="#" alt="" />
<img src="" alt="" />

在这种情况下的时候,对于src="#"来说,也会发生一个HTTP请求,而对于src=""不会发生任何的请求,如下所示:

注意,不同的浏览器下有所差异

添加备选文案:alt

接下来讨论的是alt属性。上面的示例中你可能发现了,图片加载失败之后不同的浏览器渲染出来的效果会有所不同。而我们使用img将图像嵌入到页面中时,很多时候是因为图像也是Web的一个重要信息。因此,就算是图片加载失败了,我们也希望用户能获取到相关的信息。这个时候我们就需要使用img的另一个重要属性,即 alt 属性。该属性的值是用来描述图像相关的信息或者用来描述图像在Web中上下文的相关信息。比如上面的示例我们可以修改成:

<img src="//www.w3cplus.com/sites/default/files/blogs/2020/2003/grapefruit-slice-332-332.jpg" alt="图像" />
<img src="#" alt="图像" />
<img src="" alt="图像" />

图像加载失败或不能正常显示的时候,浏览器就会把alt指定的值显示出来,只不过不同的浏览器下显示效果有所差异:

注意:无法使用CSS来对img加载失败时设置alt在浏览器中显示效果

那么为什么要使用altimg指定上下文信息呢?那是因为它可以派上用场的原因很多:

  • 用户有视力障碍,通过屏幕阅读器来浏览网页 。事实上,给图片一个备选的描述文本对大多数用户都是很有用的
  • 就像上面所说的,你也许会把图片的路径或文件名拼错
  • 浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器,例如 Lynx,这些浏览器会把图片替换为描述文本
  • 你会想提供一些文字描述来给搜索引擎使用,例如搜索引擎可能会将图片的文字描述和查询条件进行匹配
  • 用户关闭的图片显示以减少数据的传输,这在手机上是十分普遍的,并且在一些国家带宽有限且昂贵

你到底应该在 alt 里写点什么呢?这首先取决于为什么这张图片会在这儿,换句话说,如果这张图片没显示出来,会少了什么:

  • 装饰:如果图片只是用于装饰,而不是内容的一部分,可以写一个空的 alt="" 。例如,屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在HTML文件里, CSS 的background-image才应该用于插入装饰图片,但如果这种情况无法避免, alt=""会是最佳处理方案
  • 内容:如果你的图片提供了重要的信息,就要在alt文本中简要的提供相同的信息,甚至更近一步,把这些信息写在主要的文本内容里,这样所有人都能看见。不要写冗余的备选文本(如果在主要文本中将所有的段落都重复两遍,对于没有失明的用户来说多烦啊!),如果在主要文本中已经对图片进行了充分的描述,写alt=""就好
  • 链接:如果你把图片嵌套在<a>标签里,来把图片变成链接,那你还必须提供无障碍的链接文本。在这种情况下,你可以写在同一个<a>元素里,或者写在图片的alt属性里,随你喜欢
  • 文本:你不应该将文本放到图像里。例如,如果你的主标题需要有阴影,你可以用CSS来达到这个目的,而不是把文本放到图片里。如果真的必须这么做,那就把文本也放到alt

本质上,关键在于在图片无法被看见时也提供一个可用的体验,这确保了所有人都不会错失一部分内容。记得在A11Y系列教程中的《编写HTML时要考虑可访问性》一文中也特别讨论过,应该如何给alt添加描述内容。如果你实在不知道怎么给alt添加内容时,可以按照下图方式来做出相应的选择:

来看一个示例:

比如上图嵌入到Web时,我们就可以像下面这样给alt添加描述信息:

<!-- 不好的用法: 没有使用alt --> 
<img src="bird.png" /> 

<!-- 一般般的用法:显式设置了`alt`,但是个空值 --> 
<img src="bird.png" alt="" /> 

<!-- 好的用法:alt描述了图片的信息(公鸡),告诉用户这是只公鸡 --> 
<img src="bird.png" alt="公鸡" /> 

<!-- 更好的用法:alt描述了图片的信息(公鸡啼鸣),告诉用户这是只正在啼鸣的公鸡 --> 
<img src="bird.png" alt="公鸡啼鸣" /> 

<!-- 最好的用法:alt描述了图片的信息(红色冠公鸡啼叫),告诉用户这是只正在啼鸣的红色冠公鸡 --> 
<img src="bird.png" alt="红色冠公鸡啼鸣" />

HTML的规范中,也特别的提到过,img元素代表什么主要取决于 src属性和alt属性

图像标题:title

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/html5/img-in-web.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部