Cloud services

Blog post

Beautiful images, without making hosting depend on them

This site's warm photography and miniature worlds begin as generative-AI artwork. Local tooling does not draw them; it gives each source a sensible bitmap size and lets perceptual quality—not habit—choose the encoding.

The hosting Action uploads whatever a site commits; image optimization is not a platform requirement. This brochure's source illustrations are created in approved GPT-5.6 Sol-or-higher generative-AI sessions. Its local Python pass is limited to layout sizing, compression search, perceptual scoring, checksums, metadata, and HTML updates.

First, the script derives the bitmap dimensions from the real CSS slot on a 1920-pixel layout and produces 2× and 1× candidates. Size is therefore a layout decision, not an optimizer variable. Every size starts again from the untouched original, applies any verified coordinate crop in memory, and independently evaluates every eligible format. A round-robin gives each format a known share of the total compression budget. Within that share, Optuna's multi-objective Tree-structured Parzen Estimator adapts later quality trials from measured fidelity and byte size; PNG's ten compression levels are tested exhaustively. SSIMULACRA2 measures perceptual fidelity against that size's bicubic reference. The selected point on the combined Pareto front weights normalized quality twice as strongly as normalized byte size.

  1. Keep and identify the source Untouched artwork lives at {stem}-original. A reviewed crop is saved as {stem}-original-cropped-left-top-right-bottom; the optimizer verifies that preview pixel-for-pixel against the raw crop.
  2. Measure the slot CSS wrap, grid track, aspect ratio, and device pixel ratio determine the output dimensions.
  3. Choose each width once A JPEG or PNG fallback is written as {stem}-optimized-{source-sha8}-{width} and placed directly in responsive HTML for no-JavaScript and Baseline 2021 support.
  4. Prefer modern per candidate When AVIF or WebP wins at a particular width, the manifest records that exact MIME. A tiny decode probe decides whether the browser receives it or that width's universal fallback.

Before searching, the script hashes each raw original, parses and verifies any coordinate-named crop preview, derives an effective identity from raw SHA-1 plus crop box, and validates every recorded derivative's filename, byte length, and full SHA-1. If that effective identity and complete output set still match, the stem is reused without running Optuna. A new image has no record and is optimized once. Replacing the raw source or changing its approved crop creates a new derivative family, updates every HTML src and srcset, and removes the old family from the local repository.

The current illustrations are intentionally opaque, warm cream compositions rather than transparent line diagrams. The optimizer can also handle true-alpha originals: in that case JPEG is excluded, PNG remains the guaranteed fallback, and modern formats preserve transparency.

An artist feeding original artwork into a friendly optimization studio that compares several image sizes

Why the filenames say what they are

Raw sources end in -original; optional crop previews carry their four pixel coordinates in the filename. Every generated deliverable uses {stem}-optimized-{source-sha8}-{width}.{format}. Without a crop, that token begins the raw file’s SHA-1. With a crop, it begins the effective SHA-1 derived from the raw digest and crop box—not a checksum of the compressed derivative. The manifest retains raw provenance, crop metadata, the full effective digest, and a separate full digest for each output. There is no duplicate unsuffixed fallback: HTML points directly at a width-specific file. On a changed-source run, the script owns and removes every older derivative family except the newly selected candidates.

Progressive enhancement, not format optimism

The HTML begins with a width-specific JPEG or PNG src and a complete universal srcset, so responsive selection does not depend on JavaScript. A small loader fetches the manifest, probes AVIF and WebP, and replaces each width with its independently chosen preferred candidate only when that candidate's MIME decodes. If JavaScript, the manifest, or a probe fails, the browser keeps the dependable responsive fallback already on screen.

See the images in context on how the platform works, or return to all posts.