32. image-optimization: image optimization

To set up image optimization on Epycbyte using Next.js, follow these steps:

1. Import the Image Component: Use import Image from 'next/image'; to access Epycbyte's optimization features.

2. Use the Image Component: In your React components, wrap the image source with the Image component. The src prop can be a local file path or a URL.

3. Let Epycbyte Handle Optimization: Epycbyte automatically optimizes images for different devices and generates optimized URLs with parameters like width (w) and quality (q).

4. Cache Management:

   • For local images, cache expires after 31 days on the Edge Network.
   • For remote images, cache TTL is determined by the upstream server's Cache-Control header or a minimum of 60 seconds.

5. Invalidate Cache (Remote Images): To manually invalidate, append a query parameter like ?v=2 to the src.