页面加载性能之使用正确的图片尺寸

我们总是会忘记缩小图片尺寸,直接应用到项目中。这种图片看上去很正常,但实际上既浪费了用户的流量,也影响了页面性能。

找出不正确尺寸的图片

Lighthouse是首选,执行一下Performance Audit,根据结果可以找到需要调整尺寸的图片列表。

确定正确的图片尺寸

此处提供了2种策略:上策和下策。两者都能提升性能,上策需要多花时间去理解和实施,但带来的体验和性能的提升是非常明显的。下策则是可以很快实施的方案。

稍微了解下CSS的单位

CSS给HTML元素的尺寸定义了两类单位:

  • 绝对单位: 在所有设备上展示的尺寸都是固定不变的,如: px等。
  • 相对单位: 会有一个参照物,相对于这个来设置的尺寸,如: em,rem,vw,vh等。

下策

根据图片尺寸的单位:

  • 相对单位: 调整图片大小至所有设备均可适用,如果是手机网页,一般以iphone6的屏幕大小为准,375的设备宽度,准备图片的时候用750px的宽度。
  • 绝对单位: 按图片的实际尺寸来调整,根据使用你的产品的用户高分屏的占比,如果3x的用户比较多,就准备3x图,如果2x比较多,则准备2x图。

上策

根据图片尺寸的单位:

  • 相对单位: 使用响应式图片,根据不同的屏幕尺寸,提供不同尺寸的图片,之后的文章会介绍。
  • 绝对单位: 使用 srcset 和 sizes 属性,在不同DPI的屏幕上提供不同尺寸的图片,以保证高清度。

调整图片大小

ImageMagick 是首选的CLI工具,对开发而言,这个比GUI的工具效率要高很多。

以下命令可以将图片调整成原始大小的25%:

convert flower.jpg -resize 25% flower_small.jpg

以下命令可以将图片调整成200*100的固定大小:

# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg

# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg

如果你要同时转换多个图片,可以写一个脚本来执行CLI。

验证效果

每次调整完尺寸,都用Lighthouse来测试,避免遗漏。

总结

偷懒的做法是,所有设备上都采用2x图片,也就是下策,花费时间不多,但这种优化还是会对一些3x的DPI手机屏幕造成略微的模糊,如果是4x的DPI,则会特别模糊。如果有时间的话,还是使用上策来保证对每一个用户都提供最优的性能和体验。

参考

  • https://web.dev/serve-images-with-correct-dimensions/
  • https://web.dev/serve-responsive-images/

你可能感兴趣的:(Web前端性能优化,web,performance,optimization)