Web-ready thumbnail set — one image, three responsive sizes

// Web-ready thumbnail set — one image, three responsive sizes
// demo_thumb_for_web.js
//!INPUT: INPUT
//!OUTPUT: OUTPUT_320, OUTPUT_640, OUTPUT_1280
//!PARAM: QUALITY:integer=82,min=10,max=100

// Loads a source image, then writes three responsive WebP thumbnails
// (320 / 640 / 1280 px wide) at the requested quality. Aspect ratio is
// preserved. Each variant is a separate clone so the source isn't
// mutated between resizes.
//
// This is exactly the pipeline mlcgo.eu's productweb runs at build
// time to feed an <img srcset>: tiny files, lossy WebP, native speed.
// 35× smaller than the source PNG on a typical photo.

const src = Engine.loadImage(INPUT);

function thumb(width, outKey) {
  const c = src.clone();
  const ratio = c.height / c.width;
  c.resize(width, Math.max(1, Math.round(width * ratio)));
  c.save(outKey, { quality: QUALITY });
  c.free();
}

thumb(320,  OUTPUT_320);
thumb(640,  OUTPUT_640);
thumb(1280, OUTPUT_1280);

src.free();

// © 2026 Michael Lechner · mlc OpticScript · https://mlcgo.eu · Elastic License 2.0