乐趣区

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

咱们总是会遗记放大图片尺寸,间接利用到我的项目中。这种图片看上去很失常,但实际上既节约了用户的流量,也影响了页面性能。

找出不正确尺寸的图片

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-…
  • https://web.dev/serve-respons…
退出移动版