Scripts/Image Processor

[NigelD1]

Is there any chance that the option to convert a batch of images to WebP could be introduced into the Photoshop Scripts/Image processor, rather than having to write an action to do it please?

[Dilshad Mansha]

Here's a Photoshop script with a user interface (UI) for converting images to the WebP format, allowing you to customize compression settings and include metadata.

/*
Batch Save As WebP.jsx
https://community.adobe.com/t5/photoshop-ecosystem-ideas/scripts-image-processor/idi-p/15067404
v1.0 - 01th January 2025. Dilshad Mansha
*/

//target photoshop

function main() {
    if (parseInt(app.version.split(".")[0]) < 23) {
        alert("You must use Photoshop 2022 or later to save using native WebP format...");
        return;
    }

    // Create the UI dialog
    var dlg = new Window("dialog", "WebP Exporter");
    dlg.orientation = "column";
    
    // Input Folder
    dlg.add("statictext", undefined, "Select Input Folder:");
    var inputFolderBtn = dlg.add("button", undefined, "Browse...");
    var inputFolderText = dlg.add("edittext", [0, 0, 300, 20], "", {readonly: true});

    inputFolderBtn.onClick = function () {
        var folder = Folder.selectDialog("Please select the input folder:");
        if (folder) inputFolderText.text = folder.fsName;
    };

    // Output Folder
    dlg.add("statictext", undefined, "Select Output Folder:");
    var outputFolderBtn = dlg.add("button", undefined, "Browse...");
    var outputFolderText = dlg.add("edittext", [0, 0, 300, 20], "", {readonly: true});

    outputFolderBtn.onClick = function () {
        var folder = Folder.selectDialog("Please select the output folder:");
        if (folder) outputFolderText.text = folder.fsName;
    };

    // Compression Settings
    dlg.add("statictext", undefined, "Compression Quality (0-100):");
    var qualitySlider = dlg.add("slider", [0, 0, 300, 20], 75, 0, 100);

    dlg.add("statictext", undefined, "Include Metadata:");
    var includeXMP = dlg.add("checkbox", undefined, "Include XMP Data");
    var includeEXIF = dlg.add("checkbox", undefined, "Include EXIF Data");
    var includePSExtras = dlg.add("checkbox", undefined, "Include Photoshop Extras");

    includeXMP.value = true;
    includeEXIF.value = true;
    includePSExtras.value = true;

    // Buttons
    var btnGroup = dlg.add("group");
    var runBtn = btnGroup.add("button", undefined, "Run");
    var cancelBtn = btnGroup.add("button", undefined, "Cancel");

    runBtn.onClick = function () {
        if (!inputFolderText.text || !outputFolderText.text) {
            alert("Please select both input and output folders.");
            return;
        }
        dlg.close(1);
        processFiles(inputFolderText.text, outputFolderText.text, qualitySlider.value, includeXMP.value, includeEXIF.value, includePSExtras.value);
    };

    cancelBtn.onClick = function () {
        dlg.close(0);
    };

    dlg.center();
    dlg.show();
}

function processFiles(inputFolderPath, outputFolderPath, quality, xmp, exif, psExtras) {
    var inputFolder = new Folder(inputFolderPath);
    var outputFolder = new Folder(outputFolderPath);

    if (!inputFolder.exists || !outputFolder.exists) {
        alert("Invalid folders selected.");
        return;
    }

    var fileList = inputFolder.getFiles(/\.(webp|tif|tiff|jpg|jpeg|psd|psb|png)$/i);
    if (fileList.length === 0) {
        alert("No supported files found in the input folder.");
        return;
    }

    app.displayDialogs = DialogModes.NO;
    var fileCounter = 0;

    for (var i = 0; i < fileList.length; i++) {
        try {
            var doc = open(fileList[i]);
            if (activeDocument.mode !== DocumentMode.RGB) {
                activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
                activeDocument.changeMode(ChangeMode.RGB);
                activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;
            } else {
                activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;
            }

            saveWebP(outputFolder, quality, xmp, exif, psExtras);
            activeDocument.close(SaveOptions.DONOTSAVECHANGES);
            fileCounter++;
        } catch (e) {
            alert("Error processing file: " + fileList[i].fsName);
        }
    }

    app.displayDialogs = DialogModes.ALL;
    alert("Script completed!\n" + fileCounter + " files saved to: \n" + outputFolder.fsName);
}

function saveWebP(outputFolder, quality, xmp, exif, psExtras) {
    var WebPDocName = activeDocument.name.replace(/\.[^\.]+$/, '');
    var WebPSavePath = outputFolder + "/" + WebPDocName + ".webp";
    var WebPFile = new File(WebPSavePath);

    function s2t(s) {
        return app.stringIDToTypeID(s);
    }

    var descriptor = new ActionDescriptor();
    var descriptor2 = new ActionDescriptor();

    descriptor2.putEnumerated(s2t("compression"), s2t("WebPCompression"), s2t("compressionLossy"));
    descriptor2.putInteger(s2t("quality"), quality);
    descriptor2.putBoolean(s2t("includeXMPData"), xmp);
    descriptor2.putBoolean(s2t("includeEXIFData"), exif);
    descriptor2.putBoolean(s2t("includePsExtras"), psExtras);

    descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
    descriptor.putPath(s2t("in"), WebPFile);
    descriptor.putBoolean(s2t("copy"), true);
    descriptor.putBoolean(s2t("lowerCase"), true);

    executeAction(s2t("save"), descriptor, DialogModes.NO);
}

main();

[Stephen Marsh]

@NigelD1 

You can also try my WebP batch processor script, code here:

https://community.adobe.com/t5/photoshop-ecosystem-discussions/export-many-files-at-once-in-webp-for...

Quickstart:

1. Copy the source code text to the clipboard
2. Open a new blank file in a plain-text editor (not in a word processor)
3. Paste the code in
4. Save as a plain text format file – .txt
5. Rename the saved file extension from .txt to .jsx
6. Install or browse to the .jsx file to run

Adobe Photoshop Script Installation Location

Scripts are installed in the /Presets/Scripts folder

Mac OS Example:

• /Applications⁩/Adobe Photoshop CC 2019⁩/Presets⁩/Scripts
• /Applications/Adobe Photoshop 2021/Presets/Scripts

(If this path does not match your version, it should be a simple enough process to find the correct folder using this guide)

Win OS Example:

• C:\Program Files\Adobe\Adobe Photoshop CC 2018\Presets\Scripts
• C:\Program Files\Adobe\Adobe Photoshop 2021\Presets\Scripts

(If this path does not match your version, it should be a simple enough process to find the correct folder using this guide)

Instead of installing, select File > Scripts > Browse and navigate to the script file. Scripts recorded into an Action via the Browse command will record the entire absolute path to the script, often making them unsuitable for use on multiple computers. Installed scripts will only record the script name into an Action, which is the better option for Actions installed on multiple computers.

Further information at the Adobe site:
https://helpx.adobe.com/photoshop/using/scripting.html

NOTE: If running, Adobe Photoshop must be quit and restarted for newly added scripts to become accessible.

Full instructions for saving and running the script code:

https://prepression.blogspot.com/2017/11/downloading-and-installing-adobe-scripts.html

[Stephen Marsh]

@Dilshad Mansha – parts of that script look very familiar to me!  :]

[NigelD1]

Dilshad/Stephen, thank you for your replies. I'll take a look at these scripts and see how I get on.

[Stephen Marsh]

@NigelD1 

So, how did you go with the scripts?

[NigelD1]

Hi Stephen, I haven't had chance to do anything with it yet but will do. The urgency has been reduced because my contact is saying he will accept JPEGs. However, I'd still like to be able to convert. I may message you if I get into difficulties - thanks for your help.

[Stephen Marsh]

@NigelD1 

Thanks for the reply, feedback on the script is always appreciated, so please do post back and mark correct answers to update the topic.

[NigelD1]

Thanks Stephen, as per my message to you, the script downloaded straight away and ran as it was programmed to do. That will save me a load of time - thanks again.

[Stephen Marsh]

@NigelD1 – Thanks, I'll look into the fit feature as per your private message (the feature resizes the longest edge of each image to the specified value and proportionally resizes the shorter edge, there are no separate width and height fields).

.

[NigelD1]

Thanks Stephen. I think I would probably need separate fields for width and height in order for me to enter appropriate figures to constrain the overall dimensions to 2400px x 1600px. Just having the long edge dimension means that I would get 2400px for the width of a portrait image whereas I'm looking for 1600px. See PM.

[Stephen Marsh]

Thanks Stephen. I think I would probably need separate fields for width and height in order for me to enter appropriate figures to constrain the overall dimensions to 2400px x 1600px. Just having the long edge dimension means that I would get 2400px for the width of a portrait image whereas I'm looking for 1600px.

By @NigelD1

In the short term, I suggest you uncheck the tickbox in the script to fit the longest edge. As the script can reference an action, you can always record the File > Automate > Fit Image script into an action step and have the script play the action to your desired sizes.

[NigelD1]

One thing I could do is to just use the script for file type conversion and resize separately- two steps but it works. I appreciate your help thanks.

[Stephen Marsh]

@NigelD1 

I'm not even sure if File > Automate > Fit Image would work for you, it seems more about conditionally processing portrait vs. landscape orientation with different criteria.

For example, if I have a portrait orientation 5000 x 7000 px or landscape 7000 x 5000 px image and setup Fit Image to W: 1600 & H: 2400, both the portrait and landscape are resized to 1600 px wide. The landscape image is 1600 x 1143 px and the portrait is 1600 x 2240 px – the height of the portrait image isn't 2400 px as desired as the width was the overriding criteria.

[Stephen Marsh]

One thing I could do is to just use the script for file type conversion and resize separately- two steps but it works. I appreciate your help thanks.

By @NigelD1

That's the whole idea of the script having an option to play an action. Anything that the script isn't designed to do, one might be able to put into the action that is run on each image. So hopefully no need for multiple steps.

There are conditional actions and orientation is an option, so you can have two different Image Size or Fit Image targets for each orientation in the action.

[NigelD1]

A bit more homework on my part would have helped here. I ran your script and then incorporated an action which sharpens, changes to sRGB and uses File/Automate/Fit Image and I can just press one button and it works a treat - perfect. I hadn't used File/automate/Fit Image before despite being a PS user for nearly 20 years so you learn something every day. Really appreciate your guidance thank you.