m↗media lab.NEXT.JS + CLOUDINARY
AN EXPERIMENT WITH THE VISUAL WEB

Fewer bytes.
More image.

The same file. New possibilities.
Explore how cropping, quality, and format transform image delivery.

Try the lab ↘
SEE THE DIFFERENCE

One image. Many choices.

Interactive · No upload
Open image ↗
Pink flowers and green foliage in a Cloudinary sample image640 × 427 px
A touch of colorAutomatic crop, quality, and format
THE TRANSFORMATION IS IN THE URL
https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,w_640,h_427/q_auto/f_auto/sample
FROM THE DEMO TO YOUR PROJECT

Try an image of your own.

Already have a public image on Cloudinary? Enter your cloud name and Public ID. No secret key needed.

Use a public asset with transformations allowed. No files are uploaded.

LEARN → APPLY → SHARE

A small project.
Decisions that matter.

01

Crop with intention

Adapt the same asset to cards and portraits with c_fill and g_auto. Check that the main subject stays visible.

02

Deliver what is needed

The gallery uses srcSet and sizes to offer different widths. The browser selects a variant for the screen.

03

Verify before you share

Inspect requests in the browser Network tab. Record file size, format, viewport, and conditions before sharing results.