图像处理：画廊

一图胜千言，没图没人看。

1. 插入图片

HTML 使用 <img> 标签来显示图片。注意，它是一个空元素，不需要结束标签（不用写 </img>）。

2. 关键属性

src

这是图片的地址。可以是网络链接（http://...），也可以是本地文件（./images/cat.jpg）。

没它不行！ 没地址怎么找图？

alt

备胎。 当图片挂了、或者用户是盲人（使用屏幕阅读器）时，这段文字会出现。

"这里本来有一只可爱的猫"

width / height

控制图片的显示大小。单位默认是像素 (px)。

警告： 只设一个值，浏览器会按比例缩放。如果两个都设且比例不对，图片会变形（变胖或变瘦）。

3. 流量谋杀案

🛑

不要把一张 10MB 的 4K 高清大图，用 width="50" 缩成一个小图标显示！

虽然它看起来小了，但用户还是得下载完整的 10MB 数据。这是对用户流量的谋杀！请先用修图软件把图片缩小。