A Svelte component which uses CDNs to serve responsive images.
npm i @joeinnes/svelte-image
Note that except for the 'alt' tag, all tags are optional and their default values are shown in the example below.
<script>
import { Image } from '@joeinnes/svelte-image';
</script>
<Image src="https://kit.svelte.dev/images/svelte-kit-machine.webp" alt="Some alt text which is required" aspectRatio="16/9" objectFit="cover" quality="80" loading="lazy" hidpi={true} />
By default, the Statically will be used. You can configure alternative providers by specifying a 'name' and a 'key'.
import { Image, provider } from '@joeinnes/svelte-image';
provider.set({
name: 'cloudimage',
key: 'cloudimage_token'
});
Currently supported:
- Statically (zero configuration)
- Cloudimage (use your token as the 'key')
provider.set({
name: 'cloudimage',
key: 'cloudimage_token'
})
- Cloudinary (you need to create an HTTP Proxy media source, and then use your cloud name as the key)
provider.set({
name: 'cloudinary',
key: 'cloud_name'
})
-
hidpi mode will load the image double size for retina displays.
-
You should provide a full URL to the image, not a relative path.
-
In case you're using Statically (ie: the default) and there's no supported extension (gif, jpg, jpeg, png, or webp) listed in the image path, then the component will render the original, unoptimised version (https://twitter.com/staticallyio/status/1405700757475663873). You may be able to work around this by adding an ignored query (eg:
&image.jpg
) to the end of the URL or somewhere in the path, but results may vary. For example, https://pbs.twimg.com/media/FEBzSvdWYAoVJGc?format=jpg&name=medium does not contain '.jpg', and appending&image.jpg
does not work. However, you can add the .jpg after the ID:https://pbs.twimg.com/media/FEBzSvdWYAoVJGc.jpg?format=jpg&name=medium
. This will vary depending on the origin.
Don't know exactly what aspect ratio your container will have when it loads on a user's screen? Use bind:clientWidth
and bind:clientHeight
to calculate the aspect ratio:
<script>
import { Image } from '@joeinnes/svelte-image';
let clientWidth = 0;
let clientHeight = 0;
</script>
<div bind:clientWidth bind:clientHeight>
<Image src="https://kit.svelte.dev/images/svelte-kit-machine.webp" alt="Some alt text which is required" aspectRatio={clientWidth + "/" + clientHeight} objectFit="cover" quality="80" loading="lazy" hidpi={true} />
</div>
Then this might not be the best package for you.
This component is more suitable if you:
- don't have a server
- don't have storage space/processing power on the server
- need images to be cropped/resized/whatever at runtime rather than at buildtime
- want something that works with SvelteKit
- don't have a CDN in place already
If you:
- have a CDN in place
- need more finegrained control over image processing
- don't want third parties interfering with your images
You might instead want to check out https://github.com/matyunya/svelte-image