SvelteKit 最新中文文档教程（21）—— 最佳实践之图片

SvelteKit 图片处理最佳实践主要包括使用优化格式、适配不同设备、缓存管理，并通过 Vite 内置功能、@sveltejs/enhanced-img 插件或 CDN 动态加载实现性能提升。

• 格式优化：优先使用 .avif 和 .webp 等现代格式，它们在相同质量下文件更小。
• 尺寸适配：为不同屏幕生成多版本图片（如 2x 分辨率用于 HiDPI 设备），避免带宽浪费。
• 缓存策略：通过文件名哈希值（如 logo.abc123.png）实现长期缓存，减少重复加载。

• 自动优化：Vite 会处理通过 import 导入的图片（如 CSS 中的 url()），添加哈希值并内联小文件。
• 基础用法：<script> import logo from '$lib/assets/logo.png';</script><img alt="项目标志" src={logo} />
• 适用场景：静态图片、简单项目。

• 功能增强：

  自动转换格式（如 .jpg → .webp）。

  生成多尺寸图片并填充 srcset。

  移除 EXIF 数据保护隐私。

  自动设置 width/height 避免布局偏移。

• 安装配置：npm install --save-dev @sveltejs/enhanced-img// vite.config.jsimport { enhancedImages } from '@sveltejs/enhanced-img';export default defineConfig({ plugins: [enhancedImages(), sveltekit()]});
• 基础用法：<enhanced:img src="./image.jpg" alt="示例" />
• 动态导入：<script> import MyImage from './image.jpg?enhanced';</script><enhanced:img src={MyImage} alt="动态示例" />
• 批量处理（结合 import.meta.glob）：<script> const images = import.meta.glob('/assets/*.{jpg,png}', { eager: true, query: { enhanced: true } });</script>{#each Object.values(images) as img} <enhanced:img src={img.default} alt="批量示例" />{/each}

• 适用场景：图片存储在 CMS 或数据库，构建时不可访问。
• 优势：

  全球分发减少延迟。

  按需生成图片（如 Cloudinary 的 w_400,h_300 参数）。

• 库支持：

  @unpic/svelte：支持多家 CDN 提供商。

  CMS 内置处理：Contentful、Storyblok 等。

• 示例（使用 Cloudinary）：<img src="
  https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg"
  alt="CDN 示例"/>

• 混合使用方案：

  Vite 内置处理：用于 <meta> 标签图片。

  enhanced:img：主页大图。

  CDN：用户上传内容。

• 性能优化：

  指定 sizes：为响应式图片提供设备宽度提示。

  <enhanced:img src="./image.png" sizes="min(1280px, 100vw)"/>

  自定义宽度：通过查询参数生成特定尺寸。

  <enhanced:img src="./image.png?w=1280;640;400" sizes="(min-width:1920px) 1280px, 640px"/>

  优先级加载：对 LCP 图片设置 fetchpriority="high"。

  <enhanced:img src="./lcp.jpg" alt="关键图片" fetchpriority="high" loading="eager"/>
• 布局稳定性：

  默认添加 width/height 避免 CLS。

  自定义尺寸时用 CSS 覆盖：

  <style> .custom-img { width: 100%; height: auto; }</style><enhanced:img src="./image.jpg" class="custom-img" alt="自定义" />
• 图片质量：

  提供 2x 原始分辨率（如显示宽度 400px → 提供 800px 图片）。

  避免放大低分辨率图片。

• enhanced:img 实验性：插件可能引入破坏性变更，需锁定版本。
• CDN 成本：动态生成图片可能产生费用，需评估流量。
• sizes 单位：避免使用 em/rem，防止 CSS 修改影响实际布局。

完整文档参考：