网页开发入门｜03 图片

上节课说到，通过给文本加上超链接，可以使多个网页立体的组织在一起，方便用户在任意位置打开新的页面，非常方便。

其实，超链接不止可以是文本（text），也可以是图片（image）。

所谓一图胜千言，图片在网页中的出现，极大的丰富了网页的表现力。

显然，图片既不是纯文本，也不是富文本，压根就不是文本。不是文本的内容该如何标记呢？图片又该如何放进网页中呢？

别急，本节课我们就来聊聊图片的故事。

像素与分辨率

我们在屏幕上看到的每一个图片，都是由很多很多个被称作像素（Pixel）的基本单位组成的，每个像素只能有一个颜色。

尽管每个像素只能有一个颜色，但当大量不同颜色的像素按照一定的分布组合在一起，就会在人脑中产生错觉，让我们联想到了曾见过的东西，以为在屏幕中看到了一幅图像。

一个图片有多少个像素呢？

当我们说一个图片的尺寸是1024*768时，说的就是这个图片一共有1024*768这么多个像素，这些像素每1024个排成一横排，一共有768排。

但图片的尺寸给人的感受并不是很稳定，同样一个图片在手机上和在电脑屏幕上，显然不一样大。

什么决定了图片的实际大小呢？

当然就是图片中单个像素的大小咯！因为单个像素实在太小了，所以通常我们会用分辨率PPI（Pixel per inch），即每一英寸有多少个像素来表示。

因为设备屏幕的实际大小是确定的，所以PPI越大，单个像素点就越小，可以显示的图片就越「高清」。当PPI超过200，人的肉眼就已经无法区分单个像素了，我们看到的图像就仿佛是连续的一样。能做到200ppi以上的屏幕，被称作视网膜屏Retina。

还因为设备屏幕的实际大小是确定的，所以分辨率也可以直接用屏幕能显示的最高清的图像尺寸来表示，比如说某显示器的分辨率是1920*1080，就是说它能完美显示的图像的最大尺寸是1920*1080。

分辨率还有一种常见的表达方式：把一横排可以放的最大像素个数，在千位四舍五入取整，称作几K。比如4K就是横排有将近4000个像素的意思。

位图与矢量图

当我们在分辨率很高的屏幕上，看一个尺寸很小的图片时，会因为太小了看不清楚，把它放得大一点看。一般情况下，这个图片会变得比较糊，像是打了马赛克一样。

这是因为我们常见的图片格式如jpg，png，.bmp都是一种位图（Bitmap），位图存储的是图片中每个像素的颜色。

当我们把一个位图放大的时候，图片中的单个像素会对应显示屏幕上的多个像素，屏幕上这些像素显示同一个颜色，看来就像锯齿一样。

为了解决这个问题，可以让图片文件不要记录每个像素的颜色，而是要记录生成颜色的算法，无论图片是多大都可以根据算法计算出来。

使用这种方法的图片格式称作矢量图（Vector），常见的有svg，ai等，通常用于Logo商标，icon图标，emoji表情等比较线条比较简单，经常需要缩放的图片。

动图

另外我们还见过一些会动的图片（不是视频噢），如gif是最常见的一种动图格式。

gif格式的文件会存储多张图片，每一张称作一帧。每秒钟播放多少张图图片，被称作帧率FPS（Frame per second），帧率越大播放的就越流畅，图片文件也就越大。

在网页中插入图片

为了方便日后的管理，让我们先在workspace中创建一个名为assets的文件夹，作为今后存放图片等资源文件的位置。

然后，将一个png图片和一个svg图片文件复制到assets中，我将使用的是icon.png和icon.svg。

你也可以通过点击下方的阅读原文，或者到gitee.com上搜索弦五，查看和获取本课程的全部代码和资源文件。

在网页中插入图片的标签是img，是图像image的缩写。

img标签与a标签类似，都需要使用额外属性来标记所引用文件的URL，在a标签里是href属性，在img标签里是src属性，src是来源source的缩写。

两者使用了不同的命名，我猜测原因是因为href只是表达了引用，而src表达的是还需要将引用的内容显示出来。

在workspace中再新建一个名为image.html的新文件，然后参考下方的示例代码，使用img标签插入图片：

<img src="assets/icon.png">

到浏览器里看一下，会发现图片已经显示出来了。

观察一下，img标签与之前了解到的b 、i、 a标签还有一个很大的区别，就是它不需要也不能包围任何的文字，因此img标签只有开始标签，没有结束标签。

这是因为在绝大多数的情况下，图片上的文字应该是图片本身的一部分。

如果真的需要在图片上面显示文字，则需要把图片设置为文字的背景，我们将在后续的课程中学习如何添加背景。

img标签还有一个很有用的属性alt，是替代方案alternative的缩写，如果因为网络不佳或者别的问题导致图片没能加载成功时，alt​属性的内容就成为了可以替代显示的内容。

我们可以添加上alt属性，并试着故意写错图片的文件名，看看效果。

<img src="assets/ic0n.png" alt="弦五说LOGO">

另外，alt属性还可以为浏览器提供可朗读的文本，以帮助有视觉障碍的人士了解网页中的内容。

调整图片的大小

img标签还提供了用于调整图片在浏览器中显示大小的属性 width宽和height高。

width和height的属性值是数字，单位是像素px

<img src="assets/icon.png" height="100">

<img src="assets/icon.png" width="300">

​上图中的图片糊掉了，因为使用的是png格式的位图。如果使用的是svg矢量图，则无论把图片放多大，图片都不会糊掉。

<img src="assets/icon.svg" width="300">

当只设置了width和height其中一个的时候，图片会保持原本的宽高比，如果两个属性都进行了设置，图像会发生形变。

<img src="assets/icon.png" width="300" height="200">

给图片添加超链接

让我们综合上一节学习的a标签，给图片加上超链接。

回忆一下，添加超链接的方法是使用a标签包围有超链接效果的内容，我们这里是给图片添加超链接，所以就是用a标签包围一个img标签。

<a href="hello.html"><img src="assets/icon.png"></a>

为了避免一行代码太长，并更加清晰的显示出标签间的包围关系，用下面的写法更好。

<a href="hello.html">
	<img src="assets/icon.png">
</a>

「行」和「缩进（每行正文开始前的空白）」在代码中是很重要的概念，在很多语言中如Python等，会基于「行」和「缩进」去理解代码，所以不能随意换行和修改缩进。
因而，在代码中因为屏幕宽度不够而自动换行的情况，并不会被当作换行，只有开发者手动进行换行，才算是新的一行代码。

刷新页面测试一下效果。

延伸阅读：抗锯齿

其实解决图片放大会出现锯齿的问题，除了矢量图外，还有一个解决办法：​就是在放大图片的时候，在不同颜色边界处，插入两个颜色的过渡色。

这种技术被称作抗锯齿AA（Anti-aliasing）。因为抗锯齿需要根据图片被缩放的大小进行实时计算，会对电脑的性能带来挑战，特别是显卡的性能。

被游戏玩家追捧的DLSS，就是一种抗锯齿技术。

DLSS可以通过人工智能算法，可以迅速的为锯齿边缘添加更加自然的过渡色，使得游戏可以运行在低分辨率下，然后通过专用的算法芯片放大图像，给玩家带来高清体验，而大幅降低对硬件性能的需求。

我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。