default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-06-03 06:07(UTC)

Demo

说到提升网页中图片加载速度,一般立即想到的是给图片瘦身,比如减小图片尺寸,或者通过工具降低图片文件大小,比如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格式图片,所以演示时无法显示图片。

CSScontent_copyCopy codes
body{height: 800px;}
.pic{
	margin: 0 auto;
	width: 80%;
	height: 0;
	padding-top: 45%;
	background: url(/images/coding/demo_1920x1080.avif) no-repeat;
	background-size: 100%;
	overflow: hidden;
}
htmlcontent_copyCopy codes
<div class='pic'></div>
<br/>
注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

visibility 1601


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel