Images and Fonts

• Use next/image for every content image; give width/height or fill + an aspect-ratio box.
• Set priority (or preload in Next.js 16) on the LCP image only, usually the first banner or the main product photo.
• Always set sizes with fill or responsive layouts; without it the browser downloads a 100vw image.
• Enable AVIF for smaller files: images: { formats: ['image/avif', 'image/webp'] }.
• Serve product photos from a CDN and allow it in remotePatterns.

• Use next/font: self-hosted, preloaded, size-adjust fallback to avoid layout shift.
• Load only needed subsets (latin, add devanagari for Hindi) and weights.
• Prefer variable fonts (one file for all weights).

import { Noto_Sans, Noto_Sans_Devanagari } from 'next/font/google';

export const sans = Noto_Sans({ subsets: ['latin'], variable: '--font-sans', display: 'swap' });
export const hindi = Noto_Sans_Devanagari({ subsets: ['devanagari'], weight: ['400', '600'], variable: '--font-hi' });