Product routes
Serve collection cards, product heroes, and gallery thumbnails from the same storefront originals.
remix image optimization
Use Skymage for image-heavy Remix routes without moving your media
Keep CMS, product, and uploaded images on their current public origin. Let Remix loaders or route components return 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 loader() {
return {
hero: skymage('assets.example.com/products/hero.jpg', {
w: 1280,
f: 'avif',
q: 84,
}),
};
}
where it fits
Start with Remix routes where image slots repeat
A useful Remix image optimization test starts with one route module, one source pattern, and enough repeated images to make bandwidth and Core Web Vitals movement visible.
Content routes
Generate article covers, inline media, and related-post images without changing the CMS upload workflow.
User media
Normalize avatars, screenshots, and listing photos into predictable variants at the route boundary.
route rollout
Keep image variants close to the Remix data boundary
Use one small helper in the loader, route component, or shared image module to build Skymage URLs from the public image paths your app already renders.
export async function loader({ params }) {
const product = await getProduct(params.slug);
return {
product,
cardImage: skymage(product.image, {
w: 480,
h: 640,
fit: 'cover',
f: 'webp',
q: 82,
}),
};
}
evaluation path
A practical Remix image CDN test answers four questions
Origin fit
Can Skymage transform the public image paths your Remix route already returns?
Route sizes
Can the route request the exact dimensions it displays across list, detail, and mobile views?
Format output
Can product, CMS, or upload routes ship WebP or AVIF without a media migration?
Rollout risk
Can one route prove the pattern before app-wide image handling changes?
free check
Get a Remix image route audit
Send one public Remix 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.