How to Validate Width Descriptors Before Shipping an AI Image Srcset

An AI image can look correct while its responsive-image metadata is wrong. Validate the downloaded file's pixel width against each w descriptor before shipping it. A filename such as hero-1200.jpg is not evidence that the file is 1,200 pixels wide.

This is a small asset-contract test, not a generator benchmark. I used two existing examples from the FLUX Dev page as independent fixtures. They are different subjects, so they must not be alternatives in the same srcset. Each real responsive set should contain appropriately resized versions of the same composition.

1. Keep the bytes you actually deploy

Save the final delivery files locally. Do not copy a size from a CMS label or a browser's displayed CSS width. An image proxy can resize an asset; test the proxy output if that is what you publish.

The downloaded portrait fixture here is 832 × 1,216 pixels. The downloaded packshot is 750 × 750. These are measurements of this test's downloaded files, not guaranteed generator output sizes.

2. Reject a false descriptor

Use a virtual environment and install Pillow with python -m pip install Pillow. Save the two example files as cover.jpg and workspace.jpg, or substitute your own assets and measured expected values. This validator handles one width descriptor per file; it is deliberately not a full srcset parser.

from pathlib import Path
from PIL import Image

def check_width(path, descriptor):
    if not descriptor.endswith("w") or not descriptor[:-1].isdigit():
        raise ValueError("expected a positive integer width descriptor")
    declared = int(descriptor[:-1])
    if declared <= 0:
        raise ValueError("width must be positive")
    with Image.open(Path(path)) as image:
        image.load()
        actual = image.width
    if declared != actual:
        raise ValueError(f"{path}: declared {declared}, actual {actual}")
    return actual

assert check_width("cover.jpg", "832w") == 832
assert check_width("workspace.jpg", "750w") == 750
try:
    check_width("workspace.jpg", "832w")
except ValueError as error:
    print(error)
else:
    raise AssertionError("mismatch was not rejected")

The local test printed:

workspace.jpg: declared 832, actual 750

That failure is intentional: only the descriptor was wrong. No image was distorted to manufacture the result. Run this check after image optimization, not only before it.

3. Keep composition and resolution separate

The square packshot makes a useful second fixture because it exposes accidental reuse of the portrait's metadata. It is not a smaller portrait. A valid width check cannot detect the wrong subject, a bad crop, unreadable label text or an unsuitable alt description. Review those independently.

For a real portrait delivery set, create sizes from one approved master and validate each file. Keep descriptors unique, use one descriptor type per set, and describe the intended layout with sizes. The MDN srcset reference explains how candidate resources and descriptors work with sizes.

4. Inspect the selected resource in a real page

After deploying a staging page, inspect the image's currentSrc, test narrow and wide layouts, and check that the selected file is one of your approved candidates. Device pixel ratio, viewport and browser choices affect selection; a passing width test does not guarantee a particular candidate or prove a performance improvement.

Do not compare a density-adjusted browser naturalWidth blindly with a raw encoded pixel-width test. Keep the validation target explicit: this script checks the encoded delivery file.

5. Feed the contract from the image workflow

If you need a new approved master, the FLUX Dev image workspace exposes a prompt, aspect ratios and output-count controls. On September 7, 2026, the visible default estimate was 9 credits with Public · watermarked visibility. Generate reached sign-in; no paid generation was submitted for this test.

A starting brief is: “Editorial portrait in soft studio light, neutral background, no text.” This proposed prompt is not the recorded prompt of the fixtures. Choose a composition, inspect the result, then create delivery variants outside the generator. Recheck the current quote before generating.

For the next asset, prepare one master before making responsive variants. Keep the visual approval and the width contract as two separate checks.

Disclosure: published by Voor AI; AI-assisted writing, with the local validator run and the public editor facts checked for this article.

DEV Community