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