Skip to main content
SvelteKit最佳实践

图片

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

  • 生成最优格式如 .avif 和 .webp
  • 为不同的屏幕创建不同尺寸的图片
  • 确保资源可以被有效缓存

手动完成这些工作很繁琐。根据您的需求和偏好，您可以使用多种技术。

Vite 的内置处理

Vite 会自动处理导入的资源以提升性能。这包括通过 CSS url() 函数引用的资源。文件名中会添加哈希值以便缓存，小于 assetsInlineLimit 的资源会被内联。Vite 的资源处理最常用于图片，但对视频、音频等也很有用。

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

<img alt="项目标志" src={logo} />

@sveltejs/enhanced-img

@sveltejs/enhanced-img 是在 Vite 内置资源处理基础上提供的插件。它提供即插即用的图片处理功能，可以提供更小的文件格式如 avif 或 webp，自动设置图片的固有 width 和 height 以避免布局偏移，为各种设备创建多种尺寸的图片，并出于隐私考虑去除 EXIF 数据。它可以在任何基于 Vite 的项目中使用，包括但不限于 SvelteKit 项目。

作为构建插件，@sveltejs/enhanced-img 只能在构建过程中优化位于您机器上的文件。如果您的图片位于其他位置（如从数据库、CMS 或后端服务的路径），请阅读从 CDN 动态加载图片。

警告：@sveltejs/enhanced-img 包是实验性的。它使用 1.0 之前的版本号，每个小版本发布可能会引入破坏性变更。

设置

安装：

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

调整 vite.config.js：

import { function sveltekit(): Promise<Plugin<any>[]>
Returns the SvelteKit Vite plugins.


sveltekit } from '@sveltejs/kit/vite';
import { function enhancedImages(): Promise<Plugin[]>enhancedImages } from '@sveltejs/enhanced-img';
import { function defineConfig(config: UserConfig): UserConfig (+3 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.


defineConfig } from 'vite';

export default function defineConfig(config: UserConfig): UserConfig (+3 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.


defineConfig({
	UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.


plugins: [
		function enhancedImages(): Promise<Plugin[]>enhancedImages(),
		function sveltekit(): Promise<Plugin<any>[]>
Returns the SvelteKit Vite plugins.


sveltekit()
	]
});

由于转换图片的计算开销，第一次构建会花费更长时间。但是，构建输出会被缓存在 ./node_modules/.cache/imagetools 中，因此后续的构建会很快。

基本用法

在你的 .svelte 组件中使用 <enhanced:img> 而不是<img>，并通过 Vite 资源导入 路径引用图片文件：

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

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

你应该为 HiDPI 显示器（又称视网膜显示器）提供 2x 分辨率的图片。<enhanced:img> 会自动负责向较小的设备提供较小版本的图片。

如果你想为 <enhanced:img> 添加样式，你应该添加一个 class 并针对它进行设置。

动态选择图像

您也可以手动导入图片资源并将其传递给 <enhanced:img>。当您有一组静态图片并想要动态选择或遍历它们时，这种方法很有用。在这种情况下，您需要同时更新 import 语句和 <img> 元素，如下所示，以表明您想要处理它们。

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

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

你也可以使用 Vite 的 import.meta.glob。请注意，你需要通过自定义查询来指定 enhanced：

<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}

固有尺寸

width 和 height 是可选的，因为它们可以从源图像中推断出来，并且在预处理 <enhanced:img> 标签时会自动添加。有了这些属性，浏览器可以保留正确的空间，防止布局偏移。

如果你想使用不同的 width 和 height，你可以用 CSS 来设置图像样式。由于预处理器会为你添加 width 和 height，如果你想要其中一个尺寸自动计算，那么你需要指定这一点：

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

srcset 和 sizes

如果你有一个大图像，比如占据设计宽度的主图，你应该指定 sizes，这样在较小的设备上就会请求较小版本的图像。例如，如果你有一个 1280px 的图像，你可能想要指定类似这样的内容：

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

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

自动生成的最小图片宽度为 540px。如果你需要更小的图片或想要指定自定义宽度，可以使用 w 查询参数：

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

如果未提供 sizes，则将生成一个 HiDPI/Retina 图像和一个标准分辨率图像。您提供的图像应该是您希望显示分辨率的 2 倍，以便浏览器可以在具有高设备像素比的设备上显示该图像。

每个图像的转换

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

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

查看 imagetools 仓库以获取完整的指令列表。.

从 CDN 动态加载图片

在某些情况下，图片在构建时可能无法访问 —— 例如，它们可能存储在内容管理系统或其他地方。

使用内容分发网络（CDN）可以让你动态优化这些图片，并在尺寸方面提供更多灵活性，但可能需要一些设置开销和使用成本。根据缓存策略，在从 CDN 收到 304 响应之前，浏览器可能无法使用资源的缓存副本。构建面向 CDN 的 HTML 允许使用 <img> 标签，因为 CDN 可以根据 User-Agent 头部提供适当的格式，而构建时优化必须生成带有多个源的 <picture> 标签。最后，某些 CDN 可能会延迟生成图片，这可能会对低流量且图片频繁更改的网站的性能产生负面影响。

CDN 通常可以直接使用，无需任何库。然而，有许多支持 Svelte 的库可以让使用变得更简单。@unpic/svelte 是一个支持大量提供商的与 CDN 无关的库。你可能还会发现一些特定的 CDN（如 Cloudinary）有 Svelte 支持。最后，一些支持 Svelte 的内容管理系统（CMS）（如 Contentful、Storyblok 和 Contentstack 都内置了图像处理支持。

最佳实践

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

在 GitHub 编辑此页面

上一页 下一页
性能