Demo of `next/image` using Cloudflare Transform images

You can effectively view this by setting the network throttling profile to "Slow 3G" in the DevTools network tab. GitHub

LOCAL IMAGE

public/images/main.png

public local large image — large(1000 x 500)

public local medium image — medium(400 x 200)

public local small image — small(100 x 50)

public local fill image — fill

LOCAL IMAGE

import image from "@images/main.png"

imported local large image — large(1000 x 500)

imported local medium image — medium(400 x 200)

imported local small image — small(100 x 50)

imported local fill image — fill

REMOTE IMAGE

https://public.napochaan.dev

remote large image — large(1000 x 500)

remote medium image — medium(400 x 200)

remote small image — small(100 x 50)

remote fill image — fill