From 8ec2717744b27f60b3412e0adb4390991954a7df Mon Sep 17 00:00:00 2001 From: "svelte-docs-bot[bot]" <196124396+svelte-docs-bot[bot]@users.noreply.github.com> Date: Sun, 4 May 2025 15:59:33 +0000 Subject: [PATCH] sync kit docs --- .../content/docs/kit/40-best-practices/07-images.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md index 750470cb1f..38fd288f9c 100644 --- a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md +++ b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md @@ -28,8 +28,6 @@ Doing this manually is tedious. There are a variety of techniques you can use, d `@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. > [!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). -> -> **WARNING**: The `@sveltejs/enhanced-img` package is experimental. It uses pre-1.0 versioning and may introduce breaking changes with every minor version release. ### Setup @@ -48,7 +46,7 @@ import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ - +++enhancedImages(),+++ + +++enhancedImages(), // must come before the SvelteKit plugin+++ sveltekit() ] }); @@ -68,7 +66,7 @@ At build time, your `` tag will be replaced with an `` wrappe You should provide your image at 2x resolution for HiDPI displays (a.k.a. retina displays). `` will automatically take care of serving smaller versions to smaller devices. -If you wish to add styles to your ``, you should add a `class` and target that. +> [!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 `