Image component that adapts its resolution and loading strategy in real time based on the visitor's network connection speed.
import { NetworkImage } from "@/components/ui/network-image"; export default function Default() { return ( <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-6"> <div className="w-full max-w-md"> <NetworkImage src="https://picsum.photos/800/400" alt="Adaptive image" width={800} height={400} showBadge /> </div> </div> ); }