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

找出不正确尺寸的图片

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/Linuxconvert flower.jpg -resize 200x100 flower_small.jpg# Windowsmagick 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...