feat: add experimental @sveltejs/image package
#9787
Conversation
…ageSizes options and wire them up correctly
🦋 Changeset detectedLatest commit: 6bca660 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| // TODO make these configurable from the outside | ||
|
|
||
| /** | ||
| * @param {PluginOptions['runtime']} [_options] |
There was a problem hiding this comment.
why is the build-time tool using runtime options?
|
is there any update on this? |
We decided that this isn't the right approach — we have an idea for a solution that we do like, but haven't made any progress towards implementation yet. Essentially there are two almost completely unrelated problems to solve:
Neither of these actually benefits from a component. In the first case, you just need some logic for generating the import { dev } from '$app/environment';
export function optimize(src: string, widths = [640, 960, 1280], quality = 90) {
if (dev) return src;
return widths
.slice()
.sort((a, b) => a - b)
.map((width, i) => {
const url = `/_vercel/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
const descriptor = i < widths.length - 1 ? ` ${width}w` : '';
return url + descriptor;
})
.join(', ');
}...which gets used like this: <img
class="absolute left-0 top-0 w-full h-full"
srcset={optimize(photo.url)}
alt={photo.description}
/>For the second case, where we have the asset at build time and can generate multiple optimized variants (with immutably cacheable URLs) and add <img alt="a potato" src="./potato.jpg">...so that a Vite plugin can do its work. Again, there's no real value in involving a component — if we need a preprocessor anyway, then we can get that preprocessor to replace any <script>
import __image_1 from './potato.jpg';
</script>
<img alt="a potato" src={__image_1} width="640" height="360">
There's a bunch of details to figure out here and it won't happen overnight, but we think it'll be really nice to work with. |
part of #241 closes #9787 This adds image optimization through a new $app/images import. It's deliberately low level: The only export is getImage which you pass an image src and it returns an object containing src and srcset (possibly more?) values which you spread on an img tag. In order to use this you need to define a path to a loader in kit.config.images. The loader takes the original img src and a width and returns a URL pointing to the optimized image. You can also modify the number of sizes and trusted domains.
|
Closing as outdated - static images are done through |
|
Here is a detailed guide based on the Rich Harris answer above regarding optimized images on Vercel... |
See the readme for more info. This is a experimental for now.
Possible follow-ups:
heightin providers (cloudflare, netlify, vercel)vite-imagetoolsso that images that end up the same get filtered out as duplicates and then enable&w=paths.assetsconfigimport.meta.glob(example invite-imagetools)format,device_sizes, etc. configurablevite-imagetoolsusage probably by creating own instance of it and disabling the built-in oneinclude/exludeoptions ofvite-imagetoolscreate-svelteand move docs from readme to siteunpicor update API to match):global(Passing class to components svelte#2870 (comment))webp/avifare generated, but won't work in IE or Safari 13 and olderRelated to #241
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.