Skip to main content
Art by JLM
Participating Frequently
May 11, 2022
Answered

Exporting artboards to webp format?

  • May 11, 2022
  • 6 replies
  • 26759 views

Great that the latest Photoshop has "full" webp support, but lacking is the ability to export artboards to webp format. I build a lot of my website graphics as artboards, but it looks like I will need an intermediary step of saving the artboards as PSD files first, and then exporting them as webp? Or am I missing something?

 

Thanks,

 

Judi

Correct answer Stephen Marsh
quote

I can't test it properly now due to errors reported in later versions that were not triggered back in the earlier versions of Photoshop. I think that the code needs a major overhaul and rewrite adding various options in a single script interface.

 


By @Stephen Marsh

 

I have rewritten the script. This v2.0 is the basic framework which I will use to add a custom interface in the next release.

 

It has not had exhaustive testing with complex artboards. This new ground-up rewrite uses different processing for the artboards (no longer based on smart objects), so we'll need to see how the results are with feedback from diverse users and use cases. It should be faster than the previous scripts.

 

This version does not offer 200% sizing or JPEG options, but they are easy enough to transplant if needed.

 

The next 2.1 version will offer these and other features.

 

/*
Artboards-to-WEBP-PS2025-v2.jsx
22nd July 2025, v2.0 - Stephen Marsh
https://community.adobe.com/t5/photoshop-ecosystem-discussions/exporting-artboards-to-webp-format/td-p/12937135

* Artboard processing rewritten from the original v1.0-1.9 scripts to avoid errors in later versions of Photoshop
* Only for Photoshop 2022 (v23.x.x) or later!
* Saves artboards as lossy WebP, quality: 75
* Select a save location and prefix + separator to be added to the artboard name (uses the doc name by default)
* Filename word spaces (%20) are converted to web-friendly hyphens
* Existing files will be silently overwritten
* Converts non-RGB mode to sRGB color space, RGB color mode and 8 bpc
* If RGB mode, the original color space is retained - beware if using wide gamut spaces such as ProPhoto RGB!
* Artboard content is constrained to the artboard bounds
* Metadata is removed and the document ICC profile is embedded
* Output directory automatically opened
*/

#target photoshop

    (function () {

        try {

            app.bringToFront();

            // Ensure that version 2022 or later is being used
            var versionNumber = app.version.split(".");
            var versionCheck = parseInt(versionNumber);
            if (versionCheck < 23) {
                alert("You must use Photoshop 2022 or later to save using native WebP format...");
                return;
            }

            // Ensure a document is open
            if (app.documents.length === 0) {
                alert("Please open a document first!");
                return;
            }

            // Ensure that the doc has an artboard
            if (!hasArtboards()) {
                alert("No artboards found, script canceled!");
                return;
            }

            // Get the path of the active document (only if it's saved)
            var defaultPath = (app.activeDocument && app.activeDocument.fullName)
                ? app.activeDocument.fullName.parent : Folder("~/Desktop");
            var outputFolder = Folder.selectDialog(
                "Select an output folder to save the artboards as WebP:",
                defaultPath
            );
            if (outputFolder === null) {
                app.beep();
                return;
            }

            var doc = app.activeDocument;
            var layerSets = doc.layerSets;

            // Create a ScriptUI dialog to get the prefix
            var dlg = new Window("dialog", "Enter Prefix");
            dlg.orientation = "column";
            dlg.alignChildren = ["fill", "top"];
            dlg.spacing = 10;
            dlg.margins = 16;
            var defaultPrefix = doc.name.replace(/\.[^\.]+$/, '').replace(/ /g, '-') + "_";
            dlg.add("statictext", undefined, "Add the prefix including separator character to the artboard name:");
            var input = dlg.add("edittext", undefined, defaultPrefix);
            input.characters = 40;
            input.active = true;
            var btnGroup = dlg.add("group"); // OK and Cancel buttons
            btnGroup.alignment = "right";
            var okBtn = btnGroup.add("button", undefined, "OK");
            var cancelBtn = btnGroup.add("button", undefined, "Cancel");
            var preFix; // Result handling
            okBtn.onClick = function () {
                preFix = input.text;
                dlg.close(1);
            };
            cancelBtn.onClick = function () {
                dlg.close(0);
            };

            if (dlg.show() !== 1) {
                app.beep();
                return;
            }

            // Hide the Photoshop panels
            app.togglePalettes();

            // Create the progress bar window
            var progressWin = new Window("palette", "Processing Artboards", undefined, { closeButton: false });
            progressWin.orientation = "column";
            progressWin.alignChildren = ["fill", "top"];
            progressWin.spacing = 10;
            progressWin.margins = 16;
            var progressText = progressWin.add("statictext", undefined, "Starting...");
            var progressBar = progressWin.add("progressbar", undefined, 0, layerSets.length);
            progressBar.preferredSize = [300, 20];
            progressWin.show();

            doc.duplicate(doc.name.replace(/\.[^\.]+$/, '').replace(/ /g, '-'), false);

            // If the doc isn't in RGB mode
            if (activeDocument.mode !== DocumentMode.RGB)
                // Convert to sRGB
                activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
            // Ensure that the doc mode is RGB (to correctly handle Indexed Color mode)
            activeDocument.changeMode(ChangeMode.RGB);
            activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;

            // Clean out unwanted metadata
            deleteDocumentAncestorsMetadata();
            removeCRSmeta();

            var dupedDoc = app.activeDocument;
            var dupedDoclayerSets = app.activeDocument.layerSets;
            var fileCounter = 0;

            // Process the artboards
            for (var i = dupedDoclayerSets.length - 1; i >= 0; i--) {

                var currentSet = dupedDoclayerSets[i];

                // Select the layerSet
                dupedDoc.activeLayer = currentSet;

                // Update progress bar window
                progressText.text = "Processing: " + currentSet.name + " (" + (fileCounter + 1) + " of " + layerSets.length + ")";
                progressBar.value = fileCounter + 1;
                app.refresh();

                // Conditionally process artboards - not layerSets or frames
                if (isArtboard() === true) {

                    // Dupe artboard to new doc
                    dupeActiveLayer(currentSet.name, currentSet.name);

                    trimTransparency(true, true, true, true);

                    // Combine the prefix with the filename, RegEx replace illegal filename characters with a hyphen
                    var artboardName = preFix + app.activeDocument.activeLayer.name.replace(/[:\/\\*\?\"\<\>\|\\\r\\\n. ]/g, "-");

                    saveAsWebP(artboardName);

                    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);

                    fileCounter++;
                }
            }

            dupedDoc.close(SaveOptions.DONOTSAVECHANGES);

            // Ensure Photoshop has focus before closing the progress bar window
            app.bringToFront();
            progressWin.close();

            // Restore the Photoshop panels
            app.togglePalettes();

            // End of script notification
            app.beep();
            alert(fileCounter + ' WebP files saved to: ' + '\r' + outputFolder.fsName);

            // Open the output folder in Windows Explorer or the Mac Finder
            outputFolder.execute();


            ///// FUNCTIONS /////

            function hasArtboards() {
                try {
                    for (var i = 0; i < activeDocument.layerSets.length; i++) {
                        activeDocument.activeLayer = activeDocument.layerSets[i];
                        var r = new ActionReference();
                        r.putEnumerated(stringIDToTypeID('layer'), stringIDToTypeID('ordinal'), stringIDToTypeID('targetEnum'));
                        var options = executeActionGet(r);
                        if (options.hasKey(stringIDToTypeID('artboard'))) return true;
                    }
                    return false;
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function isArtboard() {
                try {
                    var d = new ActionDescriptor();
                    var r = new ActionReference();
                    r.putEnumerated(stringIDToTypeID('layer'), stringIDToTypeID('ordinal'), stringIDToTypeID('targetEnum'));
                    var options = executeActionGet(r);
                    return options.hasKey(stringIDToTypeID('artboard'));
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function dupeActiveLayer(docName, layerName) {
                try {
                    var c2t = function (s) {
                        return app.charIDToTypeID(s);
                    };
                    var s2t = function (s) {
                        return app.stringIDToTypeID(s);
                    };
                    var descriptor = new ActionDescriptor();
                    var reference = new ActionReference();
                    var reference2 = new ActionReference();
                    reference.putClass(s2t("document"));
                    descriptor.putReference(c2t("null"), reference);
                    descriptor.putString(s2t("name"), docName); // Doc name
                    reference2.putEnumerated(s2t("layer"), s2t("ordinal"), s2t("targetEnum"));
                    descriptor.putReference(s2t("using"), reference2);
                    descriptor.putString(s2t("layerName"), layerName); // Layer name
                    executeAction(s2t("make"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function trimTransparency(top, bottom, left, right) {
                try {
                    var c2t = function (s) {
                        return app.charIDToTypeID(s);
                    };
                    var s2t = function (s) {
                        return app.stringIDToTypeID(s);
                    };
                    var descriptor = new ActionDescriptor();
                    descriptor.putEnumerated(s2t("trimBasedOn"), s2t("trimBasedOn"), c2t("Trns"));
                    descriptor.putBoolean(s2t("top"), top);
                    descriptor.putBoolean(s2t("bottom"), bottom);
                    descriptor.putBoolean(s2t("left"), left);
                    descriptor.putBoolean(s2t("right"), right);
                    executeAction(s2t("trim"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function removeCRSmeta() {
                try {
                    if (!documents.length) return;
                    if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                    var xmp = new XMPMeta(app.activeDocument.xmpMetadata.rawData);
                    XMPUtils.removeProperties(xmp, XMPConst.NS_CAMERA_RAW, "", XMPConst.REMOVE_ALL_PROPERTIES);
                    app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function deleteDocumentAncestorsMetadata() {
                try {
                    whatApp = String(app.name);
                    if (whatApp.search("Photoshop") > 0) {
                        if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                        var xmp = new XMPMeta(activeDocument.xmpMetadata.rawData);
                        xmp.deleteProperty(XMPConst.NS_PHOTOSHOP, "DocumentAncestors");
                        app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                    }
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function saveAsWebP(saveName) {
                try {
                    var s2t = function (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"), 75);
                    descriptor2.putBoolean(s2t("includeXMPData"), false);
                    descriptor2.putBoolean(s2t("includeEXIFData"), false);
                    descriptor2.putBoolean(s2t("includePsExtras"), false);
                    descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
                    descriptor.putPath(s2t("in"), new File(outputFolder + '/' + saveName + '.webp'), true);
                    descriptor.putBoolean(s2t("lowerCase"), true);
                    descriptor.putEnumerated(s2t("saveStage"), s2t("saveStageType"), s2t("saveSucceeded"));
                    executeAction(s2t("save"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

        } catch (e) {
            alert("Error:\n" + e.message + "\nLine: " + e.line);
        }

    })();

  


Here is the 2.1 script version:

 

 

* Batch Output to WebP - Automatically saves all your artboards to WebP format in one go, saving you from the tedious process of saving each artboard individually

 

* Dual Format Support - Can export both WebP and JPEG versions simultaneously, so you get modern WebP files for performance plus JPEG fallbacks for compatibility

 

* Flexible Compression Options - Choose between lossy and lossless WebP compression with a quality slider (0-100), giving you control over file size vs. image quality

 

* Batch Resizing - Resize all artboards by percentage in one operation, perfect for creating multiple asset sizes for responsive designs or different screen densities

 

* Automatic File Management - Handles filename sanitization, removes special characters, and can optionally add timestamps to prevent overwriting existing files

 

* Color Profile Optimization - Automatically converts non-RGB files to sRGB color space. Optionally convert RGB mode files to sRGB

 

* Metadata Cleanup - Strips out metadata, to keep file sizes as small as possible

 

/*
Artboards-to-WEBP-PS2025-scriptUI-GUI-v2-2.jsx
30th July 2025, v2.2 - Stephen Marsh
https://community.adobe.com/t5/photoshop-ecosystem-discussions/exporting-artboards-to-webp-format/td-p/12937135

* Artboard processing rewritten from the original v1.0-1.9 scripts to avoid errors in later versions of Photoshop
* Only for Photoshop 2022 (v23.x.x) or later!
* Saves artboards as WebP with lossless/lossy quality options
* Resize artboard by % option, a filename suffix such as '_200' is added to indicate a 200% resize
* Filename word spaces (%20) are converted to web-friendly hyphens
* Artboard content is constrained to the artboard bounds
* Metadata is removed and the document ICC profile is embedded
* Optional JPEG save checkbox with quality level dropdown menu
* Option to overwrite existing files or to add a date-timestamp suffix '_YYYYMMDD-HHMMSS'
* Optionally convert RGB images to sRGB color profile, RGB color mode and 8 bpc (non-RGB images are automatically converted to sRGB 8 BPC)
*/

#target photoshop

    (function () {

        try {

            app.bringToFront();

            var versionNumber = app.version.split(".");
            var versionCheck = parseInt(versionNumber);
            if (versionCheck < 23) {
                alert("You must use Photoshop 2022 or later to save using native WebP format...");
                return;
            }

            if (app.documents.length === 0) {
                alert("Please open a document first!");
                return;
            }

            var doc = app.activeDocument;
            var layerSets = doc.layerSets;

            try {
                // var docPath = decodeURI(app.activeDocument.path);
                var docPath = app.activeDocument.path;
            } catch (e) {
                docPath = Folder("~/Desktop");
            }

            if (!hasArtboards()) {
                alert("No artboards found, script canceled!");
                return;
            }

            // ScriptUI settings dialog defaults
            var exportSettings = {
                outputFolder: docPath,
                prefix: doc.name.replace(/\.[^\.]+$/, '').replace(/ /g, '-') + "_",
                quality: 75,
                isLossy: true,
                overwrite: true,
                openFolder: true,
                enableResize: false,
                resizeWidth: 200,
                scaleStyles: true,
                constrainProportions: true,
                jpegQuality: 9,
                saveJPEG: true
            };

            var dlg = new Window("dialog", "Export Artboards to WebP (v2.2)");
            dlg.orientation = "column";
            dlg.alignChildren = ["fill", "top"];
            dlg.spacing = 10;
            dlg.margins = 16;

            var settingsGroup = dlg.add("panel", undefined, ""); // Possibly add an "Export Options" label
            settingsGroup.orientation = "column";
            settingsGroup.alignChildren = ["fill", "top"];
            settingsGroup.margins = 10;
            settingsGroup.spacing = 8;

            var folderGroup = settingsGroup.add("group");
            folderGroup.orientation = "column";
            folderGroup.alignChildren = ["fill", "top"];
            folderGroup.add("statictext", undefined, "Output folder:");
            var folderSubGroup = folderGroup.add("group");
            var browseBtn = folderSubGroup.add("button", undefined, "Browse...");
            var folderText = folderSubGroup.add("statictext", undefined, exportSettings.outputFolder ? decodeURI(exportSettings.outputFolder.fsName) : "None selected", { truncate: 'middle' });
            folderText.alignment = ["fill", "left"];
            browseBtn.onClick = function () {
                var folder = Folder.selectDialog("Select Output Folder");
                if (folder) {
                    exportSettings.outputFolder = folder;
                    folderText.text = decodeURI(folder.fsName);
                }
            };

            var prefixGroup = settingsGroup.add("group");
            prefixGroup.orientation = "column";
            prefixGroup.alignChildren = ["fill", "top"];
            prefixGroup.add("statictext", undefined, "Filename prefix:");
            var prefixInput = prefixGroup.add("edittext", undefined, exportSettings.prefix);
            prefixInput.characters = 30;

            var compGroup = settingsGroup.add("group");
            compGroup.orientation = "column";
            compGroup.alignChildren = ["fill", "top"];
            var radioGroup = compGroup.add("group");
            radioGroup.orientation = "row";
            radioGroup.add("statictext", undefined, "Compression:");
            var lossyRadio = radioGroup.add("radiobutton", undefined, "Lossy");
            var losslessRadio = radioGroup.add("radiobutton", undefined, "Lossless");
            lossyRadio.value = true;

            var qualityGroup = compGroup.add("group");
            qualityGroup.orientation = "row";
            qualityGroup.alignChildren = ["left", "center"];
            qualityGroup.add("statictext", undefined, "Image quality (0-100):");
            var qualitySlider = qualityGroup.add("slider", undefined, exportSettings.quality, 0, 100);
            qualitySlider.preferredSize.width = 150;
            var qualityValue = qualityGroup.add("statictext", undefined, exportSettings.quality.toString());
            qualitySlider.onChanging = function () {
                qualityValue.text = Math.round(qualitySlider.value).toString();
            };
            qualitySlider.onChange = function () {
                qualityValue.text = Math.round(qualitySlider.value).toString();
            };

            lossyRadio.onClick = function () {
                qualitySlider.enabled = true;
                qualityValue.enabled = true;
            };

            losslessRadio.onClick = function () {
                qualitySlider.enabled = false;
                qualityValue.enabled = false;
            };

            var resizeGroup = settingsGroup.add("group");
            resizeGroup.orientation = "column";
            resizeGroup.alignChildren = ["fill", "top"];
            var resizeCheck = resizeGroup.add("checkbox", undefined, "Resize artboards");
            resizeCheck.value = false;
            resizeCheck.helpTip = "Resize artboards, filename suffix such as '_200' added";
            var resizeOptionsGroup = resizeGroup.add("group");
            resizeOptionsGroup.orientation = "row";
            resizeOptionsGroup.alignChildren = ["left", "center"];
            resizeOptionsGroup.enabled = false;
            resizeOptionsGroup.add("statictext", undefined, "Resize %:");
            var widthInput = resizeOptionsGroup.add("editnumber", undefined, exportSettings.resizeWidth.toString());
            widthInput.characters = 5;
            resizeCheck.onClick = function () {
                resizeOptionsGroup.enabled = resizeCheck.value;
            };

            var checkGroup = settingsGroup.add("group");
            checkGroup.orientation = "column";
            checkGroup.alignChildren = ["left", "top"];
            var convertRGBCheck = checkGroup.add("checkbox", undefined, "Convert to sRGB");
            convertRGBCheck.value = true;
            convertRGBCheck.helpTip = "Converts RGB mode files which are not sRGB to sRGB";
            var overwriteCheck = checkGroup.add("checkbox", undefined, "Overwrite existing files");
            overwriteCheck.value = true;
            overwriteCheck.helpTip = "If unchecked, will add a date-time suffix i.e. '_YYYYMMDD-HHMMSS' to avoid overwriting existing files";
            var openFolderCheck = checkGroup.add("checkbox", undefined, "Open folder after export");
            openFolderCheck.value = false;

            var jpegGroup = checkGroup.add("group");
            jpegGroup.orientation = "row";
            jpegGroup.alignChildren = ["left", "center"];
            var saveJPEGCheck = jpegGroup.add("checkbox", undefined, "Save JPEG copy");
            saveJPEGCheck.helpTip = "Save additional JPEG versions";
            saveJPEGCheck.value = false;
            var jpegQualityLabel = jpegGroup.add("statictext", undefined, "Quality:");
            var jpegQualityDropdown = jpegGroup.add("dropdownlist", undefined, ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]);
            jpegQualityDropdown.selection = 9; // Default to "9"
            jpegQualityLabel.enabled = false;
            jpegQualityDropdown.enabled = false;
            saveJPEGCheck.onClick = function () {
                jpegQualityLabel.enabled = saveJPEGCheck.value;
                jpegQualityDropdown.enabled = saveJPEGCheck.value;
            };

            var btnGroup = dlg.add("group");
            btnGroup.alignment = "right";
            var cancelBtn = btnGroup.add("button", undefined, "Cancel");
            var okBtn = btnGroup.add("button", undefined, "OK");
            cancelBtn.onClick = function () {
                dlg.close(0);
            };
            okBtn.onClick = function () {
                if (!exportSettings.outputFolder) {
                    alert("Please select an output folder.");
                    return;
                }
                exportSettings.prefix = prefixInput.text;
                exportSettings.quality = Math.round(qualitySlider.value);
                exportSettings.isLossy = lossyRadio.value;
                exportSettings.overwrite = overwriteCheck.value;
                exportSettings.openFolder = openFolderCheck.value;
                exportSettings.enableResize = resizeCheck.value;
                exportSettings.resizeWidth = parseInt(widthInput.text) || 100;
                exportSettings.saveJPEG = saveJPEGCheck.value; // Capture JPEG checkbox value
                if (saveJPEGCheck.value && jpegQualityDropdown.selection !== null) {
                    exportSettings.jpegQuality = parseInt(jpegQualityDropdown.selection.text);
                }
                exportSettings.convertRGB = convertRGBCheck.value;
                dlg.close(1);
            };

            if (dlg.show() !== 1) {
                app.beep();
                return;
            }

            // Hide Photoshop panels
            app.togglePalettes();

            // Progress bar window
            var progressWin = new Window("palette", "Processing Artboards", undefined, { closeButton: false });
            progressWin.orientation = "column";
            progressWin.alignChildren = ["fill", "top"];
            progressWin.spacing = 10;
            progressWin.margins = 16;
            var progressText = progressWin.add("statictext", undefined, "Starting...");
            var progressBar = progressWin.add("progressbar", undefined, 0, layerSets.length);
            progressBar.preferredSize = [300, 20];
            progressWin.show();

            // Temp doc unexpected error handling
            var dupedDoc = null;
            try {
                // Duplicate the original document
                dupedDoc = doc.duplicate(doc.name.replace(/\.[^\.]+$/, '').replace(/ /g, '-'), false);
                app.activeDocument = dupedDoc;

                if (activeDocument.mode !== DocumentMode.RGB) {
                    activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
                    activeDocument.changeMode(ChangeMode.RGB);
                } else if (exportSettings.convertRGB) {
                    activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
                }
                activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;

                // These steps are redundant as each artboard is duplicated to a new doc, but it can't hurt to leave them in
                deleteDocumentAncestorsMetadata();
                removeCRSmeta();
                removeXMP();

                var dupedDoclayerSets = app.activeDocument.layerSets;
                var webpCounter = 0;
                var jpegCounter = 0;

                for (var i = dupedDoclayerSets.length - 1; i >= 0; i--) {
                    var currentSet = dupedDoclayerSets[i];
                    dupedDoc.activeLayer = currentSet;

                    progressText.text = "Processing: " + currentSet.name + " (" + (webpCounter + 1) + " of " + layerSets.length + ")";
                    progressBar.value = webpCounter + 1;
                    app.refresh();

                    if (isArtboard() === true) {
                        dupeActiveLayer(currentSet.name, currentSet.name);
                        trimTransparency(true, true, true, true);

                        if (exportSettings.enableResize && exportSettings.resizeWidth !== 100) {
                            imageSize(exportSettings.resizeWidth, exportSettings.scaleStyles, exportSettings.constrainProportions);
                        }

                        artboardName = exportSettings.prefix + app.activeDocument.activeLayer.name
                            .replace(/[:\/\\*\?\"\<\>\|\\\r\\\n. ]+/g, "-")
                            .replace(/-+$/, '')
                            .replace(/^-+/, '');

                        if (exportSettings.enableResize) {
                            artboardName += "_" + exportSettings.resizeWidth.toString();
                        }

                        var finalFileName = artboardName;
                        if (!exportSettings.overwrite) {
                            finalFileName = artboardName + "_" + getTimestamp();
                        }

                        saveAsWebP(finalFileName);
                        if (exportSettings.saveJPEG) {
                            saveAsJPEG(finalFileName);
                            jpegCounter++;
                        }
                        app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
                        webpCounter++;
                    }
                }
                // v2.2 revision, mistakenly missed from the original release!
                dupedDoc.close(SaveOptions.DONOTSAVECHANGES);
            } catch (e) {
                alert("Unexpected error during processing:\n" + e.message + "\nLine: " + e.line);
            } finally {
                try {
                    if (dupedDoc && app.documents.length && app.documents.indexOf(dupedDoc) !== -1) {
                        dupedDoc.close(SaveOptions.DONOTSAVECHANGES);
                    }
                } catch (e) {}
                app.bringToFront();
                progressWin.close();
                app.togglePalettes();
            }

            // End of script notification
            app.togglePalettes();
            app.beep();
            var fileCounter = webpCounter + jpegCounter;
            alert(fileCounter + ' files saved to: ' + '\r' + exportSettings.outputFolder.fsName);

            // Open folder in Finder or Explorer conditional for checkbox
            if (exportSettings.openFolder) {
                exportSettings.outputFolder.execute();
            }


            ////// FUNCTIONS //////

            function imageSize(width, scaleStyles, constrainProportions) {
                try {
                    var s2t = function (s) {
                        return app.stringIDToTypeID(s);
                    };
                    var descriptor = new ActionDescriptor();
                    descriptor.putUnitDouble(s2t("width"), s2t("percentUnit"), width);
                    descriptor.putBoolean(s2t("scaleStyles"), scaleStyles);
                    descriptor.putBoolean(s2t("constrainProportions"), constrainProportions);
                    descriptor.putEnumerated(s2t("interfaceIconFrameDimmed"), s2t("interpolationType"), s2t("bicubicAutomatic"));
                    executeAction(s2t("imageSize"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error in imageSize:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function hasArtboards() {
                try {
                    for (var i = 0; i < activeDocument.layerSets.length; i++) {
                        activeDocument.activeLayer = activeDocument.layerSets[i];
                        var r = new ActionReference();
                        r.putEnumerated(stringIDToTypeID('layer'), stringIDToTypeID('ordinal'), stringIDToTypeID('targetEnum'));
                        var options = executeActionGet(r);
                        if (options.hasKey(stringIDToTypeID('artboard'))) return true;
                    }
                    return false;
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function isArtboard() {
                try {
                    var r = new ActionReference();
                    r.putEnumerated(stringIDToTypeID('layer'), stringIDToTypeID('ordinal'), stringIDToTypeID('targetEnum'));
                    var options = executeActionGet(r);
                    return options.hasKey(stringIDToTypeID('artboard'));
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function dupeActiveLayer(docName, layerName) {
                try {
                    var s2t = function (s) { return stringIDToTypeID(s); };
                    var descriptor = new ActionDescriptor();
                    var reference = new ActionReference();
                    var reference2 = new ActionReference();
                    reference.putClass(s2t("document"));
                    descriptor.putReference(charIDToTypeID("null"), reference);
                    descriptor.putString(s2t("name"), docName);
                    reference2.putEnumerated(s2t("layer"), s2t("ordinal"), s2t("targetEnum"));
                    descriptor.putReference(s2t("using"), reference2);
                    descriptor.putString(s2t("layerName"), layerName);
                    executeAction(s2t("make"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function trimTransparency(top, bottom, left, right) {
                try {
                    var c2t = function (s) { return charIDToTypeID(s); };
                    var s2t = function (s) { return stringIDToTypeID(s); };
                    var descriptor = new ActionDescriptor();
                    descriptor.putEnumerated(s2t("trimBasedOn"), s2t("trimBasedOn"), c2t("Trns"));
                    descriptor.putBoolean(s2t("top"), top);
                    descriptor.putBoolean(s2t("bottom"), bottom);
                    descriptor.putBoolean(s2t("left"), left);
                    descriptor.putBoolean(s2t("right"), right);
                    executeAction(s2t("trim"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function removeCRSmeta() {
                try {
                    if (!documents.length) return;
                    if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                    var xmp = new XMPMeta(app.activeDocument.xmpMetadata.rawData);
                    XMPUtils.removeProperties(xmp, XMPConst.NS_CAMERA_RAW, "", XMPConst.REMOVE_ALL_PROPERTIES);
                    app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function deleteDocumentAncestorsMetadata() {
                try {
                    if (!documents.length) return;
                    if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                    var xmp = new XMPMeta(activeDocument.xmpMetadata.rawData);
                    xmp.deleteProperty(XMPConst.NS_PHOTOSHOP, "DocumentAncestors");
                    app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function removeXMP() {
                if (!documents.length) return;
                if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                var xmp = new XMPMeta(activeDocument.xmpMetadata.rawData);
                XMPUtils.removeProperties(xmp, "", "", XMPConst.REMOVE_ALL_PROPERTIES);
                app.activeDocument.xmpMetadata.rawData = xmp.serialize();
            }

            function saveAsWebP(saveName) {
                try {
                    var s2t = function (s) { return stringIDToTypeID(s); };
                    var descriptor = new ActionDescriptor();
                    var descriptor2 = new ActionDescriptor();
                    var compressionType = exportSettings.isLossy ? s2t("compressionLossy") : s2t("compressionLossless");
                    descriptor2.putEnumerated(s2t("compression"), s2t("WebPCompression"), compressionType);
                    descriptor2.putInteger(s2t("quality"), exportSettings.quality);
                    descriptor2.putBoolean(s2t("includeXMPData"), false);
                    descriptor2.putBoolean(s2t("includeEXIFData"), false);
                    descriptor2.putBoolean(s2t("includePsExtras"), false);
                    descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
                    descriptor.putPath(s2t("in"), new File(exportSettings.outputFolder + '/' + saveName + '.webp'));
                    descriptor.putBoolean(s2t("lowerCase"), true);
                    descriptor.putEnumerated(s2t("saveStage"), s2t("saveStageType"), s2t("saveSucceeded"));
                    executeAction(s2t("save"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function saveAsJPEG(_name) {
                var jpgOptns = new JPEGSaveOptions();
                jpgOptns.formatOptions = FormatOptions.STANDARDBASELINE;
                jpgOptns.embedColorProfile = true;
                jpgOptns.matte = MatteType.NONE;
                jpgOptns.quality = exportSettings.jpegQuality || 9;
                activeDocument.saveAs(new File(exportSettings.outputFolder + '/' + _name + '.jpg'), jpgOptns, true, Extension.LOWERCASE);
            }

            function getTimestamp() {
                var now = new Date();
                return now.getFullYear().toString() +
                    ("0" + (now.getMonth() + 1)).slice(-2) +
                    ("0" + now.getDate()).slice(-2) + "-" +
                    ("0" + now.getHours()).slice(-2) +
                    ("0" + now.getMinutes()).slice(-2) +
                    ("0" + now.getSeconds()).slice(-2);
            }

        } catch (e) {
            alert("Error:\n" + e.message + "\nLine: " + e.line);
        }

    })();

 

6 replies

Stephen Marsh
Community Expert
Community Expert
June 18, 2024

@Mel30188944k1h7 

 

I have updated the JPEG & WEBP script to a 1.3 version, working on and then closing a temporary file without closing the original doc.

Participating Frequently
June 18, 2024

AMAZING. Again thanks a lot for your support here. 

dadagrrr
Known Participant
July 8, 2023

THIS 100% NEEDS TO BE ADDED. So lame that this didn't get into Export as but did make it to Save A Copy... wah, wah, wah....

Participating Frequently
May 31, 2023

Hi Stephen_A_Marsh,
This is awesome! Really helpful, thank you. 
One question I had was around the filenaming and wondered if it was possible to add that functionality into this script. 

Usually, when we export Artboards to Files, there is an additional pop up (attached) which allows you to add a prefix to the filename, rather than taking the Artboard name. I wondered if it's possible to add that pop up on this export functionality at all? It's not critical but would help the process of filenaming and organisation. 

I checked the Artboards to Files jsx file and could see part of the functionality but I'm not saavy enough to work out how to add that to your awesome script. 

Really appreciate your work on this! 
Thanks so much!

Stephen Marsh
Community Expert
Community Expert
May 31, 2023

@Mel30188944k1h7 

 

Yes, this is possible. Please provide a cropped image of the layers panel with all artboards visible (they can be collapsed) and the final output names, making it clear which is the doc name and which is the added prefix or suffix.

 

The doc name will be static and the prefix/suffix will also be static, so files would overwrite each other without a sequential number.

 

Participating Frequently
June 1, 2023

Hi @Stephen Marsh 
Awesome, thank you. I've included 3 files to show the process of how I export currently Artboards to Files with the prefix. 

01 - This shows the Artboards and the layers as you requested. The artboards are called, Landscape, Portrait and Sqaure. 
02 - This shows the pop up where I specify a prefix for the file name. 
03 - This shows the output of the files in Explorer but in PNG format
03 - (3 images) - Correct output filenames but PNG

I tried to upload the webp images or a zip here as well as the output from your script but it wont let me as it does not support the fileformat.

 

What I need is the output of 03 - but as webP files. 

I hope that makes sense! Thank you so much for the support!  

Art by JLM
Participating Frequently
June 13, 2022

@Stephen Marsh Solved! Your script works perfectly. The problem was that I had the "Open As Layer" event running in the Script Events Manager. Turning that off solved the errors I was getting, plus a whole heap of other stuff relating to exporting artboards. I rely hugely on Open As Layer to help document my compositing workflow, but hadn't connected the dots to its impact on other scripts. But it's easy to toggle the event on and off as needed. Thank you so much for all your help on this, and for indirectly solving my other dramas too 🙂

Judi

Stephen Marsh
Community Expert
Community Expert
June 13, 2022

@Art by JLM – Glad you worked it out! Which of the 4 script versions works?

Art by JLM
Participating Frequently
June 13, 2022

I tested only v1.4 with the 'fix' in place. Likely the others work too.

Stephen Marsh
Community Expert
Community Expert
May 14, 2022

@Art by JLM 

 

You can try this script to save the current open doc's artboards to WebP lossy 100% quality using the doc name + artboard name:

 

/*
Artboards-to-WEBP-PS2022.jsx
14th May 2022, v1.1 - Stephen Marsh

* Only for Photoshop 2022 (v23.x.x) or later!
* Saves artboards as lossy WebP - Quality: 100
* Prompts for a save location and saves using the filename + artboard name
* Existing files will be silently overwritten

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

// Original script author below:

// =========================================================================
// artboardsToPNG.jsx - Adobe Photoshop Script
// Version: 0.6.0
// Requirements: Adobe Photoshop CC 2015, or higher
// Author: Anton Lyubushkin (nvkz.nemo@gmail.com)
// Website: http://lyubushkin.pro/
// =========================================================================

#target photoshop

app.bringToFront();

// Ensure that version 2022 or later is being used
var versionNumber = app.version.split(".");
var versionCheck = parseInt(versionNumber);
if (versionCheck < 23) {
    alert("You must use Photoshop 2022 or later to save using native WebP format...");

} else {
    if (app.documents.length !== 0) {

        var docRef = app.activeDocument,
            allArtboards,
            artboardsCount = 0,
            inputFolder = Folder.selectDialog("Select an output folder to save the artboards as WebP:");

        if (inputFolder) {
            function getAllArtboards() {
                try {
                    var ab = [];
                    var theRef = new ActionReference();
                    theRef.putProperty(charIDToTypeID('Prpr'), stringIDToTypeID("artboards"));
                    theRef.putEnumerated(charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt'));
                    var getDescriptor = new ActionDescriptor();
                    getDescriptor.putReference(stringIDToTypeID("null"), theRef);
                    var abDesc = executeAction(charIDToTypeID("getd"), getDescriptor, DialogModes.NO).getObjectValue(stringIDToTypeID("artboards"));
                    var abCount = abDesc.getList(stringIDToTypeID('list')).count;
                    if (abCount > 0) {
                        for (var i = 0; i < abCount; ++i) {
                            var abObj = abDesc.getList(stringIDToTypeID('list')).getObjectValue(i);
                            var abTopIndex = abObj.getInteger(stringIDToTypeID("top"));
                            ab.push(abTopIndex);

                        }
                    }
                    return [abCount, ab];
                } catch (e) {
                    alert(e.line + '\n' + e.message);
                }
            }

            function selectLayerByIndex(index, add) {
                add = undefined ? add = false : add
                var ref = new ActionReference();
                ref.putIndex(charIDToTypeID("Lyr "), index + 1);
                var desc = new ActionDescriptor();
                desc.putReference(charIDToTypeID("null"), ref);
                if (add) desc.putEnumerated(stringIDToTypeID("selectionModifier"), stringIDToTypeID("selectionModifierType"), stringIDToTypeID("addToSelection"));
                desc.putBoolean(charIDToTypeID("MkVs"), false);
                executeAction(charIDToTypeID("slct"), desc, DialogModes.NO);
            }

            function ungroupLayers() {
                var desc1 = new ActionDescriptor();
                var ref1 = new ActionReference();
                ref1.putEnumerated(charIDToTypeID('Lyr '), charIDToTypeID('Ordn'), charIDToTypeID('Trgt'));
                desc1.putReference(charIDToTypeID('null'), ref1);
                executeAction(stringIDToTypeID('ungroupLayersEvent'), desc1, DialogModes.NO);
            }

            function crop() {
                var desc1 = new ActionDescriptor();
                desc1.putBoolean(charIDToTypeID('Dlt '), true);
                executeAction(charIDToTypeID('Crop'), desc1, DialogModes.NO);
            }

            function saveAsWebP(_name) {
                var s2t = function (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"), 100);
                descriptor2.putBoolean(s2t("includeXMPData"), true);
                descriptor2.putBoolean(s2t("includeEXIFData"), true);
                descriptor2.putBoolean(s2t("includePsExtras"), true);
                descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
                descriptor.putPath(s2t("in"), new File(inputFolder + '/' + _name + '.webp'), true);
                descriptor.putInteger(s2t("documentID"), 237);
                descriptor.putBoolean(s2t("lowerCase"), true);
                descriptor.putEnumerated(s2t("saveStage"), s2t("saveStageType"), s2t("saveSucceeded"));
                executeAction(s2t("save"), descriptor, DialogModes.NO);
            }

            function main(i) {
                selectLayerByIndex(allArtboards[1][i]);
                // RegEx remove filename extension
                var docName = app.activeDocument.name.replace(/\.[^\.]+$/, '');
                // RegEx replace illegal filename characters with a hyphen
                var artboardName = docName + " - " + app.activeDocument.activeLayer.name.replace(/[:\/\\*\?\"\<\>\|\\\r\\\n.]/g, "-"); // "/\:*?"<>|\r\n" -> "-"
                    
                executeAction(stringIDToTypeID("newPlacedLayer"), undefined, DialogModes.NO);
                executeAction(stringIDToTypeID("placedLayerEditContents"), undefined, DialogModes.NO);
                app.activeDocument.selection.selectAll();
                try {
                    ungroupLayers();
                } catch (e) {
                    alert("There was an unexpected error with the ungroupLayers function!")
                    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
                }
                crop();
                saveAsWebP(artboardName);
                app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
            }

            allArtboards = getAllArtboards();

            artboardsCount = allArtboards[0];

            for (var i = 0; i < artboardsCount; i++) {
                docRef.suspendHistory('Artboards to WebP', 'main(' + i + ')');
                app.refresh();
                app.activeDocument.activeHistoryState = app.activeDocument.historyStates[app.activeDocument.historyStates.length - 2];
            }
        }

        app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
        alert('WebP files saved to: ' + '\r' + inputFolder.fsName);
        // inputFolder.execute();

    } else {
        alert('You must have a document open!');
    }
}

 

Quickstart instructions for saving and running:

  1. Copy the 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 the text file as .txt
  5. Rename the file extension from .txt to .jsx
  6. Install or browse to the .jsx file to run (see below):

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

 

Participating Frequently
July 18, 2025

@Stephen Marsh You are amazing. Is there any way to update the script to save @2x scale as well? Yours is the only one I can get to work reliably (vs. chat gpt) but I need to export 2x larger and am not savvy enough to know where/how to insert that into the script. If possible, thank you in advance!!

Stephen Marsh
Community Expert
Community Expert
July 23, 2025

@raven250 

 

Ah, yes, my forum comment was for v1.6, however, the latest code header was for 1.8, I see how I became confused and have now updated the comment.

 

I think Bicubic Smoother is the right choice for upscale with brief comparisions against Export As.

 

Try this v1.9 code below for x2 scale. Use the old v1.8 for 100% size.

 

I can't test it properly now due to errors reported in later versions that were not triggered back in the earlier versions of Photoshop. I think that the code needs a major overhaul and rewrite adding various options in a single script interface.

 

/*
Artboards-to-WEBP-PS2022.jsx
v1.9, 22nd July 2025 - Stephen Marsh
https://community.adobe.com/t5/photoshop-ecosystem-discussions/exporting-artboards-to-webp-format/td-p/12937135

* Only for Photoshop 2022 (v23.x.x) or later!
* Saves artboards as lossy WebP - Quality: 100
* Prompts for a save location and prompts for a prefix to be added to the artboard name (uses the doc name by default)
* Existing files will be silently overwritten
* Converts non-RGB to sRGB color space, RGB color mode and 8 bpc
* If RGB the original color space is retained, beware if using ProPhoto RGB!
* Added a "script running" window to provide feedback during the script execution
* Creates a temporary working document
* Resizes the (document) artboards to 200% of their original size

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

// =========================================================================
// Original script author:
// artboardsToPNG.jsx - Adobe Photoshop Script
// Version: 0.6.0
// Requirements: Adobe Photoshop CC 2015, or higher
// Author: Anton Lyubushkin (nvkz.nemo@gmail.com)
// Website: http://lyubushkin.pro/
// =========================================================================

#target photoshop

    (function () {

        app.bringToFront();

        // Ensure that version 2022 or later is being used
        var versionNumber = app.version.split(".");
        var versionCheck = parseInt(versionNumber);
        if (versionCheck < 23) {
            alert("You must use Photoshop 2022 or later to save using native WebP format...");

        } else {
            if (app.documents.length !== 0) {

                var docRef = app.activeDocument,
                    allArtboards,
                    artboardsCount = 0;

                var outputFolder = Folder.selectDialog("Select an output folder to save the artboards as WebP:");
                // Test if Cancel button returns null, then do nothing
                if (outputFolder === null) {
                    app.beep();
                    return;
                }

                var preFix = prompt("Add the prefix including separator character to the artboard name:", docRef.name.replace(/\.[^\.]+$/, '') + "_");
                // Test if Cancel button returns null, then do nothing
                if (preFix === null) {
                    app.beep();
                    return;
                }

                // Hide the Photoshop panels
                app.togglePalettes();

                if (outputFolder) {

                    // Dupe to a temp doc
                    app.activeDocument.duplicate(app.activeDocument.name.replace(/\.[^\.]+$/, ''), false);

                    // Clean out unwanted metadata
                    deleteDocumentAncestorsMetadata();
                    removeCRSmeta();

                    // If the doc isn't in RGB mode
                    if (activeDocument.mode !== DocumentMode.RGB)
                        // Convert to sRGB
                        activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
                    // Ensure that the doc mode is RGB (to correctly handle Indexed Color mode)
                    activeDocument.changeMode(ChangeMode.RGB);
                    activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;

                    // 2x Resize
                    imageSize(200, true, true);

                    allArtboards = getAllArtboards();
                    artboardsCount = allArtboards[0];

                    // Loop over the artboards and run the main function
                    for (var i = 0; i < artboardsCount; i++) {

                        // Script running notification window - courtesy of William Campbell
                        // https://www.marspremedia.com/download?asset=adobe-script-tutorial-11.zip
                        // https://youtu.be/JXPeLi6uPv4?si=Qx0OVNLAOzDrYPB4
                        var working;
                        working = new Window("palette");
                        working.preferredSize = [300, 80];
                        working.add("statictext");
                        working.t = working.add("statictext");
                        working.add("statictext");
                        working.display = function (message) {
                            this.t.text = message || "Script running, please wait...";
                            this.show();
                            app.refresh();
                        };
                        working.display();

                        // Call the main function
                        docRef.suspendHistory('Artboards to WebP', 'main(' + i + ')');
                        app.refresh();
                        app.activeDocument.activeHistoryState = app.activeDocument.historyStates[app.activeDocument.historyStates.length - 2];

                        // Ensure Photoshop has focus before closing the running script notification window
                        app.bringToFront();
                        working.close();
                    }
                }

                app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);

                // Restore the Photoshop panels
                app.togglePalettes();

                // End of script notification
                app.beep();
                alert(artboardsCount + ' WebP files saved to: ' + '\r' + outputFolder.fsName);

                // Open the output folder in Windows Explorer or the Mac Finder
                // outputFolder.execute();


                ///// FUNCTIONS /////

                function getAllArtboards() {
                    try {
                        var ab = [];
                        var theRef = new ActionReference();
                        theRef.putProperty(charIDToTypeID('Prpr'), stringIDToTypeID("artboards"));
                        theRef.putEnumerated(charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt'));
                        var getDescriptor = new ActionDescriptor();
                        getDescriptor.putReference(stringIDToTypeID("null"), theRef);
                        var abDesc = executeAction(charIDToTypeID("getd"), getDescriptor, DialogModes.NO).getObjectValue(stringIDToTypeID("artboards"));
                        var abCount = abDesc.getList(stringIDToTypeID('list')).count;
                        if (abCount > 0) {
                            for (var i = 0; i < abCount; ++i) {
                                var abObj = abDesc.getList(stringIDToTypeID('list')).getObjectValue(i);
                                var abTopIndex = abObj.getInteger(stringIDToTypeID("top"));
                                ab.push(abTopIndex);

                            }
                        }
                        return [abCount, ab];
                    } catch (e) {
                        alert(e.line + '\n' + e.message);
                    }
                }

                function selectLayerByIndex(index, add) {
                    add = undefined ? add = false : add;
                    var ref = new ActionReference();
                    ref.putIndex(charIDToTypeID("Lyr "), index + 1);
                    var desc = new ActionDescriptor();
                    desc.putReference(charIDToTypeID("null"), ref);
                    if (add) desc.putEnumerated(stringIDToTypeID("selectionModifier"), stringIDToTypeID("selectionModifierType"), stringIDToTypeID("addToSelection"));
                    desc.putBoolean(charIDToTypeID("MkVs"), false);
                    executeAction(charIDToTypeID("slct"), desc, DialogModes.NO);
                }

                function ungroupLayers() {
                    app.runMenuItem(stringIDToTypeID('ungroupLayersEvent'));
                }

                function crop() {
                    var desc1 = new ActionDescriptor();
                    desc1.putBoolean(charIDToTypeID('Dlt '), true);
                    executeAction(charIDToTypeID('Crop'), desc1, DialogModes.NO);
                }

                function saveAsWebP(_name) {
                    var s2t = function (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"), 100);
                    descriptor2.putBoolean(s2t("includeXMPData"), true);
                    descriptor2.putBoolean(s2t("includeEXIFData"), true);
                    descriptor2.putBoolean(s2t("includePsExtras"), true);
                    descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
                    descriptor.putPath(s2t("in"), new File(outputFolder + '/' + _name + '.webp'), true);
                    descriptor.putBoolean(s2t("lowerCase"), true);
                    descriptor.putEnumerated(s2t("saveStage"), s2t("saveStageType"), s2t("saveSucceeded"));
                    executeAction(s2t("save"), descriptor, DialogModes.NO);
                }

                // The main working function
                function main(i) {

                    selectLayerByIndex(allArtboards[1][i]);
                    // RegEx replace illegal filename characters with a hyphen
                    var artboardName = preFix + app.activeDocument.activeLayer.name.replace(/[:\/\\*\?\"\<\>\|\\\r\\\n.]/g, "_"); // "/\:*?"<>|\r\n" -> "-"

                    executeAction(stringIDToTypeID("newPlacedLayer"), undefined, DialogModes.NO);
                    executeAction(stringIDToTypeID("placedLayerEditContents"), undefined, DialogModes.NO);
                    app.activeDocument.selection.selectAll();
                    try {
                        ungroupLayers();
                    } catch (e) {
                        alert("There was an unexpected error with the ungroupLayers function!");
                        app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
                    }
                    crop();
                    saveAsWebP(artboardName);
                    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
                }

                function removeCRSmeta() {
                    //community.adobe.com/t5/photoshop/remove-crs-metadata/td-p/10306935
                    if (!documents.length) return;
                    if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                    var xmp = new XMPMeta(app.activeDocument.xmpMetadata.rawData);
                    XMPUtils.removeProperties(xmp, XMPConst.NS_CAMERA_RAW, "", XMPConst.REMOVE_ALL_PROPERTIES);
                    app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                }

                function deleteDocumentAncestorsMetadata() {
                    whatApp = String(app.name); //String version of the app name
                    if (whatApp.search("Photoshop") > 0) { //Check for photoshop specifically, or this will cause errors
                        if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                        var xmp = new XMPMeta(activeDocument.xmpMetadata.rawData);
                        // Begone foul Document Ancestors!
                        xmp.deleteProperty(XMPConst.NS_PHOTOSHOP, "DocumentAncestors");
                        app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                    }
                }

                function imageSize(width, scaleStyles, constrainProportions) {
                    var s2t = function (s) {
                        return app.stringIDToTypeID(s);
                    };
                    var descriptor = new ActionDescriptor();
                    descriptor.putUnitDouble(s2t("width"), s2t("percentUnit"), width);
                    descriptor.putBoolean(s2t("scaleStyles"), scaleStyles);
                    descriptor.putBoolean(s2t("constrainProportions"), constrainProportions);
                    descriptor.putEnumerated(s2t("interfaceIconFrameDimmed"), s2t("interpolationType"), s2t("bicubicSmoother"));
                    executeAction(s2t("imageSize"), descriptor, DialogModes.NO);
                }

            } else {
                alert('You must have a document open!');
            }
        }

    })();

 

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

 


quote

I can't test it properly now due to errors reported in later versions that were not triggered back in the earlier versions of Photoshop. I think that the code needs a major overhaul and rewrite adding various options in a single script interface.

 


By @Stephen Marsh

 

I have rewritten the script. This v2.0 is the basic framework which I will use to add a custom interface in the next release.

 

It has not had exhaustive testing with complex artboards. This new ground-up rewrite uses different processing for the artboards (no longer based on smart objects), so we'll need to see how the results are with feedback from diverse users and use cases. It should be faster than the previous scripts.

 

This version does not offer 200% sizing or JPEG options, but they are easy enough to transplant if needed.

 

The next 2.1 version will offer these and other features.

 

/*
Artboards-to-WEBP-PS2025-v2.jsx
22nd July 2025, v2.0 - Stephen Marsh
https://community.adobe.com/t5/photoshop-ecosystem-discussions/exporting-artboards-to-webp-format/td-p/12937135

* Artboard processing rewritten from the original v1.0-1.9 scripts to avoid errors in later versions of Photoshop
* Only for Photoshop 2022 (v23.x.x) or later!
* Saves artboards as lossy WebP, quality: 75
* Select a save location and prefix + separator to be added to the artboard name (uses the doc name by default)
* Filename word spaces (%20) are converted to web-friendly hyphens
* Existing files will be silently overwritten
* Converts non-RGB mode to sRGB color space, RGB color mode and 8 bpc
* If RGB mode, the original color space is retained - beware if using wide gamut spaces such as ProPhoto RGB!
* Artboard content is constrained to the artboard bounds
* Metadata is removed and the document ICC profile is embedded
* Output directory automatically opened
*/

#target photoshop

    (function () {

        try {

            app.bringToFront();

            // Ensure that version 2022 or later is being used
            var versionNumber = app.version.split(".");
            var versionCheck = parseInt(versionNumber);
            if (versionCheck < 23) {
                alert("You must use Photoshop 2022 or later to save using native WebP format...");
                return;
            }

            // Ensure a document is open
            if (app.documents.length === 0) {
                alert("Please open a document first!");
                return;
            }

            // Ensure that the doc has an artboard
            if (!hasArtboards()) {
                alert("No artboards found, script canceled!");
                return;
            }

            // Get the path of the active document (only if it's saved)
            var defaultPath = (app.activeDocument && app.activeDocument.fullName)
                ? app.activeDocument.fullName.parent : Folder("~/Desktop");
            var outputFolder = Folder.selectDialog(
                "Select an output folder to save the artboards as WebP:",
                defaultPath
            );
            if (outputFolder === null) {
                app.beep();
                return;
            }

            var doc = app.activeDocument;
            var layerSets = doc.layerSets;

            // Create a ScriptUI dialog to get the prefix
            var dlg = new Window("dialog", "Enter Prefix");
            dlg.orientation = "column";
            dlg.alignChildren = ["fill", "top"];
            dlg.spacing = 10;
            dlg.margins = 16;
            var defaultPrefix = doc.name.replace(/\.[^\.]+$/, '').replace(/ /g, '-') + "_";
            dlg.add("statictext", undefined, "Add the prefix including separator character to the artboard name:");
            var input = dlg.add("edittext", undefined, defaultPrefix);
            input.characters = 40;
            input.active = true;
            var btnGroup = dlg.add("group"); // OK and Cancel buttons
            btnGroup.alignment = "right";
            var okBtn = btnGroup.add("button", undefined, "OK");
            var cancelBtn = btnGroup.add("button", undefined, "Cancel");
            var preFix; // Result handling
            okBtn.onClick = function () {
                preFix = input.text;
                dlg.close(1);
            };
            cancelBtn.onClick = function () {
                dlg.close(0);
            };

            if (dlg.show() !== 1) {
                app.beep();
                return;
            }

            // Hide the Photoshop panels
            app.togglePalettes();

            // Create the progress bar window
            var progressWin = new Window("palette", "Processing Artboards", undefined, { closeButton: false });
            progressWin.orientation = "column";
            progressWin.alignChildren = ["fill", "top"];
            progressWin.spacing = 10;
            progressWin.margins = 16;
            var progressText = progressWin.add("statictext", undefined, "Starting...");
            var progressBar = progressWin.add("progressbar", undefined, 0, layerSets.length);
            progressBar.preferredSize = [300, 20];
            progressWin.show();

            doc.duplicate(doc.name.replace(/\.[^\.]+$/, '').replace(/ /g, '-'), false);

            // If the doc isn't in RGB mode
            if (activeDocument.mode !== DocumentMode.RGB)
                // Convert to sRGB
                activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
            // Ensure that the doc mode is RGB (to correctly handle Indexed Color mode)
            activeDocument.changeMode(ChangeMode.RGB);
            activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;

            // Clean out unwanted metadata
            deleteDocumentAncestorsMetadata();
            removeCRSmeta();

            var dupedDoc = app.activeDocument;
            var dupedDoclayerSets = app.activeDocument.layerSets;
            var fileCounter = 0;

            // Process the artboards
            for (var i = dupedDoclayerSets.length - 1; i >= 0; i--) {

                var currentSet = dupedDoclayerSets[i];

                // Select the layerSet
                dupedDoc.activeLayer = currentSet;

                // Update progress bar window
                progressText.text = "Processing: " + currentSet.name + " (" + (fileCounter + 1) + " of " + layerSets.length + ")";
                progressBar.value = fileCounter + 1;
                app.refresh();

                // Conditionally process artboards - not layerSets or frames
                if (isArtboard() === true) {

                    // Dupe artboard to new doc
                    dupeActiveLayer(currentSet.name, currentSet.name);

                    trimTransparency(true, true, true, true);

                    // Combine the prefix with the filename, RegEx replace illegal filename characters with a hyphen
                    var artboardName = preFix + app.activeDocument.activeLayer.name.replace(/[:\/\\*\?\"\<\>\|\\\r\\\n. ]/g, "-");

                    saveAsWebP(artboardName);

                    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);

                    fileCounter++;
                }
            }

            dupedDoc.close(SaveOptions.DONOTSAVECHANGES);

            // Ensure Photoshop has focus before closing the progress bar window
            app.bringToFront();
            progressWin.close();

            // Restore the Photoshop panels
            app.togglePalettes();

            // End of script notification
            app.beep();
            alert(fileCounter + ' WebP files saved to: ' + '\r' + outputFolder.fsName);

            // Open the output folder in Windows Explorer or the Mac Finder
            outputFolder.execute();


            ///// FUNCTIONS /////

            function hasArtboards() {
                try {
                    for (var i = 0; i < activeDocument.layerSets.length; i++) {
                        activeDocument.activeLayer = activeDocument.layerSets[i];
                        var r = new ActionReference();
                        r.putEnumerated(stringIDToTypeID('layer'), stringIDToTypeID('ordinal'), stringIDToTypeID('targetEnum'));
                        var options = executeActionGet(r);
                        if (options.hasKey(stringIDToTypeID('artboard'))) return true;
                    }
                    return false;
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function isArtboard() {
                try {
                    var d = new ActionDescriptor();
                    var r = new ActionReference();
                    r.putEnumerated(stringIDToTypeID('layer'), stringIDToTypeID('ordinal'), stringIDToTypeID('targetEnum'));
                    var options = executeActionGet(r);
                    return options.hasKey(stringIDToTypeID('artboard'));
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function dupeActiveLayer(docName, layerName) {
                try {
                    var c2t = function (s) {
                        return app.charIDToTypeID(s);
                    };
                    var s2t = function (s) {
                        return app.stringIDToTypeID(s);
                    };
                    var descriptor = new ActionDescriptor();
                    var reference = new ActionReference();
                    var reference2 = new ActionReference();
                    reference.putClass(s2t("document"));
                    descriptor.putReference(c2t("null"), reference);
                    descriptor.putString(s2t("name"), docName); // Doc name
                    reference2.putEnumerated(s2t("layer"), s2t("ordinal"), s2t("targetEnum"));
                    descriptor.putReference(s2t("using"), reference2);
                    descriptor.putString(s2t("layerName"), layerName); // Layer name
                    executeAction(s2t("make"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function trimTransparency(top, bottom, left, right) {
                try {
                    var c2t = function (s) {
                        return app.charIDToTypeID(s);
                    };
                    var s2t = function (s) {
                        return app.stringIDToTypeID(s);
                    };
                    var descriptor = new ActionDescriptor();
                    descriptor.putEnumerated(s2t("trimBasedOn"), s2t("trimBasedOn"), c2t("Trns"));
                    descriptor.putBoolean(s2t("top"), top);
                    descriptor.putBoolean(s2t("bottom"), bottom);
                    descriptor.putBoolean(s2t("left"), left);
                    descriptor.putBoolean(s2t("right"), right);
                    executeAction(s2t("trim"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function removeCRSmeta() {
                try {
                    if (!documents.length) return;
                    if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                    var xmp = new XMPMeta(app.activeDocument.xmpMetadata.rawData);
                    XMPUtils.removeProperties(xmp, XMPConst.NS_CAMERA_RAW, "", XMPConst.REMOVE_ALL_PROPERTIES);
                    app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function deleteDocumentAncestorsMetadata() {
                try {
                    whatApp = String(app.name);
                    if (whatApp.search("Photoshop") > 0) {
                        if (ExternalObject.AdobeXMPScript === undefined) ExternalObject.AdobeXMPScript = new ExternalObject("lib:AdobeXMPScript");
                        var xmp = new XMPMeta(activeDocument.xmpMetadata.rawData);
                        xmp.deleteProperty(XMPConst.NS_PHOTOSHOP, "DocumentAncestors");
                        app.activeDocument.xmpMetadata.rawData = xmp.serialize();
                    }
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

            function saveAsWebP(saveName) {
                try {
                    var s2t = function (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"), 75);
                    descriptor2.putBoolean(s2t("includeXMPData"), false);
                    descriptor2.putBoolean(s2t("includeEXIFData"), false);
                    descriptor2.putBoolean(s2t("includePsExtras"), false);
                    descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
                    descriptor.putPath(s2t("in"), new File(outputFolder + '/' + saveName + '.webp'), true);
                    descriptor.putBoolean(s2t("lowerCase"), true);
                    descriptor.putEnumerated(s2t("saveStage"), s2t("saveStageType"), s2t("saveSucceeded"));
                    executeAction(s2t("save"), descriptor, DialogModes.NO);
                } catch (e) {
                    alert("Error:\n" + e.message + "\nLine: " + e.line);
                }
            }

        } catch (e) {
            alert("Error:\n" + e.message + "\nLine: " + e.line);
        }

    })();

  

Stephen Marsh
Community Expert
Community Expert
May 11, 2022

@Art by JLM – The Artboards to Files JavaScript files would need to be updated to support another format.

 

EDIT: If you make a new post as an "Idea" I would upvote it to add webp support, this is something that should be shipping as standard with the software, IMO.

 

As this is a script, any user with the knowledge and time could update it to include webp, however, it is often easier said than done for the complex scripts that ship with Photoshop.