Skip to content

Commit

Permalink
docs: mention various Svelte CDN libraries (#11038)
Browse files Browse the repository at this point in the history
* docs: mention various Svelte CDN libraries

* Update documentation/docs/30-advanced/60-images.md

Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>

* Update documentation/docs/30-advanced/60-images.md

---------

Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
  • Loading branch information
3 people authored Nov 14, 2023
1 parent f9324a0 commit e19b4a8
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion documentation/docs/30-advanced/60-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,9 @@ By default, enhanced images will be transformed to more efficient formats. Howev

In some cases, the images may not be accessible at build time — e.g. they may live inside a content management system or elsewhere.

Using a content delivery network (CDN) can allow you to optimize these images dynamically, and provides more flexibility with regards to sizes, but it may involve some setup overhead and usage costs. Depending on caching strategy, the browser may not be able to use a cached copy of the asset until a [304 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) is received from the CDN. Building HTML to target CDNs may result in slightly smaller and simpler HTML because they can serve the appropriate file format for an `<img>` tag based on the `User-Agent` header whereas build-time optimizations must produce `<picture>` tags with multiple sources. Finally, some CDNs may generate images lazily, which could have a negative performance impact for sites with low traffic and frequently changing images. We do not currently offer any tools for dynamic image transforms, but we may offer such utilities in the future.
Using a content delivery network (CDN) can allow you to optimize these images dynamically, and provides more flexibility with regards to sizes, but it may involve some setup overhead and usage costs. Depending on caching strategy, the browser may not be able to use a cached copy of the asset until a [304 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) is received from the CDN. Building HTML to target CDNs may result in slightly smaller and simpler HTML because they can serve the appropriate file format for an `<img>` tag based on the `User-Agent` header whereas build-time optimizations must produce `<picture>` tags with multiple sources. Finally, some CDNs may generate images lazily, which could have a negative performance impact for sites with low traffic and frequently changing images.

CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.

## Best practices

Expand Down

0 comments on commit e19b4a8

Please sign in to comment.