React or Vue apps
Serve cards, heroes, and gallery images from existing product, CMS, or app media paths.
vite image optimization
Use Skymage for image-heavy Vite apps without moving your media
Keep product, CMS, and uploaded images on their current public origin. Let Vite 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 const heroImage = skymage('assets.example.com/app/hero.jpg', {
w: 1280,
f: 'avif',
q: 84,
});
where it fits
Start with Vite views where image components repeat
A useful Vite image optimization test starts with one component pattern, one public source path, and enough repeated images to make bytes and Core Web Vitals movement visible.
Static marketing pages
Generate landing-page hero, case-study, and social-proof image variants without a build pipeline change.
SaaS dashboards
Normalize avatars, screenshots, customer uploads, and workspace media into predictable component sizes.
component rollout
Keep image variants close to the component that owns the slot
Use one shared image helper in your Vite app, then test a single repeated component before changing every route or asset import.
const cardImage = skymage(product.image, {
w: 520,
h: 390,
fit: 'cover',
f: 'webp',
q: 82,
});
return 
;
evaluation path
A practical Vite image CDN test answers four questions
Origin fit
Can Skymage transform the public image paths your Vite app already renders?
Component sizes
Can repeated components request exact dimensions instead of oversized originals?
Format output
Can app views ship WebP or AVIF without a media-library migration?
Rollout risk
Can one component prove the pattern before broader image handling changes?
free check
Get a Vite image component audit
Send one public Vite route. Skymage will identify the repeated image component to test first, the URL parameters to try, and whether the current origin fits a low-risk rollout.