Discussion on: Create responsive images with gulp-sharp-responsive

[Sam Miller]

For those how might be curious, to group images into output directories named after their filename base, filename excluding suffixes, I used the gulp plugin "rename" (npmjs.com/package/gulp-rename) as in the following. Helpful when dealing with a lot of images.

function sharpImg() {
    return src('_sort/**/*.jpg')
        .pipe(rename(function (path) {
            path.dirname += "/" + path.basename;
        }))
        .pipe(sharpResponsive({
            formats: [
                // jpeg
                { width: 640, format: "jpeg", rename: { suffix: "-sm" } },
                { width: 768, format: "jpeg", rename: { suffix: "-md" } },
                { width: 1024, format: "jpeg", rename: { suffix: "-lg" } },
                // webp
                { width: 640, format: "webp", rename: { suffix: "-sm" } },
                { width: 768, format: "webp", rename: { suffix: "-md" } },
                { width: 1024, format: "webp", rename: { suffix: "-lg" } },
                // avif
                { width: 640, format: "avif", rename: { suffix: "-sm" } },
                { width: 768, format: "avif", rename: { suffix: "-md" } },
                { width: 1024, format: "avif", rename: { suffix: "-lg" } },
            ]
        }))
        .pipe(dest('_sorted'))
}