尧图网页设计 
深入掌握 Next.jsImage /组件图片优化、属性详解与实战配置【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine导读本文以 Next.js 内置的图片优化能力为主题系统讲解next/image的Image /组件在静态/远程图片场景下的用法、全部核心属性、next.config.js配置项并结合本仓库examples/with-nextjs示例项目基于 Next.js 14 与 App Router进行落地验证。读完本文你将能独立完成图片格式选型、尺寸适配、懒加载与预加载、占位图、自定义 loader、外链域名白名单等全套图片优化实践显著改善页面加载性能、CLS 指标与 SEO 表现。一、为什么要在 Next.js 中专门优化图片图片是现代 Web 应用的重要组成部分用得恰当与否直接影响开发者与终端用户体验。图片既影响用户体验也在合理使用的前提下深刻影响搜索引擎优化SEO排名——Google 在排名时会将页面加载时间作为考量因素更快的页面往往获得更靠前的排名。传统上图片通过 HTML 的img标签添加到页面中。对于简单场景这或许足够但当面对大量图片时事情很快就会变得难以管理你需要手动处理不同设备尺寸、格式兼容、懒加载、占位图等一系列问题。Next.js 从 v10 开始引入了内置解决方案全新的Image /组件与自动图片优化能力。本文后续章节将逐步讲解如何利用这一方案构建高性能应用。在本仓库中你可以直接查看 examples/with-nextjs/package.json其dependencies中声明了next: ^14.2.26、react: ^19.1.0这是当前仓库所验证的 Next.js 版本环境Image /组件在 App Router 与 Pages Router 下均可使用。二、优化前的图片准备工作在深入使用Image /组件之前先做好图片本身的准备工作才能达到最优性能。如果处理的是动态且数量庞大的图片可以考虑使用 CDN 托管图片。CDN 提供自动缓存、文件压缩与实时缩放等图片与应用性能优势。以下是面向终端用户提供图片前应该考虑的非穷尽清单1. 选择正确的格式Web 上最流行的三种图片格式是 JPEG、PNG 与 WebP。三者之中WebP 因其诸多优势与性能收益而被强烈推荐。WebP 是一种现代图片格式在不牺牲画质的前提下为 Web 图片提供优越的有损与无损压缩加载更快且被主流浏览器广泛支持。2. 调整图片尺寸按设备尺寸提供正确的图片是 Web 图片优化的关键一环。向只有 100x100 显示尺寸的用户下发一张 1080x800 的大图会让用户下载不必要的带宽拖慢页面加载并损害性能指标。建议针对不同屏幕尺寸生成多份图片文件。3. 压缩图片图片优化的经验法则是将图片控制在 1MB 以下。在不过度损失画质的前提下将大文件压缩到合理阈值。手动优化完成后就可以放心地使用 Next.jsImage /组件来获取最大化的图片优化收益了。在本仓库的 examples/with-nextjs/public 目录中可以看到示例项目仅保留了favicon.ico这类必要静态资源图片类资源通常放在public目录下供next/image静态导入使用——这也是官方推荐的资源组织方式。三、认识 Next.jsImage /组件Image /组件是为 Next.js 应用提供图片服务的开箱即用现代方案。它与原生 HTMLimg /元素类似但有几点区别。两者最大的区别在于Next.jsImage /组件开箱即用地提供图片优化与性能收益以及若干其他实用特性。Image /组件的用法与 Next.js 中其他组件一致可根据需求重复使用。它的核心优化能力包括自动懒加载默认对首屏以下图片进行懒加载关键图片预加载通过priority属性预加载首屏关键图片自动多尺寸适配自动生成srcSet按视口下发合适尺寸现代格式支持自动输出 WebP 等压缩率更高的现代格式防布局偏移自动生成/要求宽高避免 Cumulative Layout ShiftCLS。四、使用Image /组件4.1 基本用法与静态图片导入首先从next/image导入Image /组件import Image from next/image;然后即可像使用其他组件一样使用它import Image from next/image; import profilePic from ../public/profile.webp; const Profile () { return ( h1 User Profile /h1 Image src{profilePic} altuser profile picture / / ); };值得注意的是对于静态导入的图片next/image会自动生成width、height与blurDataURL值。这些值被用来在图片最终加载完成前防止 Cumulative Layout ShiftCLS。当然也可以显式传入这些值。4.2 远程图片绝对与相对 URL也可以向src属性传入远程图片字符串支持相对或绝对 URLimport Image from next/image; const Profile () { return ( h1 User Profile /h1 Image // Absolute URL srchttps://unsplash.com/photos/XV1qykwu82c altUser profile picture width{300} height{300} / / ); };注意使用远程图片时必须始终为图片组件添加width和height属性。因为 Next.js 无法在构建期确定图片的尺寸缺少宽高会导致页面渲染时发生布局偏移。对于相对的外部 URL 字符串如user.png需要在next.config.js中进行domains配置提供允许的主机名列表防止恶意用户滥用外部 URL。下文将详细讲解domains的配置方式。五、Image /组件属性全景Image /组件接受多种属性来增强性能。总体上可分为三类必需属性required、可选属性optional与高级属性advanced。下面逐一展开。5.1 必需属性Image /组件最基础的使用需要三种属性src、width与height。srcsrc属性接受两类值静态导入的本地图片对象或指向外部图片的绝对/相对 URL 路径字符串。前文示例中已经演示了从public目录导入本地静态图片、以及传入绝对 URL 字符串两种方式。width与heightwidth与height属性决定图片在页面上占据的空间大小或相对其容器的缩放比例。它们可以表示图片的渲染尺寸或原始尺寸具体取决于layout属性的取值使用layoutintrinsic或layoutfixed时width与height表示图片的渲染宽高像素直接影响图片显示的大小使用layoutresponsive或layoutfill时width与height表示图片的原始像素尺寸因此影响的是宽高比即图片相对容器的缩放程度。5.2 可选属性layout接受一个字符串值决定图片如何响应视口尺寸变化。默认值为intrinsic共有四个可选值intrinsic——layout属性的默认值。给予图片足够的空间按其原始宽高渲染。fixed—— 将图片尺寸固定为width与height属性的精确值。生成带 1x 与 2x 像素密度描述符的srcSet。fill—— 使图片在宽高两个方向上都扩展以填满父元素的宽高。需要确保父元素设置了position: relative。该值通常与objectFit属性搭配使用推荐用于事先不知道尺寸的图片场景。responsive—— 将图片缩放到适配其父容器的宽度。需要确保父容器设置了display: block。loader一个自定义函数用于解析外部图片 URL。可以作为属性传入也可以在next.config.js的images部分设置。作为属性内联使用时它会覆盖next.config.js中定义的 loader。该函数将src、width与quality参数解析为外部图片的 URL 路径字符串import Image from next/image; const customLoader ({ src, width, quality }) { return https://s3.amazonaws.com/demo/image/${src}?w${width}q${ quality || 75 }; }; const MyImage (props) { return ( Image srcprofilePic.webp // 将被解析为: https://s3.amazonaws.com/demo/image/profilePic.webp?width300q80 width{300} height{300} altUser profile picture quality{80} loader{customLoader} / ); };placeholder定义原图完全加载前使用的占位内容。可选值为blur或empty默认empty。为empty时原图加载完成前显示空白空间为blur时使用blurDataURL值作为占位图。如果src是静态导入的图片且格式为.jpg、.png、.webp、.avif之一会自动生成一张模糊占位图作为blurDataURL的值import Image from next/image; import cat from ../public/cat.webp; Image src{cat} altA picture of white cats width{500} height{450} placeholderblur /;说明原文档中提到的格式列表为.jpg、.png、.webp与.avf其中.avf应为.avif——Next.js 的自动占位图生成针对的是 WebP、AVIF 等静态导入的位图格式。priority此属性对首屏可见即无需滚动即可看到的页面部分的图片特别有用。落地页等首屏图片应使用priority属性以获取性能提升它告诉浏览器将图片视为高优先级进行预加载。使用priority的图片会自动禁用懒加载。该属性接受布尔值默认falseImage srcuser.webp altUser profile photo width{300} height{300} priority /quality一个整数指定优化后图片的质量。取值范围1到100100为最佳质量默认75Image srcuser.webp altUser profile photo width{300} height{300} quality{80} /sizes显著降低 Cumulative Layout Shift 的一个有效方式是按响应式尺寸提供图片这能让浏览器在图片完全加载前就为其分配足够的空间避免扭曲页面布局。next/image的一大特性是自动生成 source setNext.js 可以在内部生成不同尺寸的图片并为特定视口尺寸决定下载其中哪一个。next/image使用next.config.js中的deviceSizes与imageSizes属性生成srcSet以改进图片投递与性能指标。如有特定使用场景也可以自行配置这两个属性。sizes属性仅对layoutresponsive或layoutfill的图片生效。它允许定义一组媒体条件如视口宽度与槽位宽度告诉浏览器当某个媒体条件成立时应从自动生成的 source set 中下载多大尺寸的图片。以下示例来自 next/image 官方文档import Image from next/image; const Example () ( div Image src/mock.png layoutfill sizes(min-width: 60em) 24vw, (min-width: 28em) 45vw, 100vw / /div );建议可以在 MDN 上进一步学习 HTML 的 srcset 与 sizes 属性。5.3 高级属性有些使用场景需要自定义图片行为以下是Image /组件可用的一些高级属性。blurDataURL一个 base64 编码的图片 DATA URL作为src图片完全加载前的占位图。它会被放大并模糊处理因此推荐使用 10px 或更小的微型图片。仅在配合placeholderblur时生效Image srchttps://unsplash.com/photos/XV1qykwu82c altCover photo width{700} height{500} blurDataURLdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADA... placeholderblur /loading指定图片的加载行为。接受lazy与eager两个值默认lazy。为lazy时图片加载被延迟到它接近视口的计算距离时才触发适用于首屏以下的图片为eager时页面挂载后立即加载图片。请谨慎使用eager因为它被证实会严重损害性能。Image src/background.webp altPage background photo width{800} height{750} loadinglazy /objectFit当使用layoutfill时设置图片相对其父元素的尺寸适配方式。该值会传递给src图片的 object-fit CSS 属性。可选值为fill、cover或containImage src/user.webp altUser profile photo width{300} height{300} objectFitcover /objectPosition指定图片内容在图片框内的对齐方式。该值会传递给应用到图片上的 object-position CSS 属性。默认50% 50%Image src/user.webp altUser profile photo width{300} height{300} objectPositionright bottom /onLoadingComplete原图完全加载后触发回调函数。函数接收一个参数——包含以下属性的对象naturalHeightnaturalWidthconst MyProfile (props) { const handleImageLoad ({ naturalWidth, naturalHeight }) { console.log(naturalWidth, naturalHeight); }; return ( Image srcprofilePic.webp width{300} height{300} altUser profile picture onLoadingComplete{handleImageLoad} / ); };style允许为底层图片元素添加自定义 CSS 样式。也可以通过className来针对Image /组件做样式定制。注意layout属性应用的样式会优先于style属性此外如果通过style属性修改图片的宽度必须同时设置heightauto否则图片会被拉伸变形Image src/background.webp altWaterfall photo width{800} height{800} style{{ opacity: 0.5 }} classNameuser_photo /六、next.config.js中的图片配置项要使用外部图片需要配置以保护应用免受恶意用户攻击。可以通过next.config.js中的domains与loader属性完成。loader如果希望使用云服务商来优化图片而不是使用 Next.js 内置的图片优化 API可以在next.config.js中配置loader与path前缀。这样即可在src属性中使用相对 URL如me.webploader 会将相对 URL 转换为绝对 URLmodule.exports { images: { loader: amazon, path: https://s3.amazonaws.com/demoapp/, }, };domainsdomains配置用于提供外部图片的允许主机名列表保护应用免受恶意用户攻击。例如下面的配置将确保外部图片必须以s3.amazonaws.com开头。任何其他协议或不匹配的主机名都将返回 400 Bad Requestmodule.exports { images: { domains: [s3.amazonaws.com], }, };在本仓库示例中的落地方式本仓库的 examples/with-nextjs/next.config.mjs 展示了 Next.js 14 环境下配置文件的写法——使用 ES Module 语法导出配置对象/** type {import(next).NextConfig} */ const nextConfig { transpilePackages: [refinedev/antd], }; export default nextConfig;当你的 refine Next.js 应用需要加载外部图片时只需在nextConfig对象中补充images配置即可例如/** type {import(next).NextConfig} */ const nextConfig { transpilePackages: [refinedev/antd], images: { domains: [s3.amazonaws.com], }, }; export default nextConfig;另外在 App Router 下你可以在 examples/with-nextjs/src/app/layout.tsx 中看到通过metadata导出配置站点图标icons的实践这与图片优化同属于 Next.js 资源投递优化的范畴可作为组织静态资源时的参考。七、图片优化的收益在 Next.js 应用中优化图片能带来巨大收益提升用户留存图片优化缩短加载时间避免因图片加载缓慢导致跳出率上升并让用户在同一页面上与内容有更多交互SEO 增益Google 在排名时考虑页面加载时间更快的页面排名更靠前降低带宽与成本减少图片带宽消耗数据流量受限的用户也能正常加载同时节省服务器成本性能评分优化后的图片有助于在 Google PageSpeed Insights 等性能测量工具中获得高分。八、常见的图片优化陷阱开发者在优化图片时经常出错典型问题包括使用错误的格式BMP、TIFF 等格式的效率远低于 WebP 或经过优化的 JPEG/PNG不按目标显示尺寸调整图片向浏览器下发大图再让浏览器缩放会造成带宽浪费和页面渲染耗时增加。任何情况下都应让图片针对显示尺寸进行优化忽略压缩不压缩照片会导致文件体积无谓地膨胀。需要注意的是TinyPNG、Compressor.io 等工具在压缩时会牺牲一定质量仅用于减小体积不使用 CDN会导致加载时间延长尤其是服务器地理位置相距较远的用户。九、与其他图片优化技术对比Next.js 内置图片优化相比其他方案的优势全自动优化以最少的手动改动自动完成优化工作开箱即用的响应式Image /组件天然响应式图片会动态适配屏幕尺寸与分辨率现代格式优先仅支持 WebP 等现代格式其压缩率优于 JPEG 与 PNG灵活的 loader 扩展可以为 Cloudinary、Imgix 等服务完全灵活地实现自定义 loader。例如可以用自定义 loader 指定图片的加载方式import Image from next/image; const customLoader ({ src, width, quality }) { return https://example.com/${src}?w${width}q${quality || 75}; }; const MyImage () ( Image loader{customLoader} srcprofile.jpg altProfile picture width{500} height{500} / );十、常见问题排查在 Next.js 中进行图片优化可能会遇到一些问题图片不加载将外部图片加载涉及的所有域名添加到next.config.js的images.domains配置键中布局抖动未正确设置尺寸所致。对于远程图片务必添加width与height避免布局偏移图片模糊检查quality属性值是否足够高。配置domains的典型方式module.exports { images: { domains: [example.com], }, };十一、常见问题解答FAQSVG 支持情况Next.js 对 SVG 的处理表现出色但next/image不提供针对 SVG 的开箱即用优化。任何img /标签都可以承载 SVG从而允许 SVG 直接内联到 HTML 中。动图GIF处理动图应转换为视频格式以获得性能收益因为next/image不会优化它们。格式兼容Next.js 支持 WebP 等所有现代图片格式但务必为不支持这些格式的浏览器提供回退方案。布局与响应式始终调整图片尺寸以避免布局偏移对于响应式设计请设置layoutresponsive。适用范围记住next/image作用于原生图片元素而非通过 CSS 实现的背景图片——背景图仍需按常规方式自行处理。十二、总结通过本文你已掌握如何使用next/image在 Next.js 中投递优化后的图片包括自动懒加载、关键图片预加载、跨设备自动尺寸调整、现代图片格式的自动支持以及如何利用Image /组件改善应用性能指标。同时你也能对照本仓库的 with-nextjs 示例 与 next.config.mjs 完成配置落地。借助Image /组件的诸多自定义选项与特性你可以构建出色的开发者与用户体验并在性能评估中取得良好成绩。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深入掌握 Next.js `＜Image /＞` 组件：图片优化、属性详解与实战配置
深入掌握 Next.jsImage /组件图片优化、属性详解与实战配置【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine导读本文以 Next.js 内置的图片优化能力为主题系统讲解next/image的Image /组件在静态/远程图片场景下的用法、全部核心属性、next.config.js配置项并结合本仓库examples/with-nextjs示例项目基于 Next.js 14 与 App Router进行落地验证。读完本文你将能独立完成图片格式选型、尺寸适配、懒加载与预加载、占位图、自定义 loader、外链域名白名单等全套图片优化实践显著改善页面加载性能、CLS 指标与 SEO 表现。一、为什么要在 Next.js 中专门优化图片图片是现代 Web 应用的重要组成部分用得恰当与否直接影响开发者与终端用户体验。图片既影响用户体验也在合理使用的前提下深刻影响搜索引擎优化SEO排名——Google 在排名时会将页面加载时间作为考量因素更快的页面往往获得更靠前的排名。传统上图片通过 HTML 的img标签添加到页面中。对于简单场景这或许足够但当面对大量图片时事情很快就会变得难以管理你需要手动处理不同设备尺寸、格式兼容、懒加载、占位图等一系列问题。Next.js 从 v10 开始引入了内置解决方案全新的Image /组件与自动图片优化能力。本文后续章节将逐步讲解如何利用这一方案构建高性能应用。在本仓库中你可以直接查看 examples/with-nextjs/package.json其dependencies中声明了next: ^14.2.26、react: ^19.1.0这是当前仓库所验证的 Next.js 版本环境Image /组件在 App Router 与 Pages Router 下均可使用。二、优化前的图片准备工作在深入使用Image /组件之前先做好图片本身的准备工作才能达到最优性能。如果处理的是动态且数量庞大的图片可以考虑使用 CDN 托管图片。CDN 提供自动缓存、文件压缩与实时缩放等图片与应用性能优势。以下是面向终端用户提供图片前应该考虑的非穷尽清单1. 选择正确的格式Web 上最流行的三种图片格式是 JPEG、PNG 与 WebP。三者之中WebP 因其诸多优势与性能收益而被强烈推荐。WebP 是一种现代图片格式在不牺牲画质的前提下为 Web 图片提供优越的有损与无损压缩加载更快且被主流浏览器广泛支持。2. 调整图片尺寸按设备尺寸提供正确的图片是 Web 图片优化的关键一环。向只有 100x100 显示尺寸的用户下发一张 1080x800 的大图会让用户下载不必要的带宽拖慢页面加载并损害性能指标。建议针对不同屏幕尺寸生成多份图片文件。3. 压缩图片图片优化的经验法则是将图片控制在 1MB 以下。在不过度损失画质的前提下将大文件压缩到合理阈值。手动优化完成后就可以放心地使用 Next.jsImage /组件来获取最大化的图片优化收益了。在本仓库的 examples/with-nextjs/public 目录中可以看到示例项目仅保留了favicon.ico这类必要静态资源图片类资源通常放在public目录下供next/image静态导入使用——这也是官方推荐的资源组织方式。三、认识 Next.jsImage /组件Image /组件是为 Next.js 应用提供图片服务的开箱即用现代方案。它与原生 HTMLimg /元素类似但有几点区别。两者最大的区别在于Next.jsImage /组件开箱即用地提供图片优化与性能收益以及若干其他实用特性。Image /组件的用法与 Next.js 中其他组件一致可根据需求重复使用。它的核心优化能力包括自动懒加载默认对首屏以下图片进行懒加载关键图片预加载通过priority属性预加载首屏关键图片自动多尺寸适配自动生成srcSet按视口下发合适尺寸现代格式支持自动输出 WebP 等压缩率更高的现代格式防布局偏移自动生成/要求宽高避免 Cumulative Layout ShiftCLS。四、使用Image /组件4.1 基本用法与静态图片导入首先从next/image导入Image /组件import Image from next/image;然后即可像使用其他组件一样使用它import Image from next/image; import profilePic from ../public/profile.webp; const Profile () { return ( h1 User Profile /h1 Image src{profilePic} altuser profile picture / / ); };值得注意的是对于静态导入的图片next/image会自动生成width、height与blurDataURL值。这些值被用来在图片最终加载完成前防止 Cumulative Layout ShiftCLS。当然也可以显式传入这些值。4.2 远程图片绝对与相对 URL也可以向src属性传入远程图片字符串支持相对或绝对 URLimport Image from next/image; const Profile () { return ( h1 User Profile /h1 Image // Absolute URL srchttps://unsplash.com/photos/XV1qykwu82c altUser profile picture width{300} height{300} / / ); };注意使用远程图片时必须始终为图片组件添加width和height属性。因为 Next.js 无法在构建期确定图片的尺寸缺少宽高会导致页面渲染时发生布局偏移。对于相对的外部 URL 字符串如user.png需要在next.config.js中进行domains配置提供允许的主机名列表防止恶意用户滥用外部 URL。下文将详细讲解domains的配置方式。五、Image /组件属性全景Image /组件接受多种属性来增强性能。总体上可分为三类必需属性required、可选属性optional与高级属性advanced。下面逐一展开。5.1 必需属性Image /组件最基础的使用需要三种属性src、width与height。srcsrc属性接受两类值静态导入的本地图片对象或指向外部图片的绝对/相对 URL 路径字符串。前文示例中已经演示了从public目录导入本地静态图片、以及传入绝对 URL 字符串两种方式。width与heightwidth与height属性决定图片在页面上占据的空间大小或相对其容器的缩放比例。它们可以表示图片的渲染尺寸或原始尺寸具体取决于layout属性的取值使用layoutintrinsic或layoutfixed时width与height表示图片的渲染宽高像素直接影响图片显示的大小使用layoutresponsive或layoutfill时width与height表示图片的原始像素尺寸因此影响的是宽高比即图片相对容器的缩放程度。5.2 可选属性layout接受一个字符串值决定图片如何响应视口尺寸变化。默认值为intrinsic共有四个可选值intrinsic——layout属性的默认值。给予图片足够的空间按其原始宽高渲染。fixed—— 将图片尺寸固定为width与height属性的精确值。生成带 1x 与 2x 像素密度描述符的srcSet。fill—— 使图片在宽高两个方向上都扩展以填满父元素的宽高。需要确保父元素设置了position: relative。该值通常与objectFit属性搭配使用推荐用于事先不知道尺寸的图片场景。responsive—— 将图片缩放到适配其父容器的宽度。需要确保父容器设置了display: block。loader一个自定义函数用于解析外部图片 URL。可以作为属性传入也可以在next.config.js的images部分设置。作为属性内联使用时它会覆盖next.config.js中定义的 loader。该函数将src、width与quality参数解析为外部图片的 URL 路径字符串import Image from next/image; const customLoader ({ src, width, quality }) { return https://s3.amazonaws.com/demo/image/${src}?w${width}q${ quality || 75 }; }; const MyImage (props) { return ( Image srcprofilePic.webp // 将被解析为: https://s3.amazonaws.com/demo/image/profilePic.webp?width300q80 width{300} height{300} altUser profile picture quality{80} loader{customLoader} / ); };placeholder定义原图完全加载前使用的占位内容。可选值为blur或empty默认empty。为empty时原图加载完成前显示空白空间为blur时使用blurDataURL值作为占位图。如果src是静态导入的图片且格式为.jpg、.png、.webp、.avif之一会自动生成一张模糊占位图作为blurDataURL的值import Image from next/image; import cat from ../public/cat.webp; Image src{cat} altA picture of white cats width{500} height{450} placeholderblur /;说明原文档中提到的格式列表为.jpg、.png、.webp与.avf其中.avf应为.avif——Next.js 的自动占位图生成针对的是 WebP、AVIF 等静态导入的位图格式。priority此属性对首屏可见即无需滚动即可看到的页面部分的图片特别有用。落地页等首屏图片应使用priority属性以获取性能提升它告诉浏览器将图片视为高优先级进行预加载。使用priority的图片会自动禁用懒加载。该属性接受布尔值默认falseImage srcuser.webp altUser profile photo width{300} height{300} priority /quality一个整数指定优化后图片的质量。取值范围1到100100为最佳质量默认75Image srcuser.webp altUser profile photo width{300} height{300} quality{80} /sizes显著降低 Cumulative Layout Shift 的一个有效方式是按响应式尺寸提供图片这能让浏览器在图片完全加载前就为其分配足够的空间避免扭曲页面布局。next/image的一大特性是自动生成 source setNext.js 可以在内部生成不同尺寸的图片并为特定视口尺寸决定下载其中哪一个。next/image使用next.config.js中的deviceSizes与imageSizes属性生成srcSet以改进图片投递与性能指标。如有特定使用场景也可以自行配置这两个属性。sizes属性仅对layoutresponsive或layoutfill的图片生效。它允许定义一组媒体条件如视口宽度与槽位宽度告诉浏览器当某个媒体条件成立时应从自动生成的 source set 中下载多大尺寸的图片。以下示例来自 next/image 官方文档import Image from next/image; const Example () ( div Image src/mock.png layoutfill sizes(min-width: 60em) 24vw, (min-width: 28em) 45vw, 100vw / /div );建议可以在 MDN 上进一步学习 HTML 的 srcset 与 sizes 属性。5.3 高级属性有些使用场景需要自定义图片行为以下是Image /组件可用的一些高级属性。blurDataURL一个 base64 编码的图片 DATA URL作为src图片完全加载前的占位图。它会被放大并模糊处理因此推荐使用 10px 或更小的微型图片。仅在配合placeholderblur时生效Image srchttps://unsplash.com/photos/XV1qykwu82c altCover photo width{700} height{500} blurDataURLdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADA... placeholderblur /loading指定图片的加载行为。接受lazy与eager两个值默认lazy。为lazy时图片加载被延迟到它接近视口的计算距离时才触发适用于首屏以下的图片为eager时页面挂载后立即加载图片。请谨慎使用eager因为它被证实会严重损害性能。Image src/background.webp altPage background photo width{800} height{750} loadinglazy /objectFit当使用layoutfill时设置图片相对其父元素的尺寸适配方式。该值会传递给src图片的 object-fit CSS 属性。可选值为fill、cover或containImage src/user.webp altUser profile photo width{300} height{300} objectFitcover /objectPosition指定图片内容在图片框内的对齐方式。该值会传递给应用到图片上的 object-position CSS 属性。默认50% 50%Image src/user.webp altUser profile photo width{300} height{300} objectPositionright bottom /onLoadingComplete原图完全加载后触发回调函数。函数接收一个参数——包含以下属性的对象naturalHeightnaturalWidthconst MyProfile (props) { const handleImageLoad ({ naturalWidth, naturalHeight }) { console.log(naturalWidth, naturalHeight); }; return ( Image srcprofilePic.webp width{300} height{300} altUser profile picture onLoadingComplete{handleImageLoad} / ); };style允许为底层图片元素添加自定义 CSS 样式。也可以通过className来针对Image /组件做样式定制。注意layout属性应用的样式会优先于style属性此外如果通过style属性修改图片的宽度必须同时设置heightauto否则图片会被拉伸变形Image src/background.webp altWaterfall photo width{800} height{800} style{{ opacity: 0.5 }} classNameuser_photo /六、next.config.js中的图片配置项要使用外部图片需要配置以保护应用免受恶意用户攻击。可以通过next.config.js中的domains与loader属性完成。loader如果希望使用云服务商来优化图片而不是使用 Next.js 内置的图片优化 API可以在next.config.js中配置loader与path前缀。这样即可在src属性中使用相对 URL如me.webploader 会将相对 URL 转换为绝对 URLmodule.exports { images: { loader: amazon, path: https://s3.amazonaws.com/demoapp/, }, };domainsdomains配置用于提供外部图片的允许主机名列表保护应用免受恶意用户攻击。例如下面的配置将确保外部图片必须以s3.amazonaws.com开头。任何其他协议或不匹配的主机名都将返回 400 Bad Requestmodule.exports { images: { domains: [s3.amazonaws.com], }, };在本仓库示例中的落地方式本仓库的 examples/with-nextjs/next.config.mjs 展示了 Next.js 14 环境下配置文件的写法——使用 ES Module 语法导出配置对象/** type {import(next).NextConfig} */ const nextConfig { transpilePackages: [refinedev/antd], }; export default nextConfig;当你的 refine Next.js 应用需要加载外部图片时只需在nextConfig对象中补充images配置即可例如/** type {import(next).NextConfig} */ const nextConfig { transpilePackages: [refinedev/antd], images: { domains: [s3.amazonaws.com], }, }; export default nextConfig;另外在 App Router 下你可以在 examples/with-nextjs/src/app/layout.tsx 中看到通过metadata导出配置站点图标icons的实践这与图片优化同属于 Next.js 资源投递优化的范畴可作为组织静态资源时的参考。七、图片优化的收益在 Next.js 应用中优化图片能带来巨大收益提升用户留存图片优化缩短加载时间避免因图片加载缓慢导致跳出率上升并让用户在同一页面上与内容有更多交互SEO 增益Google 在排名时考虑页面加载时间更快的页面排名更靠前降低带宽与成本减少图片带宽消耗数据流量受限的用户也能正常加载同时节省服务器成本性能评分优化后的图片有助于在 Google PageSpeed Insights 等性能测量工具中获得高分。八、常见的图片优化陷阱开发者在优化图片时经常出错典型问题包括使用错误的格式BMP、TIFF 等格式的效率远低于 WebP 或经过优化的 JPEG/PNG不按目标显示尺寸调整图片向浏览器下发大图再让浏览器缩放会造成带宽浪费和页面渲染耗时增加。任何情况下都应让图片针对显示尺寸进行优化忽略压缩不压缩照片会导致文件体积无谓地膨胀。需要注意的是TinyPNG、Compressor.io 等工具在压缩时会牺牲一定质量仅用于减小体积不使用 CDN会导致加载时间延长尤其是服务器地理位置相距较远的用户。九、与其他图片优化技术对比Next.js 内置图片优化相比其他方案的优势全自动优化以最少的手动改动自动完成优化工作开箱即用的响应式Image /组件天然响应式图片会动态适配屏幕尺寸与分辨率现代格式优先仅支持 WebP 等现代格式其压缩率优于 JPEG 与 PNG灵活的 loader 扩展可以为 Cloudinary、Imgix 等服务完全灵活地实现自定义 loader。例如可以用自定义 loader 指定图片的加载方式import Image from next/image; const customLoader ({ src, width, quality }) { return https://example.com/${src}?w${width}q${quality || 75}; }; const MyImage () ( Image loader{customLoader} srcprofile.jpg altProfile picture width{500} height{500} / );十、常见问题排查在 Next.js 中进行图片优化可能会遇到一些问题图片不加载将外部图片加载涉及的所有域名添加到next.config.js的images.domains配置键中布局抖动未正确设置尺寸所致。对于远程图片务必添加width与height避免布局偏移图片模糊检查quality属性值是否足够高。配置domains的典型方式module.exports { images: { domains: [example.com], }, };十一、常见问题解答FAQSVG 支持情况Next.js 对 SVG 的处理表现出色但next/image不提供针对 SVG 的开箱即用优化。任何img /标签都可以承载 SVG从而允许 SVG 直接内联到 HTML 中。动图GIF处理动图应转换为视频格式以获得性能收益因为next/image不会优化它们。格式兼容Next.js 支持 WebP 等所有现代图片格式但务必为不支持这些格式的浏览器提供回退方案。布局与响应式始终调整图片尺寸以避免布局偏移对于响应式设计请设置layoutresponsive。适用范围记住next/image作用于原生图片元素而非通过 CSS 实现的背景图片——背景图仍需按常规方式自行处理。十二、总结通过本文你已掌握如何使用next/image在 Next.js 中投递优化后的图片包括自动懒加载、关键图片预加载、跨设备自动尺寸调整、现代图片格式的自动支持以及如何利用Image /组件改善应用性能指标。同时你也能对照本仓库的 with-nextjs 示例 与 next.config.mjs 完成配置落地。借助Image /组件的诸多自定义选项与特性你可以构建出色的开发者与用户体验并在性能评估中取得良好成绩。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考