4.图片-灵析社区

一、为什么要设置 alt 属性？

为什么要设置 alt 属性，原因是：

增强可访问性：用户有视力障碍，可以通过屏幕阅读器浏览图片描述
图片加载无法的替换文本：

例如图片路径、文件名拼错，资源下载失败

用户使用不支持图片的浏览器，如 Lynx

用户主动关闭图片显示以减少数据的传输

SEO：便于网页搜索、图片搜索等索引图片和排名

二、alt 属性应该填写什么内容？

alt 属性填写内容根据图片类型决定

装饰类型

填写空 alt。此类图片不应使用<img> 标签，CSS background images 是更优方案

文本类型

填写文本本身。应避免将文本放到图像里，CSS 修饰文本是更优方案

链接类型

提供无障碍连接文本。如链接到 XX

内容类型

搜索引擎会通过图片 alt title figure 及上下文，机器或人工标注读取图片信息

屏幕阅读软件也会朗读上下文

所以，如果已经在上下文中说明了图片，`alt` 可以留空

如果没有，`alt` 应是对图片本身内容的描述，语句通顺。不应过长，更不应堆砌关键字

三、为什么要指定图片高度和宽度属性？

width 和 height 用来声明图片的宽度和高度

如果图片地址错误或者下载被禁用，浏览器会显式地为图片留下一定空间
无需等待图片元数据下载完毕，先行渲染图片占位符，加载更快速更流畅，避免版式跳动
width 和 height 应始终设置真实尺寸，不应该使用 HTML 属性来改变图片的大小
如果需要改变图片尺寸，应使用 CSS 而不是 HTML

四、title 属性应该填写什么内容？

类似于超链接，title 属性用来提供进一步的支持信息

省略该属性：这个元素与最近祖先的标题仍然是相关的，可以用作元素的提示信息
值为空字符串：这个元素与最近祖先的标题是不相关的，不应用于这个元素的提示信息
与 alt 同时存在，alt 用于图片描述，title 用于进一步支持信息，比如点击放大

五、如何设置图片的说明文字？

设置图片的说明文字的方法如下：

在图片的上下文中描述图片
使用图片的 alt 标签描述图片
使用图片的 title标签配合祖先标题描述图片

省略该属性：这个元素与最近祖先的标题仍然是相关的，可以用作元素的提示信息

值为空字符串：这个元素与最近祖先的标题是不相关的，不应用于这个元素的提示信息

与 alt 同时存在，alt 用于图片描述，title 用于进一步支持信息，比如点击放大

使用 <div> 和 <p> 组合

<div>
  <img>
  <p>图片说明文字</p>
</div>

使用 <figure> 和 <figcaption> 组合

<figure>
  <img>
  <figcaption>图片说明文字</figcaption>
</figure>

六、HTML 图像和 CSS 图像的区别是什么？

HTML 图像

指用 <img> 标签插入的图像，可以设置 alt 属性，提供备选文本，可以被屏幕阅读器、蜘蛛识别

CSS 图像

指用 background-image 和其它 background-* 属性共同放置的图像。用来提升视觉效果，没有语义，不能提供备选文本，难以被屏幕阅读器、蜘蛛识别

如果图像对内容有意义，利于 SEO，提高可访问性，应使用 HTML 图像

如果图像对内容没意义，装饰作用，或者故意提高图片被采集、保存的难度，应使用 CSS 图像

七、什么是矢量图形，它和位图的区别是什么？

矢量图形

使用算法定义，包含了图形和路径的定义，电脑可以根据这些定义计算出它们在屏幕上渲染时应该呈现的样子。SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。

位图

使用像素网格定义，包含了每个像素额位置和它的色彩信息。流行的位图格式包含 Bitmap（ .bmp ）PNG（ .png ）JPEG（ .jpg ）和 GIF（ .gi``f ）

区别

矢量图通常体积更小，放大后，效果很好且清晰，透明无毛边。

位图通常体积较大，放大后，图片变得像素化，透明有毛边。

八、什么是 SVG？

SVG，全称是 Scalable Vector Graphics，可缩放矢量图形，是用于描述二维的矢量图形，基于 XML 的标记语言，是基于文本由 W3C 自 1999 年起开始开发的开放网络标准

SVG 能够优雅而简洁地渲染不同大小的图形
SVG 与 CSS、DOM、JavaScript 和 SMIL 等其它网络标准无缝衔接
SVG 可以被搜索、索引、编写脚本和压缩，利于 SEO
SVG 可以使用任何文本编辑器和绘图软件创建和编辑
SVG 能被无限放大而不失真或降低质量
SVG 相较于同样的位图体积更小
SVG 可以适应样式 / 脚本，图像每个组件都是可以通过 CSS 或 JavaScript 编写样式的元素

九、SVG 对比光栅图形的优缺点是什么？

SVG 对比光栅图形的优点：
SVG 能够优雅而简洁地渲染不同大小的图形
SVG 与 CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接
SVG 可以被搜索、索引、编写脚本和压缩，利于 SEO
SVG 可以使用任何文本编辑器创建和编辑
SVG 能被无限放大而不失真或降低质量
SVG 相较于同样的位图体积更小
SVG 可以适应样式 / 脚本，图像每个组件都是可以通过 CSS 或 JavaScript 编写样式的元素

SVG 对比光栅图形的缺点：

SVG 容易变得复杂，文件大小会增加，复杂 SVG 会在浏览器中，会占用很长的处理时间
SVG 可能比栅格图像更难创建，具体取决于您尝试创建哪种图像
SVG 不被旧版浏览器（IE8 及以下浏览器）支持

由于上述原因，光栅图形更适合照片那样复杂精密的图像

十、如何在 HTML 中引入 SVG？

（1）方式一：使用 <img> 标签或设置 background: url() 或 background-image: url() 属性

设置 <img> 的 src 属性嵌入 SVG

优点：

快速、熟悉的图像语法与 alt 属性中提供的内置文本等效
可以通过在 <a> 元素嵌套 <img> 使图像轻松成为超链接

缺点：

无法使用 JavaScript 操作图像
使用 CSS 控制 SVG 内容，必须在 SVG 代码中包含内联 CSS 样式

从 SVG 文件调用的外部样式表不起作用

不能使用 CSS 伪类来重设图像样式（如 :focus）

（2）方式二：使用 <svg> 标签

在文本编辑器中打开 SVG 文件，复制 SVG 代码，并将其粘贴到 HTML 文档中

优点：

SVG 内联减少 HTTP 请求，可以减少加载时间
SVG 可以分配 class 和 id，并使用 CSS 修改样式。无论是在 SVG 中，还是 HTML 文档中的 CSS 样式规则。可以使用任何 SVG 外观属性作为 CSS 属性
SVG 内联是唯一让你在 SVG 图像上使用 CSS 交互（如：:focus ）和 CSS 动画的方法
SVG 可以包在 <a> 元素中，使其成为超链接

缺点：

SVG 只适用于在一个地方使用，多次使用会导致资源密集型维护
SVG 会增加 HTML 文件的大小
SVG 内联后，不能像普通图片一样被缓存
SVG 的 <foreignObject> 元素中包含回退，但支持 SVG 浏览器仍然会下载任何后备图像。需要考虑支持过时的浏览器，增加额外开销是否真的值得

（3）方式三：使用 <iframe> 标签嵌入 SVG

不推荐，缺点：

<iframe> 支持回退机制

切换 <iframe> 的 src 后，点浏览器后退按钮，<iframe> 回退，主页面不会回退

同源策略

除非 SVG 和您当前的网页具有相同的 origin

否则不能在主页面上使用 JavaScript 来操纵 SVG

十、如何创建响应式的图片？

对于装饰性图片可以使用 CSS 创建响应式图片

image-set 支持声明一组图像的地址，分辨率和类型 type 例如

background-image: image-set("1x.png" 1x, "2x.png" 2x, "3x.png" 3x)

*  `media queries` 支持媒体查询

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 264dpi) {
  /* 高分辨率下,如 iPad 2 的背景图 */
  background-image: url("3x.png")
}

对于非装饰性图片，可以使用 HTML 标签创建响应式图片

添加 <meta> 标签，强制浏览器，特别是手机浏览器以设备宽度来加载网页

<meta name="viewport" content="width=device-width">

分辨率切换：不同的尺寸

设置 srcset 属性，声明浏览器允许的图像集和每个图像的大小

格式：文件名 + 半角空格 + 图像自身宽度（以像素为单位，写作 w ）

多张图像用英文半角逗号 , 分隔

设置 sizes 属性，声明的设定媒体条件为真时最佳尺寸图像

格式：媒体查询条件 + 半角空格 + 图像填充槽的宽度

多个媒体查询条件用英文半角逗号 , 分隔

槽的宽度支持固定值 px em 或者相对于视口的长度 vw 不支持百分比

最后一个槽的宽度不设置媒体查询条件，当没有任何一个媒体条件为真时生效

浏览器如何匹配响应式图片

查询设备宽度

检查 sizes 列表中媒体查询条件

找到第一个为真的条件对应槽的宽度

找到没有条件为真时对应槽的宽度

加载 srcset 列表中引用的最接近槽的宽度的图像

Chrome 总是优先加载已缓存的图像

分辨率切换：相同的尺寸，不同的分辨率

书写 CSS 属性，声明图像的显示宽度 width

设置 srcset 属性，格式：文件名 + 半角空格 + 像素密度描述符（ x 符号）

根据当前设备的像素密度加载图像

美术设计：不同内容的图像

使用 <pictrue> 标签

包裹 <img> 标签作为默认值

包裹多个 <source> 标签

设置 <media> 属性，声明媒体查询条件

设置 srcset 属性，声明条件为真时显示图片。可以设置多张不同分辨率图像

可选设置 sizes 属性，声明的设定媒体条件为真时最佳尺寸图像

美术设计：不同格式的图像，优先使用现代图像格式，并兼容老浏览器

使用 <picture> 标签

包裹 <img> 标签作为默认值

设置 type 属性，声明文件类型（MIME Type）

设置 srcset 属性，声明条件为真时显示图片。可以设置多张不同分辨率图像

可选设置 sizes 属性，声明的设定媒体条件为真时最佳尺寸图像

十一、为什么不能使用 JavaScirpt 来实现响应式图片？

图片会在主解析器加载和解析 JavaScript 之前预加载，用于加快页面加载速度

当用 JavaScript 检测可视窗口的宽度，想要改变图片时，原来 <img> 标签中的 src 引用的图片已经被加载，从而产生了重复加载违背了响应式图像的理念
使用 JavaScript 较难判断当前浏览器支持的图片类型，实现响应式加载图片类型
使用 HTML 的响应式图片属性

可以让浏览器自动选择最合适的图片预加载，无需等待 CSS 和 JavaScript 加载和解析

开启缓存的场景下，优先返回满足条件已被缓存的图片，进而节省流量，提高加载速度

十二、如何调试响应式？

使用浏览器的开发者工具可以调试响应式

通过 Firefox 的 Tools > Web Developer > Responsive Design View 或 Chrome 的 DevToos 的 Toggle device toolbar 模拟不同设备，或者人工调整屏幕宽度
判断响应式图片配置是否已经生效

相同图片，通过 DOM 检查工具，查看当前加载的图片宽度

通过 Network 面板，查看当前下载的图片地址

Chrome 浏览器需要在 Network 面板下勾选 Disable cache，禁用缓存
避免 Chrome 优先选择缓存图片，而不是响应式地适配图

4.图片-灵析社区

一、为什么要设置 alt 属性？

二、alt 属性应该填写什么内容 ？

三、为什么要指定图片高度和宽度属性 ？

四、title 属性应该填写什么内容 ？

五、如何设置图片的说明文字 ？

六、HTML 图像和 CSS 图像的区别是什么 ？

七、什么是矢量图形，它和位图的区别是什么 ？