Components
Image component that adapts its resolution and loading strategy in real time based on the visitor's network connection speed.
Loading preview...
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>
);
}