Tim的资源站一、图片优化的关键点
- 图片格式
- 合适的尺寸
- 能够适配不同屏幕的尺寸
- 图片压缩要把握好平衡
- 图片加载的优先级
- 剩余的图片懒加载
二、图片格式的比较
JPG
-
优点
压缩比高，而且还能保持较好的画质 -
缺陷
强调纹理和边缘的图片会有锯齿感或者模糊，Logo就不太适合JPG -
适用场景
一些比较大的图，但又需要一定画质，例如：首页轮播图
优化工具推荐：imagemin
PNG
- 优点
细节比较丰富，支持透明度 - 缺点
体积比较大 - 适用场景
小体积精细度要求高的图片，例如：Logo、Icon
优化工具推荐：imagemin-pngquant
WebP
-
优点
拥有 PNG 的细节，但体积更小，同时还支持透明度 -
缺点
兼容性略差，参考 Can I use webP
三、图片加载优化
图片的懒加载优化（lazy loading）
- 原生的图片懒加载方案
使用以下代码判定浏览器是否支持：
'loading' in HTMLImageElement.prototype === true
用法：
<img loading="lazy" src="addr" />
- 第三方懒加载方案
使用渐进式图片
渐进式图片是 JPG 格式图片的另外一种形式，一般情况下使用的 BaseLine JPG 形式，图片加载时会自上而下横向扫描式的加载图片；而渐进式JPG会由模糊图片最终加载清晰图片。
渐进式图片的优点
优点是用户始终可以看到一个图片的全貌，用户等待的时间相对较短。
渐进式图片需要设计人员生成，具备一丁点的操作门槛。
渐进式图片的解决方案
使用响应式图片
Srcset 和 Sizes 属性
两者结合使用，可以指定不同视窗尺寸下加载不同尺寸的图片，参考Srcset和Sizes
picture 的使用
参考picture，兼容性还不是很好。
四、字体优化
什么是 FOIT 和 FOUT
FOIT（Flash of Invisible Text）和 FOUT（Flash of Unstyled Text）是指字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁。
使用 font-display
font-display 有五个属性值：auto（默认值）、block、swap、fallback、optional。
不同的值表明字体显示的不同方案，在三个不同的时间段所持续的时间不同，具体参考上图。
使用 AJAX/CSS + BASE64
优点是可以解决字体兼容性问题，但缺点也很明显：转码BASE64后，文件会偏大，而且还存在缓存问题。
