Search the site

GETTING STARTED

APP

DATA

BACKEND

OPERATIONS

SHIPPING

REFERENCE

DATA

Images

A phone downloads the 640-pixel image and a large screen gets the 1920, from one asset you declared.

The build writes the sizes, and DVBox.image asks for the one its slot needs.

ON THIS PAGE

Serve each image at the width it needs

Resize on request with web-server

Paint the image on the first frame

Status

Serve each image at the width it needs

# pubspec.yaml
dartvel:
  images:
    widths: [320, 640, 1080, 1920]
    quality: 75
    remoteHosts: [images.example.com]

Copy code to clipboard

Name the file through DVAsset, which dartvel routes generates from what your pubspec bundles. A renamed file then stops the build. With a path in a string it shows an empty box on somebody's phone.

Widget hero() => DVBox.image(
      // Generated from pubspec.yaml: a renamed file is a compile error, not a
      // blank box on somebody's phone.
      DVAsset.hero,
      alt: 'A team planning a release',
      width: 400,
      height: 210,
    );

Copy code to clipboard

The same asset behind a box, as a background:

Widget banner() => const DVBox(DVText('Now shipping')).modifier(
      const DVModifier().backgroundImage(DVAsset.hero).padding(48),
    );

Copy code to clipboard

dartvel build web writes each declared raster asset at every configured width narrower than the image.

DVBox.image asks for its laid-out width times the device pixel ratio, rounded up to a configured width.

Leave out widths and you get 16, then the default image and device sizes of Next.js 16, from 32 to 3840.

Resize on request with web-server

dartvel build web-server

Copy code to clipboard

The server answers /_dartvel/image, resizes on first request and caches the result.

A PNG or WebP source is sent as WebP to a browser that accepts it.

It refuses widths outside your list and hosts missing from remoteHosts.

Paint the image on the first frame

A link that prefetches its page also fetches the variant for the visitor's pixel ratio, into the cache the widget reads. The image is downloaded once and is there when the page opens.

GIFs are sent as they are

Resizing an animated GIF would keep only its first frame, so GIFs are never resized.

Status

Partial

Spec section: Media Pipeline

Planned work and implementation limits

Nothing for uploads: no resizing, validation or size limits for files users send.

No AVIF, and WebP only from a web-server build.

Variants are written for web builds only. Apps on devices ship their original assets.

No video processing.

FSL-1.1-MIT licensed. Built with Dartvel.

Dartvel is made by

To the bottom