2.5.2 图片优化 `next/image` 组件

文档摘要

2.5.2 图片优化组件 2.5.2 图片优化组件在现代 Web 开发中，图片是不可或缺的组成部分。然而，未优化的图片可能会严重影响网站的性能，导致页面加载速度慢、用户体验差等问题。Next.js 提供了组件，旨在简化图片优化流程，并提供开箱即用的性能提升。为什么使用？组件提供了一系列优化策略，旨在提升图片加载速度和用户体验：自动图片优化：自动优化图片大小、格式和质量，无需手动处理。懒加载：只在图片进入视口时才加载，减少初始页面加载时间。响应式图片：根据设备屏幕大小提供不同尺寸的图片，避免浪费带宽。现代图片格式支持：支持 WebP 等现代图片格式，提供更好的压缩率和质量。防止布局偏移：自动计算图片宽高，防止图片加载后页面布局发生偏移。