Content routes
Serve article covers, author photos, and related-post cards from the same CMS originals.
sveltekit image optimization
Use Skymage for image-heavy SvelteKit routes without moving your media
Keep CMS, product, and uploaded images on their current public origin. Let SvelteKit load functions or components request Skymage URLs for exact dimensions, crops, WebP or AVIF output, and cached delivery.
const skymage = (src, params = {}) => {
const query = new URLSearchParams(
Object.entries(params).map(([key, value]) => [key, String(value)])
).toString();
return `https://demo.skymage.net/v1/${src}?${query}`;
};
export async function load() {
return {
hero: skymage('assets.example.com/articles/hero.jpg', {
w: 1280,
f: 'avif',
q: 84,
}),
};
}
where it fits
Start with SvelteKit routes where image slots repeat
A useful SvelteKit image optimization test starts with one route, one source pattern, and enough repeated images to make bandwidth and Core Web Vitals movement visible.
Storefront routes
Generate product-card, collection, and hero variants without a build-time image queue.
App surfaces
Normalize avatars, screenshots, and workspace media into predictable sizes at the route boundary.
route rollout
Keep image variants close to SvelteKit load data
Use one small helper in a load function, component module, or shared image utility to build Skymage URLs from the public image paths your route already renders.
export async function load({ params }) {
const post = await getPost(params.slug);
return {
post,
cardImage: skymage(post.coverImage, {
w: 520,
h: 390,
fit: 'cover',
f: 'webp',
q: 82,
}),
};
}
evaluation path
A practical SvelteKit image CDN test answers four questions
Origin fit
Can Skymage transform the public image paths your SvelteKit route already renders?
Route sizes
Can each route request the exact dimensions it displays across desktop and mobile?
Format output
Can content, product, or upload routes ship WebP or AVIF without a media migration?
Rollout risk
Can one route prove the pattern before site-wide image handling changes?
free check
Get a SvelteKit image route audit
Send one public SvelteKit route. Skymage will identify the repeated image slot to test first, the URL parameters to try, and whether the current origin fits a low-risk rollout.