Skip to main content
SvelteKitBest practices

Images

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

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

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

Vite 的内置处理

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

<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 动态加载图片的内容。

设置

安装：

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

调整 vite.config.js：

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


sveltekit } from '@sveltejs/kit/vite';
import { function enhancedImages(): Promise<Plugin$1[]>enhancedImages } from '@sveltejs/enhanced-img';
import { function defineConfig(config: UserConfig): UserConfig (+5 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 (+5 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$1[]>enhancedImages(), // must come before the SvelteKit plugin
		function sveltekit(): Promise<Plugin$1<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> 标签将被替换为一个由 <picture> 包裹的 <img>，提供多种图像类型和尺寸。只能在不损失质量的情况下缩小图像，这意味着您应该提供所需最高分辨率的图像——为可能请求图像的各种设备类型生成较小版本。

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

[!注意] 如果您想在 <style> 块中使用 标签名 CSS 选择器，您需要编写 enhanced\:img 来转义标签名中的冒号。

动态选择图片

您也可以手动导入一个图像资源并将其传递给<enhanced:img>。这在您有一组静态图像并希望动态选择一个或遍历它们时很有用。在这种情况下，您需要更新导入语句和<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}

内禀维度

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

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

srcset 和 sizes

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

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

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

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

<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 倍，以便浏览器可以在具有高 设备像素比 的设备上显示该图像。

每张图像的变换

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

<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）的图片（例如占据页面设计宽度的英雄图片），请指定尺寸，以便在较小设备上提供较小图片。
  • 对于重要的图像，例如 最大内容图像（LCP） 图像，设置 fetchpriority="high" 并避免 loading="lazy" 以尽早优先加载。
  • 给图片添加容器或样式，使其在页面加载时受到约束，不会跳转，从而影响您的累积布局偏移（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 对象模型创建后的实际槽位更大。

Edit this page on GitHub llms.txt

previous next
Icons