网页图片CSS进阶篇——优化图片，提升网页加载速度

说到提升网页中图片加载速度，一般立即想到的是给图片瘦身，比如减小图片尺寸，或者通过工具降低图片文件大小，比如png图片，可以利用在线压缩PNG图片网页工具，一般可以减少50%~60%的图片体积，基本保持图片显示质量不变。

现在，除了以往常见的jpg/png图片格式外，webp和avif是更优秀的图片压缩格式，现代浏览器大都已经支持，它可以在jpeg图片基础上进一步减少图片文件体积，并且保持相当优秀的图片质量。比如普通jpeg文件，以可接受同等图片质量为前提，转换成webp可以平均减少约30%左右体积，使用avif格式可以比jpeg平均降低约50%左右体积。webp和avif相比较，建议大家选用avif，因为webp是谷歌家的，avif是免费开源的。

这里推荐一个不错的在线jpg转avif工具网站。

以上所述，减少图片文件物理体积，只是提升网页加载速度的手段之一，还有没有其它方法呢？

当然是有，在某些特定场景下，图片文件本身已经确定是经过优化，但是由于某些原因，浏览器在对页面进行渲染时，却因为不知道图片的具体尺寸，导致渲染后的页面内容位置调整，从而带来额外的时间消耗。

具体来说，例如页面需要展示一张大图片，所谓大图片，是相对小尺寸的图片比如图标、头像、按钮之类，那种基本上占满整个页面宽度的图片，如果想做pc端和移动端自适应网页，就比较麻烦，因为你不能直接指定具体的图片宽度和高度（反正我水平不够，没有找到办法），这个时候，浏览器在渲染页面基本框架时，由于不知道图片的宽高，一般都直接先无视，不安排预留位置，导致等图片文件读取完毕开始显示的时候，造成页面内容的跳动。一方面给用户造成不适，另一方面由于需要重新渲染页面的其余受影响部分，造成页面整体加载时间的增加。

那么我们要如何做呢？可以采用背景图片的方法，因为背景图片可以很方便的按屏幕宽度的百分比指定显示比例，从而使得图片无论在pc的大屏幕上还是手机等移动终端的小屏幕上，都能比较得体的展示。具体做法就是先指定图片要显示的宽度占屏幕宽度的百分比，比如80%、90%等，然后指定图片的宽高比，从而让浏览器知道渲染图片的时候需要预留多大的位置给图片，这样，就避免了图片加载后页面的跳动。

下面以一张大图片为例（1920x1080），avif格式文件只有17.7kB，我们来看看css到底如何实现自适应屏幕。

点击演示按钮看实际效果。

注意：部分浏览器（比如微软的edge）不支持AVIF格式图片，所以演示时无法显示图片。