文章目录1. 使用 next/image 组件基本用法2. 自动优化3. 图像优化配置配置图像优化选项4. 图片裁剪和缩放常见的布局类型5. 外部图像源的优化6. 加载策略7. 图像优化的 URL8. 在开发环境中禁用图像优化Next.js组件扩展 HTML 元素以提供Image尺寸优化使用 WebP 等现代图像格式自动为每个设备提供正确大小的图像。视觉稳定性 预防布局偏移加载图像时自动。更快的页面加载仅当图像使用本机浏览器延迟加载进入视口时加载图像并带有可选的模糊占位符。资产灵活性按需调整图像大小甚至存储在远程服务器上的图像。1. 使用next/image组件Next.js的next/image组件帮助你自动优化图像的加载、尺寸和格式。通过它你可以自动生成适配不同屏幕的图像并且支持 WebP、AVIF 等高效格式的转换。基本用法importImagefromnext/image;constMyComponent()(divImage src/path/to/image.jpgaltDescriptionwidth{500}height{300}//div);exportdefaultMyComponent;src图像的路径支持静态资源和远程 URL比如外部 CDN 图像。alt图像的替代文本利于 SEO 和可访问性。width和height设置图像的尺寸。Next.js 根据这些值自动生成最适合的图像。2. 自动优化当使用next/image组件时Next.js 会自动对图像进行优化自动选择合适的格式Next.js 会根据用户的浏览器和设备支持的图像格式来选择最合适的格式如 WebP、AVIF 等。按需加载默认情况下图像会采用懒加载lazy loading。这意味着图像只会在用户滚动到它们时才开始加载减少初始页面加载时间。尺寸适配next/image会根据设备的不同自动选择合适的图像尺寸。例如手机设备只会加载较小的图像。3. 图像优化配置可以通过next.config.js或next.config.ts来配置图像优化的行为。配置图像优化选项module.exports{images:{domains:[example.com],// 允许优化的外部域名formats:[image/avif,image/webp],// 支持的图像格式deviceSizes:[640,750,1080,1920,2048],// 设备尺寸列表imageSizes:[16,32,48,64,128]// 各种图片尺寸}};domains指定外部图片源CDN、图片托管服务等以便 Next.js 对这些图片进行优化。formats允许支持的图像格式如image/avif或image/webp它们通常提供更高的压缩率。deviceSizes指定支持的设备尺寸Next.js 会为每个尺寸生成不同的图像版本适配不同设备。imageSizes指定不同的图像尺寸供浏览器选择。4. 图片裁剪和缩放next/image支持图像的自动裁剪和缩放。可以通过layout属性来控制图像的布局方式。常见的布局类型intrinsic图像按其原始尺寸显示。fixed图像的尺寸固定为提供的width和height。responsive图像会根据父容器的宽度动态调整大小。fill图像会完全填充父容器可能会拉伸或压缩。例如Image src/path/to/image.jpgaltDescriptionwidth{800}height{600}layoutresponsive// 图像会自适应容器宽度/5. 外部图像源的优化Next.js 支持从外部图像源如 CDN 或其他图像服务加载图像并自动进行优化。通过配置next.config.js中的domains参数你可以允许 Next.js 优化来自指定域名的图像。例如module.exports{images:{domains:[images.unsplash.com,cdn.example.com]}};这样你就能使用来自这些域名的外部图像并确保它们经过优化。6. 加载策略Next.js会自动进行懒加载但你也可以手动设置图像的加载策略。priority用于标记一个图像为优先加载这对于首屏图像特别重要。例如Image src/path/to/image.jpgaltDescriptionwidth{500}height{300}priority// 标记为优先加载/loading通过loadinglazy或loadingeager来控制图像的加载行为。默认情况下是lazy。首屏图像应该使用loadingeager加载策略以确保它们在首屏加载时能够快速显示。7. 图像优化的 URLNext.js使用专有的图像优化服务来处理图像这意味着图像的 URL 会变成一个包含优化参数的 URL。例如/path/to/image.jpg - /_next/image?url%2Fpath%2Fto%2Fimage.jpgw500q75w图像宽度。q图像质量0 到 100 之间。8. 在开发环境中禁用图像优化在开发环境中图像优化功能是禁用的这样可以加快本地开发的速度。如果需要启用它可以通过修改next.config.js来开启图像优化。module.exports{images:{disableStaticImages:false// 启用静态图像优化}}; 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目 Next.js 图像优化组件
文章目录1. 使用 next/image 组件基本用法2. 自动优化3. 图像优化配置配置图像优化选项4. 图片裁剪和缩放常见的布局类型5. 外部图像源的优化6. 加载策略7. 图像优化的 URL8. 在开发环境中禁用图像优化Next.js组件扩展 HTML 元素以提供Image尺寸优化使用 WebP 等现代图像格式自动为每个设备提供正确大小的图像。视觉稳定性 预防布局偏移加载图像时自动。更快的页面加载仅当图像使用本机浏览器延迟加载进入视口时加载图像并带有可选的模糊占位符。资产灵活性按需调整图像大小甚至存储在远程服务器上的图像。1. 使用next/image组件Next.js的next/image组件帮助你自动优化图像的加载、尺寸和格式。通过它你可以自动生成适配不同屏幕的图像并且支持 WebP、AVIF 等高效格式的转换。基本用法importImagefromnext/image;constMyComponent()(divImage src/path/to/image.jpgaltDescriptionwidth{500}height{300}//div);exportdefaultMyComponent;src图像的路径支持静态资源和远程 URL比如外部 CDN 图像。alt图像的替代文本利于 SEO 和可访问性。width和height设置图像的尺寸。Next.js 根据这些值自动生成最适合的图像。2. 自动优化当使用next/image组件时Next.js 会自动对图像进行优化自动选择合适的格式Next.js 会根据用户的浏览器和设备支持的图像格式来选择最合适的格式如 WebP、AVIF 等。按需加载默认情况下图像会采用懒加载lazy loading。这意味着图像只会在用户滚动到它们时才开始加载减少初始页面加载时间。尺寸适配next/image会根据设备的不同自动选择合适的图像尺寸。例如手机设备只会加载较小的图像。3. 图像优化配置可以通过next.config.js或next.config.ts来配置图像优化的行为。配置图像优化选项module.exports{images:{domains:[example.com],// 允许优化的外部域名formats:[image/avif,image/webp],// 支持的图像格式deviceSizes:[640,750,1080,1920,2048],// 设备尺寸列表imageSizes:[16,32,48,64,128]// 各种图片尺寸}};domains指定外部图片源CDN、图片托管服务等以便 Next.js 对这些图片进行优化。formats允许支持的图像格式如image/avif或image/webp它们通常提供更高的压缩率。deviceSizes指定支持的设备尺寸Next.js 会为每个尺寸生成不同的图像版本适配不同设备。imageSizes指定不同的图像尺寸供浏览器选择。4. 图片裁剪和缩放next/image支持图像的自动裁剪和缩放。可以通过layout属性来控制图像的布局方式。常见的布局类型intrinsic图像按其原始尺寸显示。fixed图像的尺寸固定为提供的width和height。responsive图像会根据父容器的宽度动态调整大小。fill图像会完全填充父容器可能会拉伸或压缩。例如Image src/path/to/image.jpgaltDescriptionwidth{800}height{600}layoutresponsive// 图像会自适应容器宽度/5. 外部图像源的优化Next.js 支持从外部图像源如 CDN 或其他图像服务加载图像并自动进行优化。通过配置next.config.js中的domains参数你可以允许 Next.js 优化来自指定域名的图像。例如module.exports{images:{domains:[images.unsplash.com,cdn.example.com]}};这样你就能使用来自这些域名的外部图像并确保它们经过优化。6. 加载策略Next.js会自动进行懒加载但你也可以手动设置图像的加载策略。priority用于标记一个图像为优先加载这对于首屏图像特别重要。例如Image src/path/to/image.jpgaltDescriptionwidth{500}height{300}priority// 标记为优先加载/loading通过loadinglazy或loadingeager来控制图像的加载行为。默认情况下是lazy。首屏图像应该使用loadingeager加载策略以确保它们在首屏加载时能够快速显示。7. 图像优化的 URLNext.js使用专有的图像优化服务来处理图像这意味着图像的 URL 会变成一个包含优化参数的 URL。例如/path/to/image.jpg - /_next/image?url%2Fpath%2Fto%2Fimage.jpgw500q75w图像宽度。q图像质量0 到 100 之间。8. 在开发环境中禁用图像优化在开发环境中图像优化功能是禁用的这样可以加快本地开发的速度。如果需要启用它可以通过修改next.config.js来开启图像优化。module.exports{images:{disableStaticImages:false// 启用静态图像优化}}; 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目