Product grids
Generate consistent product-card thumbnails for category, search, and related-product routes.
next.js image optimization
Use Skymage for image-heavy Next.js pages without moving your media
Keep product, CMS, and uploaded images on their current public origin. Let Next.js components request Skymage URLs for exact sizes, crops, WebP or AVIF output, and cached delivery.
// Skymage URL helper for a Next.js component
const skymage = (src, params = {}) => {
const query = new URLSearchParams(params).toString();
return `https://demo.skymage.net/v1/${src}${query ? `?${query}` : ''}`;
};
const imageUrl = skymage('assets.example.com/products/hero.jpg', {
w: 1200,
f: 'avif',
q: 84,
});
where it fits
Start with the Next.js routes where images repeat
A useful Next.js image optimization test starts with one page type, one source pattern, and enough repeated images to make bytes and Core Web Vitals movement visible.
CMS routes
Serve article covers, author images, and landing-page heroes from the same editorial originals.
User uploads
Resize avatars, portfolio media, marketplace photos, and screenshots without pre-processing queues.
component rollout
Keep the image decision close to the component
Use a helper, custom loader, or server-side serializer to build Skymage URLs from the image paths your app already knows. Test one component before changing every image in the app.
import Image from 'next/image';
export function ProductCard({ product }) {
const src = skymage(product.imagePath, {
w: 480,
h: 640,
fit: 'cover',
f: 'webp',
q: 82,
});
return (
evaluation path
A practical Next.js image CDN test answers four questions
Origin fit
Can Skymage transform the public image paths your app already renders?
Rendered sizes
Can each component request the exact dimensions it displays on desktop and mobile?
Format output
Can your route ship WebP or AVIF without changing upload workflows?
Rollout risk
Can one route prove the pattern before app-wide image changes?
free check
Get a Next.js image route audit
Send one public Next.js route. Skymage will identify the repeated image pattern to test first, the URL parameters to try, and whether the current origin fits a low-risk rollout.