logo

该视频仅会员有权观看

立即开通课程「Next.js 前端应用开发实践」权限。

¥
199
/ 年

理解Image 组件的图像优化

  • 页面上的图像原本大小为2.2MB,类型为GPIG,宽度为5184像素。
  • 使用浏览器开发者工具的网络选项卡可以查看和管理图像。
  • 通过NexGS框架优化,图像格式被转换为WEBP,大小减少至133KB。
  • 图像元素上有许多属性,并显示了当前渲染的尺寸以及固定尺寸(3840像素)。
  • NexGS会根据URL查询参数(如w和q)生成相应大小和质量的图像,质量值可以在1到100之间调整。
  • 图像质量通过quality属性设置,调至80会增大图像体积,因质量更高。