Skip to content

Commit 14376c3

Browse files
Sync kit docs (#1327)
sync kit docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent 8301abb commit 14376c3

File tree

1 file changed

+2
-4
lines changed
  • apps/svelte.dev/content/docs/kit/40-best-practices

1 file changed

+2
-4
lines changed

apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md

+2-4
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ Doing this manually is tedious. There are a variety of techniques you can use, d
2828
`@sveltejs/enhanced-img` is a plugin offered on top of Vite's built-in asset handling. It provides plug and play image processing that serves smaller file formats like `avif` or `webp`, automatically sets the intrinsic `width` and `height` of the image to avoid layout shift, creates images of multiple sizes for various devices, and strips EXIF data for privacy. It will work in any Vite-based project including, but not limited to, SvelteKit projects.
2929

3030
> [!NOTE] As a build plugin, `@sveltejs/enhanced-img` can only optimize files located on your machine during the build process. If you have an image located elsewhere (such as a path served from your database, CMS, or backend), please read about [loading images dynamically from a CDN](#Loading-images-dynamically-from-a-CDN).
31-
>
32-
> **WARNING**: The `@sveltejs/enhanced-img` package is experimental. It uses pre-1.0 versioning and may introduce breaking changes with every minor version release.
3331
3432
### Setup
3533

@@ -48,7 +46,7 @@ import { defineConfig } from 'vite';
4846

4947
export default defineConfig({
5048
plugins: [
51-
+++enhancedImages(),+++
49+
+++enhancedImages(), // must come before the SvelteKit plugin+++
5250
sveltekit()
5351
]
5452
});
@@ -68,7 +66,7 @@ At build time, your `<enhanced:img>` tag will be replaced with an `<img>` wrappe
6866

6967
You should provide your image at 2x resolution for HiDPI displays (a.k.a. retina displays). `<enhanced:img>` will automatically take care of serving smaller versions to smaller devices.
7068

71-
If you wish to add styles to your `<enhanced:img>`, you should add a `class` and target that.
69+
> [!NOTE] if you wish to use a [tag name CSS selector](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#type_selectors) in your `<style>` block you will need to write `enhanced\:img` to escape the colon in the tag name.
7270
7371
### Dynamically choosing an image
7472

0 commit comments

Comments
 (0)