尧图网页设计 
使用 Build Output API 配置 Vercel Image Optimization 图像优化【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples导读本文以 build-output-api/image-optimization 预构建示例为核心讲解如何在不依赖 Next.js 等框架的情况下仅通过.vercel/output目录结构与config.json中的images配置直接启用 Vercel 平台的图像优化Image Optimization能力。读完本文你将掌握 Build Output API v3 的项目组织方式、images配置项的含义、以及通过/_vercel/image/**端点按需缩放与转码图像的完整实战流程。一、示例背景与部署方式本示例属于仓库中 build-output-api 目录下的一组 prebuilt预构建示例之一。这类示例的特点是不依赖任何前端框架直接提供一个符合 Build Output API 规范的文件结构由 Vercel 平台按约定读取并托管。部署方式非常简单在示例目录内执行vercel deploy --prebuilt该命令会读取.vercel/output目录中的产物并按照 config.json 中的声明完成部署无需经过框架构建阶段。前提说明vercelCLI 需要已安装并完成登录--prebuilt标志告诉 Vercel 跳过构建流程直接使用已有的预构建产物。二、项目结构.vercel/output 目录规范Build Output API 的核心约定是所有部署产物必须位于.vercel/output目录下。本示例的完整文件结构如下build-output-api/image-optimization/ ├── README.md └── .vercel/ └── output/ ├── config.json └── static/ ├── images/ │ └── rio.jpeg └── index.html各部分职责.vercel/output/config.json构建输出配置声明版本号、图像优化规则等平台级能力.vercel/output/static/静态文件目录其中的文件会原样作为静态资源对外提供。本示例放置了未优化的原始图片 images/rio.jpeg 和一个测试页面 index.html。关于静态目录的通用约定可参考仓库中 static-files 示例其static目录下同样直接放置index.html、another.html与data.json等静态资源。三、config.json 中的 images 配置详解本示例的核心配置位于 .vercel/output/config.json{ version: 3, images: { sizes: [256, 384, 600, 1000], domains: [], minimumCacheTTL: 60, formats: [image/webp, image/avif] } }各字段含义如下配置项取值说明version3Build Output API 版本号v3 才支持images配置images.sizes[256, 384, 600, 1000]允许对外提供的图片输出宽度像素白名单客户端请求的w参数会被约束到最接近的合法值images.domains[]允许进行远程图像优化的外部域名白名单留空表示仅优化本站资源images.minimumCacheTTL60优化后图片在 CDN 上的最短缓存时间秒此处为 60 秒images.formats[image/webp, image/avif]允许输出给客户端的现代图片格式服务器会根据浏览器的Accept头协商返回事实来源说明以上字段与本仓库 config.json 的实际内容一致字段语义与 Vercel Build Output API 文档中的images配置约定一致。四、如何触发图像优化/_vercel/image 端点图像优化功能通过GET /_vercel/image/**端点对外提供服务。也就是说只要部署了包含images配置的预构建项目该端点就会自动生效无需编写任何服务器代码。示例页面 index.html 中即是这样引用图片的h1Vercel Image Optimization Example/h1 h2From my trip to Rio!/h2 div img src/_vercel/image?url%2Fimages%2Frio.jpegw1000q75 width500 height375 / /div p This image was uploaded to Vercel as a 3.9mb unoptimized image, but when served via Image Optimization it is resized and served with the optimal image format for your web browser, making it ~100kb. /pURL 参数说明url需要优化的图片路径。示例中%2Fimages%2Frio.jpeg是 URL 编码后的/images/rio.jpeg对应 static/images/rio.jpegw请求的输出宽度。示例请求w1000会被约束到配置中sizes白名单内最接近的值此处恰好是 1000q压缩质量示例为75。客户端实际效果浏览器发起GET /_vercel/image?url...w1000q75请求Vercel 平台读取原始图片按请求宽度缩放并依据浏览器Accept头协商输出webp/avif等格式响应结果按minimumCacheTTL指定的时长在 CDN 缓存。页面中的说明文字给出了直观的量级对比原始rio.jpeg约 3.9MB经优化后体积降至约 100KB该数字为示例作者在页面中自述的演示结果实际体积会随图片内容与参数变化。五、仓库中的佐证静态文件目录的通用模式本示例展示的模式与仓库中其他 Build Output API 示例保持一致的预构建风格。例如 static-files 示例的 config.json 仅声明{version: 3}其静态页面同样直接放在static目录下通过 index.html 链接到another.html与data.json。对比可见未开启图像优化时config.json只需version字段需要图像优化时追加images配置即可静态资源目录结构保持不变。这也说明 Build Output API 的核心思路是声明式配置 约定目录平台能力通过配置开关启用源码与构建流程完全解耦。六、在线 Demo 与快速验证示例 README 提供了在线演示地址https://build-output-api-image-optimization.vercel.sh访问该地址后浏览器会加载经过/_vercel/image端点优化的图片。你可以通过以下方式验证优化效果打开浏览器开发者工具的 Network 面板观察图片请求的响应头中的Content-Type应为image/webp或image/avif取决于浏览器支持与content-length体积远小于原始文件修改 URL 中的w与q参数观察输出尺寸与体积变化检查响应缓存头验证minimumCacheTTL60 秒是否生效。说明演示链接与示例 README 中提供的地址一致实际可用性以部署状态为准你也可以按照第一节的方式本地部署后自行验证。七、小结通过本示例可以掌握一条完整的零框架图像优化路径在项目根目录创建.vercel/output目录结构将原始静态图片放入.vercel/output/static/在.vercel/output/config.json中声明version: 3与images配置执行vercel deploy --prebuilt完成部署在页面中以/_vercel/image?url...w...q...形式引用图片即可获得按需缩放、格式协商与 CDN 缓存。该方案适合需要精确控制构建产物、或希望脱离框架绑定直接使用 Vercel 平台能力的场景配置项全部集中在config.json中便于审计与版本管理。【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 Build Output API 配置 Vercel Image Optimization 图像优化
使用 Build Output API 配置 Vercel Image Optimization 图像优化【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples导读本文以 build-output-api/image-optimization 预构建示例为核心讲解如何在不依赖 Next.js 等框架的情况下仅通过.vercel/output目录结构与config.json中的images配置直接启用 Vercel 平台的图像优化Image Optimization能力。读完本文你将掌握 Build Output API v3 的项目组织方式、images配置项的含义、以及通过/_vercel/image/**端点按需缩放与转码图像的完整实战流程。一、示例背景与部署方式本示例属于仓库中 build-output-api 目录下的一组 prebuilt预构建示例之一。这类示例的特点是不依赖任何前端框架直接提供一个符合 Build Output API 规范的文件结构由 Vercel 平台按约定读取并托管。部署方式非常简单在示例目录内执行vercel deploy --prebuilt该命令会读取.vercel/output目录中的产物并按照 config.json 中的声明完成部署无需经过框架构建阶段。前提说明vercelCLI 需要已安装并完成登录--prebuilt标志告诉 Vercel 跳过构建流程直接使用已有的预构建产物。二、项目结构.vercel/output 目录规范Build Output API 的核心约定是所有部署产物必须位于.vercel/output目录下。本示例的完整文件结构如下build-output-api/image-optimization/ ├── README.md └── .vercel/ └── output/ ├── config.json └── static/ ├── images/ │ └── rio.jpeg └── index.html各部分职责.vercel/output/config.json构建输出配置声明版本号、图像优化规则等平台级能力.vercel/output/static/静态文件目录其中的文件会原样作为静态资源对外提供。本示例放置了未优化的原始图片 images/rio.jpeg 和一个测试页面 index.html。关于静态目录的通用约定可参考仓库中 static-files 示例其static目录下同样直接放置index.html、another.html与data.json等静态资源。三、config.json 中的 images 配置详解本示例的核心配置位于 .vercel/output/config.json{ version: 3, images: { sizes: [256, 384, 600, 1000], domains: [], minimumCacheTTL: 60, formats: [image/webp, image/avif] } }各字段含义如下配置项取值说明version3Build Output API 版本号v3 才支持images配置images.sizes[256, 384, 600, 1000]允许对外提供的图片输出宽度像素白名单客户端请求的w参数会被约束到最接近的合法值images.domains[]允许进行远程图像优化的外部域名白名单留空表示仅优化本站资源images.minimumCacheTTL60优化后图片在 CDN 上的最短缓存时间秒此处为 60 秒images.formats[image/webp, image/avif]允许输出给客户端的现代图片格式服务器会根据浏览器的Accept头协商返回事实来源说明以上字段与本仓库 config.json 的实际内容一致字段语义与 Vercel Build Output API 文档中的images配置约定一致。四、如何触发图像优化/_vercel/image 端点图像优化功能通过GET /_vercel/image/**端点对外提供服务。也就是说只要部署了包含images配置的预构建项目该端点就会自动生效无需编写任何服务器代码。示例页面 index.html 中即是这样引用图片的h1Vercel Image Optimization Example/h1 h2From my trip to Rio!/h2 div img src/_vercel/image?url%2Fimages%2Frio.jpegw1000q75 width500 height375 / /div p This image was uploaded to Vercel as a 3.9mb unoptimized image, but when served via Image Optimization it is resized and served with the optimal image format for your web browser, making it ~100kb. /pURL 参数说明url需要优化的图片路径。示例中%2Fimages%2Frio.jpeg是 URL 编码后的/images/rio.jpeg对应 static/images/rio.jpegw请求的输出宽度。示例请求w1000会被约束到配置中sizes白名单内最接近的值此处恰好是 1000q压缩质量示例为75。客户端实际效果浏览器发起GET /_vercel/image?url...w1000q75请求Vercel 平台读取原始图片按请求宽度缩放并依据浏览器Accept头协商输出webp/avif等格式响应结果按minimumCacheTTL指定的时长在 CDN 缓存。页面中的说明文字给出了直观的量级对比原始rio.jpeg约 3.9MB经优化后体积降至约 100KB该数字为示例作者在页面中自述的演示结果实际体积会随图片内容与参数变化。五、仓库中的佐证静态文件目录的通用模式本示例展示的模式与仓库中其他 Build Output API 示例保持一致的预构建风格。例如 static-files 示例的 config.json 仅声明{version: 3}其静态页面同样直接放在static目录下通过 index.html 链接到another.html与data.json。对比可见未开启图像优化时config.json只需version字段需要图像优化时追加images配置即可静态资源目录结构保持不变。这也说明 Build Output API 的核心思路是声明式配置 约定目录平台能力通过配置开关启用源码与构建流程完全解耦。六、在线 Demo 与快速验证示例 README 提供了在线演示地址https://build-output-api-image-optimization.vercel.sh访问该地址后浏览器会加载经过/_vercel/image端点优化的图片。你可以通过以下方式验证优化效果打开浏览器开发者工具的 Network 面板观察图片请求的响应头中的Content-Type应为image/webp或image/avif取决于浏览器支持与content-length体积远小于原始文件修改 URL 中的w与q参数观察输出尺寸与体积变化检查响应缓存头验证minimumCacheTTL60 秒是否生效。说明演示链接与示例 README 中提供的地址一致实际可用性以部署状态为准你也可以按照第一节的方式本地部署后自行验证。七、小结通过本示例可以掌握一条完整的零框架图像优化路径在项目根目录创建.vercel/output目录结构将原始静态图片放入.vercel/output/static/在.vercel/output/config.json中声明version: 3与images配置执行vercel deploy --prebuilt完成部署在页面中以/_vercel/image?url...w...q...形式引用图片即可获得按需缩放、格式协商与 CDN 缓存。该方案适合需要精确控制构建产物、或希望脱离框架绑定直接使用 Vercel 平台能力的场景配置项全部集中在config.json中便于审计与版本管理。【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考