Web-fertiges Thumbnail-Set — ein Bild, drei responsive Größen
Erzeugt aus einer Quelle die drei responsiven Größen 320 / 640 / 1280 px als WebP — genau die Pipeline, die mlcgo.eu zur Build-Zeit für <img srcset> einsetzt. Kleine Dateien, lossy WebP mit QUALITY-Regler, native Geschwindigkeit. 1 MB Foto rein, drei 10–50 KB Thumbnails raus.
INPUT
320 px (mobile)
640 px (tablet)
1280 px (desktop)
JavaScript
// 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