Looking for Action or Script to Resize and Save WebP Files

[eznewmedia]

For a new website build, we were originally asked to save Webp images at 2048 pixels in width.  Now, they want those images to be 1000 pixels wide.  There are THOUSANDS of images in dozens of folders that need to be resized, so I thought I would create a simple action to run in a batch process to resize all the images in the master folder and sub folders, and then save to another folder.  Easy enough; however, when Photoshop goes to save the new WebP image during the batch process in the new folder, it stops and waits for me to choose the compression level of the new WebP image, which I would need to manually do for each image, which won't work. I've seen a script to resize images, and another that converts images to WebP and automatically save them, but nothing that combines both functions.  Can anyone help? 

Here is the script to open images in one folder, and then save WebP images in another folder:

https://community.adobe.com/t5/photoshop-ecosystem-discussions/batch-process-images-to-webp/m-p/1410...

Is it possible to add a command in the middle of that script to resize the images to 1000 pixels in width?

Thanks for the help!

[Stephen_A_Marsh]

Yes, I can add the code to my original script. Do you have a preference for the resize interpolation method? What about metadata and quality options?

I presume that you don't require colour profile conversions etc.

EDIT: It should just be a matter of a simple 2 or 3-step Action to resize and save and possibly close without saving, then running Automate > Batch.

[Stephen_A_Marsh]

@eznewmedia 

Try this, it works one top-level/root folder at a time:

/*
Batch Save As WebP 1000px Wide.jsx
https://community.adobe.com/t5/photoshop-ecosystem-discussions/looking-for-action-or-script-to-resize-and-save-webp-files/td-p/14282886
v1.0 - 7th December 2023, Stephen Marsh
Based on:
Batch Save As WebP.jsx
https://community.adobe.com/t5/photoshop-ecosystem-discussions/export-many-files-at-once-in-webp-format-photoshop/m-p/13604411
*/

#target photoshop

    (function () {

        // Ensure that version 2022 or later is being used
        var versionNumber = app.version.split(".");
        var versionCheck = parseInt(versionNumber);

        // Fail
        if (versionCheck < 23) {
            alert("You must use Photoshop 2022 or later to save using native WebP format...");
            // Pass

        } else {

            // Set the input and output folders
            var inputFolder = Folder.selectDialog("Please select the input folder:");
            if (inputFolder === null) {
                //alert('Script cancelled!');
                return;
            }

            var outputFolder = Folder.selectDialog("Please select the output folder:");
            if (outputFolder === null) {
                //alert('Script cancelled!');
                return;
            }

            // Limit the input files, add or remove extensions as required
            var fileList = inputFolder.getFiles(/\.(webp|tif|tiff|jpg|jpeg|psd|psb|png)$/i);
            fileList.sort();
            var savedDisplayDialogs = app.displayDialogs;
            app.displayDialogs = DialogModes.NO;

            // Set the file processing counter
            var fileCounter = 0;

            // Process the input files
            for (var i = 0; i < fileList.length; i++) {
                var doc = open(fileList[i]);
                activeDocument.resizeImage(UnitValue(1000, "px"), null, null, ResampleMethod.BICUBIC); // width, height, resolution, method
                saveWebP("compressionLossy", 75, true, true, true, true);
                activeDocument.close(SaveOptions.DONOTSAVECHANGES);
                // Increment the file saving counter
                fileCounter++;
            }

            app.displayDialogs = savedDisplayDialogs;
            alert('Script completed!' + '\n' + fileCounter + ' files saved to:' + '\r' + outputFolder.fsName);


            function saveWebP(compType, compValue, xmpData, exifData, psData, asCopy) {
                /*
                v1.1 - 12th March 2023, Stephen Marsh
                https://community.adobe.com/t5/photoshop-ecosystem-discussions/saving-webp-image-by-script/td-p/13642577
                */
                // Doc and path save variables
                var WebPDocName = activeDocument.name.replace(/\.[^\.]+$/, ''); // Remove file extension
                var WebPSavePath = outputFolder + "/" + WebPDocName + ".webp" // Change path as needed
                var WebPFile = new File(WebPSavePath); // Create the file object

                /*
                // Check for existing file object
                if (WebPFile.exists) {
                    // true = 'No' as default active button
                    if (!confirm("File exists, overwrite: Yes or No?", true))
                        // throw alert("Script cancelled!");
                        throw null;
                }
                */

                function s2t(s) {
                    return app.stringIDToTypeID(s);
                }
                var descriptor = new ActionDescriptor();
                var descriptor2 = new ActionDescriptor();

                // Compression parameters = "compressionLossless" | "compressionLossy"
                descriptor2.putEnumerated(s2t("compression"), s2t("WebPCompression"), s2t(compType)); // string variable
                var WebPCompIsLossless = false; // set the default flag for compression
                if (WebPCompIsLossless == false) {
                    // 0 (lowest lossy quality) - 100 (highest lossy quality)
                    descriptor2.putInteger(s2t("quality"), compValue); //  number variable
                }

                // Metadata options
                descriptor2.putBoolean(s2t("includeXMPData"), xmpData); // Boolean param moved to function call
                descriptor2.putBoolean(s2t("includeEXIFData"), exifData); // Boolean param moved to function call
                descriptor2.putBoolean(s2t("includePsExtras"), psData); // Boolean param moved to function call

                // WebP format and save path
                descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
                descriptor.putPath(s2t("in"), WebPFile); // Save path variable

                // Save As = false | Save As a Copy = true
                descriptor.putBoolean(s2t("copy"), asCopy); // Boolean param moved to function call

                // The extension
                descriptor.putBoolean(s2t("lowerCase"), true);

                // Execute the save
                executeAction(s2t("save"), descriptor, DialogModes.NO); // Change NO to ALL for dialog
            }
        }

    }());

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

[eznewmedia]

Hi Stephan, this script works really well!  Looking at the programming language, it's very logical and elegant.  It's still somewhat time consuming since it only does a single folder at a time, and so I have to choose the main folder, and then the destination folder for each set of images ... and there are hundreds of folders!  Is it possible to add a function in this script so it behaves like a Photoshop action to select a folder, and then all the subfolders?

I also see a "save as" function in the script that looks for existing files, so I'm guessing it might be possible to just have the script overwrite the existing files, or have a "flag" to check an option for overwriting existing files?  For my particular application, I'm working with a copy of the folders and files that I need to convert to smaller WebP images, so just have the script overwrite the existing files if choosing to save back to the original directory would be ideal! 

Trying to think through the logic, maybe if a folder is selected, and all of its sub folders are also selected, the script will have a dialogue for a check box to "overwrite existing files?" or something along those lines.  Not even sure if this is possible with scripting, but I thought I'd ask!  I can't wait to try out some of my own scripts ... can you recommend a good resource Stephen?

-Jim

[Stephen_A_Marsh]

I can make modifications, however, have you looked at my earlier suggestion of a simple 2 step action run via batch?

[eznewmedia]

Stephen,  actually I DID try the simple 2 step batch process before posting!  As I mentioned in my original post, the problem was when running the action in a batch, the process would stop and require manually clicking on "OK" to save on each file, which is why I was looking for an alternative.

[ianamalod]

yes! same here! 

[Stephen_A_Marsh]

@eznewmedia 

Try this new 1.1 version based on your feedback:

/*
Batch Save As WebP 1000px Wide.jsx
https://community.adobe.com/t5/photoshop-ecosystem-discussions/looking-for-action-or-script-to-resize-and-save-webp-files/td-p/14282886
v1.1 - 8th December 2023, Stephen Marsh
Special thanks to Paul MR for the recursive folder processing code:
photoshopgurus.com/forum/threads/batch-and-subfolders.22134/
*/

#target photoshop

    (function () {

        if (app.documents.length === 0) {

            // Ensure that version 2022 or later is being used
            var versionNumber = app.version.split(".");
            var versionCheck = parseInt(versionNumber);

            // Fail
            if (versionCheck < 23) {
                alert("You must use Photoshop 2022 or later to save using native WebP format...");
                return;

                // Pass
            } else {

                if (confirm('This script will resave all WebP files to 1000px wide. All sub-folders under the selected input folder will be processed. Continue?', false)) {

                    var imageFolder = Folder.selectDialog('Select the top-level folder:');

                    var origDialogs = app.displayDialogs;
                    app.displayDialogs = DialogModes.NO;

                    // Script Execution Timer - Function    
                    var timeDiff = {
                        setStartTime: function () {
                            d = new Date();
                            time = d.getTime();
                        },
                        getDiff: function () {
                            d = new Date();
                            t = d.getTime() - time;
                            time = d.getTime();
                            return t;
                        }
                    };

                    // Script Execution Timer - Start    
                    timeDiff.setStartTime();

                    // Set the file processing counter
                    var fileCounter = 0;

                    if (imageFolder != null) processFolder(imageFolder);

                    function processFolder(folder) {
                        var fileList = folder.getFiles()
                        for (var i = 0; i < fileList.length; i++) {
                            var file = fileList[i];
                            if (file instanceof File && file.name.match(/\.webp/i)) {
                                open(file);
                                // Start Main Code Block
                                activeDocument.resizeImage(UnitValue(1000, "px"), null, null, ResampleMethod.BICUBIC); // width, height, resolution, method
                                activeDocument.close(SaveOptions.SAVECHANGES);
                                fileCounter++;
                                // End Main Code Block
                            } else
                            if (file instanceof Folder) {
                                processFolder(file);
                            }
                        }
                    }

                    // End of script
                    app.displayDialogs = origDialogs;
                    alert('Batch resize and WebP overwrite completed!' + '\r' + fileCounter + ' WebP files processed' + '\r' + '(' + timeDiff.getDiff() / 1000 + ' seconds)');
                }
            }

        } else {
            alert('Please close all open documents before running this script!');
        }
    }());

[eznewmedia]

Stephen, I tried this script, but it requires clicking "OK" during the save process on each image (just like the two step batch process I first tried).  Your first script actually did NOT require clicking on OK!   I may try to closely example both of the scripts to see I can combine them myself, but I'm attaching a screen grab so you can see what I'm referring to. 

BTW, I really appreciate your expertise!   This scripting option is opening all sorts of possibilities to me!

[Stephen_A_Marsh]

I didn't get any popups in the script and I have code in there to turn off dialogs. I didn't get any popups with the action as there are checkboxes in Batch to suppress warnings.

[Stephen_A_Marsh]

Do you have any 3rd party WebP plugins installed which might be hijacking the save process?

This should be using the native Save capability of Photoshop 2022 or higher to save to WebP.

[eznewmedia]

Nope .. no plugins installed at all.   And that first script you posted didn't give me any popups, so I wonder what is different??  I see there is a new version of Photoshop (25.2) that I am going to download and install to see if that eliminates the issue ... stay tuned!

[Stephen_A_Marsh]

The first version performed a Save As a Copy, enforcing specific WebP compression and metadata parameters, regardless of what may or may not have been in the original files.

The second version simply performed a Save.

It must be that the WebP files don't have the required metadata in them for Photoshop to know what compression and metadata values to use, so it pops up the dialog for you to specify them. Note to self: Using my own files may not always have the same result, the OP should always provide sample files!

[eznewmedia · Accepted solution]

That must be it Stephen ... and the latest version of Photoshop produced the same dialogue (image attached).  In your first script,  you had compression parameters:

// Compression parameters = "compressionLossless" | "compressionLossy"
                descriptor2.putEnumerated(s2t("compression"), s2t("WebPCompression"), s2t(compType)); // string variable
                var WebPCompIsLossless = false; // set the default flag for compression
                if (WebPCompIsLossless == false) {
                    // 0 (lowest lossy quality) - 100 (highest lossy quality)
                    descriptor2.putInteger(s2t("quality"), compValue); //  number variable
                }

I don't see those in the second script, and the Photoshop dialogue is asking for a compression setting before saving in the pop up.  If you add that language to your second script, would that fix the issue??

[Stephen_A_Marsh · Accepted solution]

The second script just saves, it assumes that the WebP values are known from the file metadata, which worked for my test files...but who knows how your WebP files were saved.

Yes, the entire save as WebP function would need to be used.

 l'll look into it later...

EDIT:

@eznewmedia 

Try this 1.2 version:

/*
Batch Save As WebP 1000px Wide.jsx
https://community.adobe.com/t5/photoshop-ecosystem-discussions/looking-for-action-or-script-to-resize-and-save-webp-files/td-p/14282886
v1.2 - 8th December 2023, Stephen Marsh
Special thanks to Paul MR for the recursive folder processing code:
photoshopgurus.com/forum/threads/batch-and-subfolders.22134/
*/

#target photoshop

    (function () {

        if (app.documents.length === 0) {

            // Ensure that version 2022 or later is being used
            var versionNumber = app.version.split(".");
            var versionCheck = parseInt(versionNumber);

            // Fail
            if (versionCheck < 23) {
                alert("You must use Photoshop 2022 or later to save using native WebP format...");
                return;

                // Pass
            } else {

                if (confirm('This script will resave all WebP files to 1000px wide. All sub-folders under the selected input folder will be processed. Continue?', false)) {

                    var imageFolder = Folder.selectDialog('Select the top-level folder:');

                    var origDialogs = app.displayDialogs;
                    app.displayDialogs = DialogModes.NO;

                    // Script Execution Timer - Function    
                    var timeDiff = {
                        setStartTime: function () {
                            d = new Date();
                            time = d.getTime();
                        },
                        getDiff: function () {
                            d = new Date();
                            t = d.getTime() - time;
                            time = d.getTime();
                            return t;
                        }
                    };

                    // Script Execution Timer - Start    
                    timeDiff.setStartTime();

                    // Set the file processing counter
                    var fileCounter = 0;

                    if (imageFolder != null) processFolder(imageFolder);

                    function processFolder(folder) {
                        var fileList = folder.getFiles()
                        for (var i = 0; i < fileList.length; i++) {
                            var file = fileList[i];
                            if (file instanceof File && file.name.match(/\.webp/i)) {
                                open(file);
                                // Start Main Code Block
                                activeDocument.resizeImage(UnitValue(1000, "px"), null, null, ResampleMethod.BICUBIC); // width, height, resolution, method
                                saveWebP("compressionLossy", 75, true, true, true, true);
                                activeDocument.close(SaveOptions.DONOTSAVECHANGES);
                                fileCounter++;
                                // End Main Code Block
                                function saveWebP(compType, compValue, xmpData, exifData, psData, asCopy) {
                                    /*
                                    v1.1 - 12th March 2023, Stephen Marsh
                                    https://community.adobe.com/t5/photoshop-ecosystem-discussions/saving-webp-image-by-script/td-p/13642577
                                    */
                                    // Doc and path save variables
                                    var WebPDocName = activeDocument.name.replace(/\.[^\.]+$/, ''); // Remove file extension
                                    var WebPSavePath = activeDocument.path.fsName + "/" + WebPDocName + ".webp" // Change path as needed
                                    var WebPFile = new File(WebPSavePath); // Create the file object

                                    /*
                                    // Check for existing file object
                                    if (WebPFile.exists) {
                                        // true = 'No' as default active button
                                        if (!confirm("File exists, overwrite: Yes or No?", true))
                                            // throw alert("Script cancelled!");
                                            throw null;
                                    }
                                    */

                                    function s2t(s) {
                                        return app.stringIDToTypeID(s);
                                    }
                                    var descriptor = new ActionDescriptor();
                                    var descriptor2 = new ActionDescriptor();

                                    // Compression parameters = "compressionLossless" | "compressionLossy"
                                    descriptor2.putEnumerated(s2t("compression"), s2t("WebPCompression"), s2t(compType)); // string variable
                                    var WebPCompIsLossless = false; // set the default flag for compression
                                    if (WebPCompIsLossless == false) {
                                        // 0 (lowest lossy quality) - 100 (highest lossy quality)
                                        descriptor2.putInteger(s2t("quality"), compValue); //  number variable
                                    }

                                    // Metadata options
                                    descriptor2.putBoolean(s2t("includeXMPData"), xmpData); // Boolean param moved to function call
                                    descriptor2.putBoolean(s2t("includeEXIFData"), exifData); // Boolean param moved to function call
                                    descriptor2.putBoolean(s2t("includePsExtras"), psData); // Boolean param moved to function call

                                    // WebP format and save path
                                    descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
                                    descriptor.putPath(s2t("in"), WebPFile); // Save path variable

                                    // Save As = false | Save As a Copy = true
                                    descriptor.putBoolean(s2t("copy"), asCopy); // Boolean param moved to function call

                                    // The extension
                                    descriptor.putBoolean(s2t("lowerCase"), true);

                                    // Execute the save
                                    executeAction(s2t("save"), descriptor, DialogModes.NO); // Change NO to ALL for dialog
                                }
                            } else
                            if (file instanceof Folder) {
                                processFolder(file);
                            }
                        }
                    }

                    // End of script
                    app.displayDialogs = origDialogs;
                    alert('Batch resize and WebP overwrite completed!' + '\r' + fileCounter + ' WebP files processed' + '\r' + '(' + timeDiff.getDiff() / 1000 + ' seconds)');
                }
            }

        } else {
            alert('Please close all open documents before running this script!');
        }
    }());

[eznewmedia]

By golly ... SUCCESS!  It is working like a charm!  Stephen:  your scripting skills are unsurpassed!  Bravo!

[Stephen_A_Marsh]

By golly ... SUCCESS!  It is working like a charm!  Stephen:  your scripting skills are unsurpassed!  Bravo!

By @eznewmedia

Great, I'm glad you're happy! Looks like you can mark the final script as a correct answer then.

Thank you for the kind words, it's just a matter of perspective, I'm just a scripting noob in many ways as it's a hobby, my background or day job isn't in programming.

[eznewmedia]

Stephan, just so you know, I set the script to process last evening, and it just finished the batch process with no timeouts or errors!  It processed an amazing 24,840 images in dozens of folders, and the entire process took 61,655.117 seconds (I did the math:  that's just over 17 hours!)  Imagine if I had had to run an action in a batch where I had to click "OK" for every save ... that would have been excruciating! This made the process automatic, which helped a great deal!  

[Stephen_A_Marsh]

Thanks for the feedback, that is great news!

[JonDemand]

So i've been using your original script to convert PSD Files to Webp,  and then i've been running a seperate Batch action to resize those output files to 1000px on the longest edge,  would there be a way to combine these 2 scripts together?  the PSDs i'm working with are in multiple sub folders,  and i'd like to gather them all,  and output them to one single folder (ignoring folder structure) and resize the longest edge to 1000px during this process?  i'm looking at the two scripts side by side,  but i'm not that conversant with scripting to put the two functions together 😞

[Stephen_A_Marsh]

@JonDemand 

The original script (link below) has an option to run an action, so an action using Fit Image to 1000px width and 1000px height could be created and played by the script.

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

The following code block near the top of the script would have the double forward slashes comment code removed //var from before the two variable declarations: var

// Optionally run a specified action
//var actionName = "Molten Lead"; // Action to run, change as needed
//var actionSet = "Default Actions"; // Action set to run, change as needed

You would also change the placeholder action set name from "Default Actions" and the action name from "Molten Lead".

I added this option to the script so that any "extra" processing could be easily performed without making major script changes.

This is just one option, later versions of the script did add resizing as a native feature without requiring an action.

[JonDemand]

ooh thanks,  i didn't see that thread originally,  so didn't see the later versions,  this will work great 🙂

Is there an easy way to convert it to a top level folder instead of a single folder?  ie i want to point it at folder A and have it find folder A\folder 1 , Folder A\Folder 2 and grab the files out of each folder and place it in one output folder

[Stephen_A_Marsh]

Is there an easy way to convert it to a top level folder instead of a single folder?  ie i want to point it at folder A and have it find folder A\folder 1 , Folder A\Folder 2 and grab the files out of each folder and place it in one output folder

By @JonDemand

At the moment the code saves to the same location as the source files. So WebP files would be created in both folder A\folder 1  and Folder A\Folder 2

Yes, it is possible to change that behaviour and save to a single folder of your choice. Would you like to manually select the folder, or have the script create a new folder to save to outside of the root/top-level folder, using a name such as "WebP Versions" or similar?

[JonDemand]

Select a folder would be fantastic,  thank you 🙂

[Stephen_A_Marsh]

@JonDemand – so how did the scripts work out?