Transcoding images to a specified output format

[cargocultprogramming]

I'm thinking about a new feature for this plugin, that would allow transcoding source images into a specified output format. This would allow one to drop any image format into /content and transcode them to a particular format in the output. Say for example you have a mix of png, gif and jpg files in your source, the plugin would transcode them all to - for example - webp.

This would allow one to keep high-resolution, good quality images in the repository while still serving web-optimized images in the output.

The list of formats to transcode into, could be specified like this:

IMAGE_PROCESS = {
    "artclimg": {
    "type": "responsive-image",
--> "output-format": ["webp", "original"],  # defaults to original when omitted to keep backwards compatibility; when present, srcset serves webp first, then original
    "sizes": (
        "(min-width: 1200px) 800px, "   # Desktop: max 800px
        "(min-width: 992px) 650px, "    # Small Desktop: max 650px
        "(min-width: 768px) 718px, "    # Tablet: max 718px
        "100vw"                         # Mobile: full width
    ),
    "srcset": [
        # scale_in will preserve ratio and resize to fit within the specified dimensions
        ("480w", ["scale_in 480 360 True"]),
        ("720w", ["scale_in 720 540 True"]),
        ("800w", ["scale_in 800 600 True"]),
        ("1000w", ["scale_in 1000 750 True"]),
        ("1200w", ["scale_in 1200 900 True"]),
    ],
    "default": "800w",
    },
}

Instead of starting with a list, a first implementation could specify a single format to transcode into, e.g. "output-format": "webp".

Before I dig into this I want to check in with the maintainers. Would such a feature be a welcome addition? Any pitfalls to watch out for in the implementation? General thoughts?

[patrickfournier]

That would be a nice addition. However I do not see how "output-format" as a list value would work. If we want to specify different file formats in a srcset, I think we should specify the format along the transform operations.

IMAGE_PROCESS = {
    "artclimg": {
    "type": "responsive-image",
    "output-format": "webp",  # Default output format for artclimg. Defaults to original when omitted to keep backwards compatibility
    "sizes": (
        "(min-width: 1200px) 800px, "   # Desktop: max 800px
        "(min-width: 992px) 650px, "    # Small Desktop: max 650px
        "(min-width: 768px) 718px, "    # Tablet: max 718px
        "100vw"                         # Mobile: full width
    ),
    "srcset": [
        # scale_in will preserve ratio and resize to fit within the specified dimensions
        ("480w", ["scale_in 480 360 True"], "jpg"), # Using jpg here
        ("720w", ["scale_in 720 540 True"]), # Using webp here
        ("800w", ["scale_in 800 600 True"]), # Using webp here
        ("1000w", ["scale_in 1000 750 True"]), # Using webp here
        ("1200w", ["scale_in 1200 900 True"], "original"), # Using original here
    ],
    "default": "800w", # Webp, since the 800w transform outputs a webp image.
    # Optionally:
    # "default": (["scale_in 2400 1800 True"], "original"),
    },
}