图片可以对您的应用性能产生重大影响。为了获得最佳效果，您应该通过以下方式优化它们：

*   生成最优格式，如`.avif`和`.webp`
*   创建不同屏幕尺寸
*   确保资产能够有效缓存

手动做这件事很繁琐。根据您的需求和偏好，您可以使用各种技术。

## 
Vite 的内置处理

[Vite 将自动处理导入的资产](https://vitejs.dev/guide/assets.html)以提升性能。这包括通过 CSS `url()` 函数引用的资产。将添加哈希到文件名中以便缓存，并且小于 `assetsInlineLimit` 的资产将被内联。Vite 的资产处理通常用于图像，但也适用于视频、音频等。

```svelte
<script>
	import logo from '$lib/assets/logo.png';
</script>

<img alt="The project logo" src={logo} />
```

## @sveltejs/enhanced-img

`@sveltejs/enhanced-img` 是基于 Vite 内置资源处理的插件。它提供即插即用的图像处理功能，支持较小的文件格式如 `avif` 或 `webp`，自动设置图像的内在 `width` 和 `height` 以避免布局偏移，为不同设备创建多种尺寸的图像，并移除 EXIF 数据以保护隐私。它将在任何基于 Vite 的项目中工作，包括但不限于 SvelteKit 项目。

> \[!注意\] 作为构建插件，`@sveltejs/enhanced-img`只能在构建过程中优化您机器上的文件。如果您有位于其他位置（例如来自数据库、CMS 或后端的路径）的图片，请阅读有关[从 CDN 动态加载图片](#Loading-images-dynamically-from-a-CDN)的内容。

### 
设置

安装：

```bash
npm install --save-dev @sveltejs/enhanced-img
```

调整 `vite.config.js`：

```js
import { sveltekit } from '@sveltejs/kit/vite';
+++import { enhancedImages } from '@sveltejs/enhanced-img';+++
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		+++enhancedImages(), // must come before the SvelteKit plugin+++
		sveltekit()
	]
});
```

建筑在第一次构建时将花费更长的时间，因为图像转换的计算成本较高。然而，构建输出将被缓存于 `./node_modules/.cache/imagetools` ，以便后续构建将更快。

### 
基本用法

使用您的 `.svelte` 组件时，请使用 `<enhanced:img>` 而不是 `<img>`，并通过 [Vite 资产导入](https://vitejs.dev/guide/assets.html#static-asset-handling) 路径引用图像文件：

```svelte
<enhanced:img src="./path/to/your/image.jpg" alt="An alt text" />
```

在构建时，您的 `<enhanced:img>` 标签将被替换为一个由 `<picture>` 包裹的 `<img>`，提供多种图像类型和尺寸。只能在不损失质量的情况下缩小图像，这意味着您应该提供所需最高分辨率的图像——为可能请求图像的各种设备类型生成较小版本。

您应提供 2 倍分辨率的图片以供 HiDPI 显示器（即视网膜显示器）使用。代码`<enhanced:img>`将自动为较小设备提供更小的版本。

> \[!注意\] 如果您想在 `<style>` 块中使用 [标签名 CSS 选择器](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#type_selectors)，您需要编写 `enhanced\:img` 来转义标签名中的冒号。

### 
动态选择图片

您也可以手动导入一个图像资源并将其传递给`<enhanced:img>`。这在您有一组静态图像并希望动态选择一个或[遍历它们](https://github.com/sveltejs/kit/blob/0ab1733e394b6310895a1d3bf0f126ce34531170/sites/kit.svelte.dev/src/routes/home/Showcase.svelte)时很有用。在这种情况下，您需要更新`导入`语句和`<img>`元素，如下所示，以表明您希望处理它们。

```svelte
<script>
	import MyImage from './path/to/your/image.jpg?enhanced';
</script>

<enhanced:img src={MyImage} alt="some alt text" />
```

您也可以使用[Vite 的`import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import)。请注意，您必须通过[自定义查询](https://vitejs.dev/guide/features.html#custom-queries)指定`enhanced`：

```svelte
<script>
	const imageModules = import.meta.glob(
		'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',
		{
			eager: true,
			query: {
				enhanced: true
			}
		}
	)
</script>

{#each Object.entries(imageModules) as [_path, module]}
	<enhanced:img src={module.default} alt="some alt text" />
{/each}
```

### 
内禀维度

`宽度`和`高度`是可选的，因为它们可以从源图像中推断出来，当`<enhanced:img>`标签预处理时将自动添加。具有这些属性，浏览器可以保留正确的空间量，防止[布局偏移](https://web.dev/articles/cls)。如果您想使用不同的`宽度`和`高度`，可以使用 CSS 对图像进行样式设置。因为预处理器为您添加了`宽度`和`高度`，如果您想自动计算其中一个尺寸，则需要指定该尺寸：

```svelte
<style>
	.hero-image img {
		width: var(--size);
		height: auto;
	}
</style>
```

### 
`srcset` 和 `sizes`

如果您有一张大图片，例如占据设计宽度的英雄图片，您应该指定`尺寸`，以便在较小设备上请求较小版本。例如，如果您有一张 1280 像素的图片，您可能希望指定如下：

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

如果指定了 `尺寸`，则 `<enhanced:img>` 将为较小设备生成小图像并填充 `srcset` 属性。

最小的自动生成图片宽度为 540 像素。如果您需要更小的图片或希望指定自定义宽度，可以使用`w`查询参数来实现：

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

如果未提供 `尺寸`，则将生成 HiDPI/Retina 图像和标准分辨率图像。您提供的图像应为您希望显示的分辨率的 2 倍，以便浏览器可以在具有高 [设备像素比](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) 的设备上显示该图像。

### 
每张图像的变换

默认情况下，增强的图像将被转换为更高效的格式。然而，您可能希望应用其他转换，如模糊、质量、平整或旋转操作。您可以通过附加查询字符串来运行每个图像的转换：

```svelte
<enhanced:img src="./path/to/your/image.jpg?blur=15" alt="An alt text" />
```

[查看 imagetools 仓库以获取指令列表的完整列表](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md).

## 
动态从 CDN 加载图片

在某些情况下，图像可能在构建时不可访问——例如，它们可能位于内容管理系统或其他地方。

使用内容分发网络（CDN）可以允许您动态优化这些图像，并提供更多关于尺寸的灵活性，但可能涉及一些设置开销和使用成本。根据缓存策略，浏览器可能无法使用缓存的资产副本，直到从 CDN 接收到一个[304 响应](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304)。构建针对 CDN 的 HTML 允许使用`<img>`标签，因为 CDN 可以根据`User-Agent`头部提供适当的格式，而构建时的优化必须生成带有多个源的`<picture>`标签。最后，一些 CDN 可能会懒加载图像，这可能会对流量低且图像频繁更改的网站产生负面影响。

CDN 通常可以无需任何库即可使用。然而，有许多支持 Svelte 的库，使操作更加简便。[`@unpic/svelte`](https://unpic.pics/img/svelte/)是一个不依赖于 CDN 的库，支持大量提供商。您还可能发现特定 CDN 如[Cloudinary](https://svelte.cloudinary.dev/)支持 Svelte。最后，一些支持 Svelte 的内容管理系统（CMS）（如[Contentful](https://www.contentful.com/sveltekit-starter-guide/)、[Storyblok](https://github.com/storyblok/storyblok-svelte)和[Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)）内置了对图像处理的支撑。

## 
最佳实践

*   对于每种图像类型，使用上述讨论中适当的方法。在一个项目中，您可以混合使用所有三种解决方案。例如，您可以使用 Vite 的内置处理为`<meta>`标签提供图像，使用`@sveltejs/enhanced-img`在主页上显示图像，以及使用动态方法显示用户提交的内容。
*   考虑通过 CDN 提供所有图像，无论您使用哪种图像优化类型。CDN 通过在全球范围内分发静态资产的副本来减少延迟。
*   您的原始图像应具有良好的质量/分辨率，并且宽度应为显示宽度的 2 倍，以服务于 HiDPI 设备。图像处理可以将图像尺寸减小以节省带宽，但在为较小屏幕提供服务时，创建像素来放大图像将是带宽的浪费。
*   对于宽度远大于移动设备（约 400px）的图片（例如占据页面设计宽度的英雄图片），请指定`尺寸`，以便在较小设备上提供较小图片。
*   对于重要的图像，例如 [最大内容图像（LCP）](https://web.dev/articles/lcp) 图像，设置 `fetchpriority="high"` 并避免 `loading="lazy"` 以尽早优先加载。
*   给图片添加容器或样式，使其在页面加载时受到约束，不会跳转，从而影响您的[累积布局偏移（CLS）](https://web.dev/articles/cls)。 `宽度`和`高度`帮助浏览器在图片仍在加载时预留空间，因此`@sveltejs/enhanced-img`将为您添加`宽度`和`高度`。
*   始终提供良好的`alt`文本。如果未这样做，Svelte 编译器将警告您。
*   不要在`尺寸`中使用`em`或`rem`并更改这些度量单位的默认大小。当在`尺寸`或`@media`查询中使用时，`em`和`rem`都被定义为表示用户的默认`字体大小`。对于类似于 `sizes="(min-width: 768px) min(100vw, 108rem), 64rem"` 的`尺寸`声明，如果 CSS 更改，控制图像在页面上布局的实际`em`或`rem`可能会有所不同。例如，不要这样做`html { font-size: 62.5%; }`，因为浏览器预加载器保留的槽位现在将比 CSS 对象模型创建后的实际槽位更大。