# FooPixel guide examples: source and method

Measured on 10 September 2026. These are observations of one browser run, not a performance claim, recommended universal quality threshold or forecast of savings.

## Source and permission

The reference photograph is NASA’s portrait of astronaut Eileen Collins. [scikit-image’s dataset documentation](https://scikit-image.org/docs/stable/api/skimage.data.html#skimage.data.astronaut) records the NASA source and identifies the image as public domain, with no known copyright restrictions. The unmodified 512 × 512 PNG was retrieved from [scikit-image v0.19.3](https://github.com/scikit-image/scikit-image/blob/v0.19.3/skimage/data/astronaut.png). The original NASA collection entry is linked from the dataset documentation. Photo credit: NASA. No NASA endorsement of FooPixel is implied.

`astronaut-source.png` is the unmodified source. All JPEG, WebP, MP4 and GIF files beside this document are derived examples. The reference JPEG was made with Chrome’s Canvas JPEG encoder at quality 0.95. It is not a camera original. The source photograph is small and is not representative of a high-resolution professional photography workflow.

## Image procedure

1. Decode the source PNG and draw it on a 512 × 512 Canvas, then encode JPEG at quality 0.95.
2. Load that JPEG into the actual FooPixel image optimizer.
3. Export WebP at width 512/quality 90, width 512/quality 65, and width 320/quality 80, leaving height automatic.
4. Measure the returned Blob byte length and SHA-256 before saving it. Do not include transport compression or HTTP headers in the byte count.

The two 512-pixel results change only the WebP quality setting. The 320-pixel result changes dimensions as well as quality. These are visual examples, not objective perceptual quality tests. Browser decoders and encoders can produce different results.

## Motion procedure

1. Create a synthetic pan over the portrait using a 320 × 180 Canvas. Draw 30 successive views at an intended 12 fps, cropping a 400 × 225 region from source coordinates `(2 × frame,110)`. Record the Canvas in real time as VP9 WebM with MediaRecorder. Real-time scheduling can vary the duration and frames; the committed MP4 below is the fixed input for reproducing the comparison.
2. Convert the recording using the actual FooPixel converter to H.264 MP4, width 320, CRF 23, veryfast, yuv420p. The source is silent. The saved source is 142,007 bytes.
3. Load the saved MP4 into the actual FooPixel preview generator. At width 320 and automatic height, export a WebP still at time 0 (quality 90), a two-second silent MP4 at 24 fps / CRF 28 / veryfast, and a two-second GIF at 6 fps with an optimized palette of up to 128 colours.
4. Record Blob byte lengths and SHA-256. The poster, MP4 and GIF are deliberately different outputs; the table is not an equal-quality codec benchmark.

Use [portrait-pan-source.mp4](portrait-pan-source.mp4) as the fixed source when reproducing the preview comparison. Regenerating the real-time source recording can change the resulting bytes.

## Environment and reproduction

Chrome 152 on macOS; exact user agent and timestamp are stored in [measurements.json](measurements.json). FFmpeg core 0.12.10 and wrapper 0.12.15 were bundled by FooPixel. No upload, remote encoding, hosted-media moderation or delivery transformation was involved. The examples are permanent site assets rather than temporary hosted upload URLs.

The UI reproduction steps are in the [photo guide](/guides/prepare-photos-for-web/#measured-example) and [video guide](/guides/video-preview-for-websites/#measured-example). For developer automation, read `scripts/generate-editorial-examples.browser.mjs`, remove the `export` keyword from its function declaration, and evaluate the function in a local FooPixel image-optimizer page after the tool has loaded. Call `await runEditorialExamples()` from that page context. The file is a browser module and cannot run directly in Node. It exercises the same component handlers used by the UI, returns base64 assets and metadata, and never requests hosting. By default it uses the committed source MP4; pass `{createMotionSource:true}` to make a new real-time recording.

To refresh the published measurements, save returned files, verify each length and SHA-256, and update the visible tables and this document from the new observations. Do not change the date or results without repeating the measurement. Keep the source attribution with redistributed examples.