New Here
,
Hello,
I have a question about webp format in photoshop. I want to export many files at once in webp format in Photoshop but I don't find the webp format in photoshop options. Is it normal?
Best regards
TOPICS
Actions and scripting
,
macOS
,
Windows
2 Correct answers
Community Expert
,
Feb 24, 2023
WebP was introduced in Ps2022 as a native Save As (a Copy) option, not under Export As/Quick Export. You will either need to set up a batch action to save directly to WebP or to convert from PNG to WebP or use a custom script to save or convert to WebP.
In previous versions, there were 3rd party plugins from Google or other developers.
Community Expert
,
Mar 13, 2023
Here is a batch script to save as WebP.
Features:
* Optionally run an action (edit the code to enable)
* Optionally ask to overwrite existing files (edit the code to enable)
* Set an input and output folder
* Set supported input file types (edit the code)
* Automatically converts non-RGB mode to sRGB space, 8 bpc
* RGB files automatically converted to 8 bpc
* Option to convert RGB mode to sRGB space (edit the code to enable)
* WebP lossy format, 75% quality (larger size), all metadata and PSD
...
Explore related tutorials & articles
101
Replies
101
101
Replies
Community Expert
,
If I do this as a batch action theres no way to set the images for example to be about 50kb upon output is there? The images in my folder that are to be convered range from 90kb to 20mb
By @melajuana
Not with this code.
To hit a target size on drive, the script would need to save, check the size and resave multiple times with decreasing quality levels to try to hit the target. This is certainly possible, however, it's obviously time consuming.
Community Expert
,
I know. That's what I've been using, but I can´t choose the dpi output just like I set the image size or the compression rate. I'm asking precisely because I need a resolution lower than 300 dpi, images are going to be displayed only in digital devices.
By @carmen_marÃa_9071
The longest edge is 1920px, set by the code here:
// Fit image to 1920px
fitImage(1920, 1920);
This is the size regardless of the PPI print metadata value.
To change the PPI metadata, just change the following 2 instances of 300 to whatever you want, 72 or 96 etc.
/* NEARESTNEIGHBOR | BILINEAR | BICUBIC | BICUBICSMOOTHER | BICUBICSHARPER | BICUBICAUTOMATIC */
function fitImage(fWidth, fHeight) {
if (activeDocument.height.value > activeDocument.width.value) {
activeDocument.resizeImage(null, UnitValue(fHeight, "px"), 300, ResampleMethod.BICUBIC);
} else {
activeDocument.resizeImage(UnitValue(fWidth, "px"), null, 300, ResampleMethod.BICUBIC);
}
}
Keep in mind that the resolution metadata value has no impact on the pixel values of the longest edge.
Community Expert
,
I used chatGPT to add a UI with inputs to customize maxsize, resolution and compression quality:
By @filduarte
Thank you for extending my script!
I have never tried adding scriptUI to a script using AI, my expectations are obviously limited...
What did you do, paste in the previous code and add a prompt to add the GUI? Did you have to specify which variables in the existing script needed to have UI controls etc?
Can you share the prompt/s?
Did you have to tidy up the code, or did it work correctly first go?
Community Expert
,
Can you show a screen grab of the dialog?
By @schroef
Although you directed this request to @filduarte here are some screenshots of some of the prompts that I used. As this was my first time adding a GUI via AI, I wasn't sure if I should be more active or passive in the prompts. Am I overthinking things or not giving enough detail? SO much depends on the prompt, as well as the model.
Community Expert
,
I have been playing around with adding a GUI, I doubt that I will ever be happy with it so this will have to do.
/*
Batch Save As WebP scriptUI GUI v1-5.jsx
https://community.adobe.com/t5/photoshop-ecosystem-discussions/export-many-files-at-once-in-webp-format-photoshop/m-p/13604411
v1.0 - 14th March 2023, Stephen Marsh
v1.1 - 11th January 2024: Added a "fit image" defaulting to 1920px step
v1.2 - 10th February 2024: Added an explicit step to change to RGB mode
v1.3 - 12th September 2024: User "filduarte" Added ScriptUI and user input for max image size, resolution and quality
v1.4 - 13th September 2024: Added various GUI control options. All files saved as 8bpc sRGB, overwriting existing WebP files of the same name without warning
v1.5 - 21st September 2024: Changed the dropdown to use label names rather than compression values as names. Removed the Save a Copy checkbox.
*/
#target photoshop
// Ensure that version 2022 or later is being used
var versionNumber = app.version.split(".");
var versionCheck = parseInt(versionNumber[0]);
if (versionCheck < 23) {
alert("You must use Photoshop 2022 or later to save using native WebP format...");
} else {
// Create the ScriptUI dialog window
var theDialogWin = new Window("dialog", "WebP Batch Processor (v1.5)");
theDialogWin.orientation = "column";
theDialogWin.alignChildren = "left";
var infoText = theDialogWin.add("statictext", undefined, "The WebP files will be converted to sRGB 8 bits/channel");
infoText.alignment = "center";
// Input Folder Section
theDialogWin.add("statictext", undefined, "Select the source image folder to process:");
var inputFolderPanel = theDialogWin.add("panel", undefined, undefined);
inputFolderPanel.orientation = "row";
var inputFolderText = inputFolderPanel.add("edittext", undefined, "");
inputFolderText.characters = 30;
var inputFolderButton = inputFolderPanel.add("button", undefined, "Browse...");
// Process Subfolders Checkbox
var recursiveCheckbox = theDialogWin.add("checkbox", undefined, "Include all subfolders");
recursiveCheckbox.value = false; // Default to not recursive
// Output Folder Section
theDialogWin.add("statictext", undefined, "Select the location to save the WebP files:");
var outputFolderPanel = theDialogWin.add("panel", undefined, undefined);
outputFolderPanel.orientation = "row";
var outputFolderText = outputFolderPanel.add("edittext", undefined, "");
outputFolderText.characters = 30;
var outputFolderButton = outputFolderPanel.add("button", undefined, "Browse...");
// Mirror Directory Structure Checkbox
var mirrorStructureCheckbox = theDialogWin.add("checkbox", undefined, "Retain the source subfolder structure");
mirrorStructureCheckbox.value = false; // Default to not mirroring
mirrorStructureCheckbox.enabled = false; // Disable by default, only enable if recursive is selected
// Enable/Disable "Mirror Structure" based on the recursive option
recursiveCheckbox.onClick = function () {
mirrorStructureCheckbox.enabled = recursiveCheckbox.value;
};
// Compression Type Dropdown (compressionLossy | compressionLossless)
theDialogWin.add("statictext", undefined, "Compression Type:");
var compTypeDropdown = theDialogWin.add("dropdownlist", undefined, ["Lossy", "Lossless"]);
compTypeDropdown.selection = 0; // Default to Lossy
// Compression Quality (compValue) Slider
theDialogWin.add("statictext", undefined, "Compression Quality:");
var compValueSlider = theDialogWin.add("slider", undefined, 75, 0, 100); // Start, Min, Max
compValueSlider.size = [200, 20];
var compValueText = theDialogWin.add("statictext", undefined, "75");
// Update the statictext to reflect the slider's value
compValueSlider.onChanging = function() {
compValueText.text = Math.round(compValueSlider.value).toString();
compValueText.size = [100, 15];
};
// Function to toggle the slider based on compression type
function updateCompressionControls() {
if (compTypeDropdown.selection.text === "Lossless") {
compValueSlider.enabled = false;
compValueText.enabled = false;
} else {
compValueSlider.enabled = true;
compValueText.enabled = true;
}
}
// Initialize control states
updateCompressionControls();
// Disable compression quality slider when "Lossless" is selected
compTypeDropdown.onChange = function() {
updateCompressionControls();
};
// Fit Image Checkbox and Input
var fitImageGroup = theDialogWin.add("group");
fitImageGroup.orientation = "row";
var fitImageCheckbox = fitImageGroup.add("checkbox", undefined, "Fit Image (px):");
fitImageCheckbox.value = false; // Default to inactive
var fitImageInput = fitImageGroup.add("editnumber", undefined, "1920"); // Default to 1920
fitImageInput.characters = 5;
fitImageInput.enabled = fitImageCheckbox.value;
fitImageCheckbox.onClick = function() {
fitImageInput.enabled = fitImageCheckbox.value;
};
// PPI Checkbox and Input
var ppiGroup = theDialogWin.add("group");
ppiGroup.orientation = "row";
var ppiCheckbox = ppiGroup.add("checkbox", undefined, "PPI Value:");
ppiCheckbox.value = false; // Default to inactive
var ppiInput = ppiGroup.add("editnumber", undefined, "300"); // Default to 300
ppiInput.characters = 5;
ppiInput.enabled = ppiCheckbox.value;
ppiCheckbox.onClick = function() {
ppiInput.enabled = ppiCheckbox.value;
};
// XMP Checkbox
var xmpDataCheckbox = theDialogWin.add("checkbox", undefined, "Include XMP Data");
xmpDataCheckbox.value = false; // Default to inactive
// Exif Checkbox
var exifDataCheckbox = theDialogWin.add("checkbox", undefined, "Include EXIF Data");
exifDataCheckbox.value = false; // Default to inactive
// Photoshop Data Checkbox
var psDataCheckbox = theDialogWin.add("checkbox", undefined, "Include Photoshop Data");
psDataCheckbox.value = false; // Default to inactive
// OK and Cancel Buttons
var buttonGroup = theDialogWin.add("group");
buttonGroup.alignment = "right";
var okButton = buttonGroup.add("button", undefined, "OK");
var cancelButton = buttonGroup.add("button", undefined, "Cancel");
// Input Folder Browse Button functionality
inputFolderButton.onClick = function () {
var inputFolder = Folder.selectDialog("Select the input folder:");
if (inputFolder) {
inputFolderText.text = inputFolder.fsName;
}
};
// Output Folder Browse Button functionality
outputFolderButton.onClick = function () {
var outputFolder = Folder.selectDialog("Select the output folder:");
if (outputFolder) {
outputFolderText.text = outputFolder.fsName;
}
};
// Cancel Button functionality
cancelButton.onClick = function () {
theDialogWin.close();
};
// OK Button functionality
okButton.onClick = function () {
theDialogWin.close();
app.refresh();
// Restore the Photoshop panels
app.togglePalettes();
if (inputFolderText.text === "" || outputFolderText.text === "") {
alert("Please select both input and output folders.");
return;
}
// Assign selected folders to variables
var inputFolder = new Folder(inputFolderText.text);
var outputFolder = new Folder(outputFolderText.text);
// Map dropdown selection to original compression type values
var compType = compTypeDropdown.selection.text === "Lossless" ? "compressionLossless" : "compressionLossy";
var compValue = Math.round(compValueSlider.value);
var xmpData = xmpDataCheckbox.value;
var exifData = exifDataCheckbox.value;
var psData = psDataCheckbox.value;
// Gather fitImage and PPI parameters
var fitValue = fitImageCheckbox.value ? parseInt(fitImageInput.text) : null;
var ppi = ppiCheckbox.value ? parseInt(ppiInput.text) : null;
// Process files with the recursive and mirror structure flags
processFiles(inputFolder, outputFolder, compType, compValue, xmpData, exifData, psData, fitValue, ppi, recursiveCheckbox.value, mirrorStructureCheckbox.value);
theDialogWin.close();
};
theDialogWin.show();
}
// Main processing function with optional recursion and mirroring structure
function processFiles(inputFolder, outputFolder, compType, compValue, xmpData, exifData, psData, fitValue, ppi, recursive, mirrorStructure) {
var fileList = getFilesRecursive(inputFolder, recursive);
fileList.sort();
var savedDisplayDialogs = app.displayDialogs;
app.displayDialogs = DialogModes.NO;
// Set the input file processing counter
var inputFileCounter = 0;
// Set the output file processing counter
var fileCounter = 0;
// Process the input files
for (var i = 0; i < fileList.length; 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();
open(fileList[i]);
// Create mirrored subfolder structure in output folder if requested
var relativePath = fileList[i].parent.fsName.replace(inputFolder.fsName, "");
var targetFolder = outputFolder;
if (mirrorStructure && relativePath !== "") {
targetFolder = new Folder(outputFolder + "/" + relativePath);
if (!targetFolder.exists) {
targetFolder.create();
}
}
// File processing options
// Bitmap mode input
if (activeDocument.mode == DocumentMode.BITMAP) {
activeDocument.changeMode(ChangeMode.GRAYSCALE);
activeDocument.changeMode(ChangeMode.RGB);
activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;
// Indexed Color, CMYK or Lab mode input
} else if (activeDocument.mode == DocumentMode.INDEXEDCOLOR || activeDocument.mode == DocumentMode.CMYK || activeDocument.mode == DocumentMode.LAB) {
activeDocument.changeMode(ChangeMode.RGB);
activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;
} else {
activeDocument.changeMode(ChangeMode.RGB);
activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.RELATIVECOLORIMETRIC, true, false);
activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;
}
// Run an optional action on each processed file
//app.doAction("Molten Lead", "Default Actions");
// Fit image to specified value and/or change PPI if enabled
if (fitValue !== null || ppi !== null) {
fitImage(fitValue, ppi);
}
// Save as a copy and close
saveWebP(compType, compValue, xmpData, exifData, psData, targetFolder);
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
// Increment the input file counter
inputFileCounter++
// Increment the file processing counter
fileCounter++;
// Ensure Photoshop has focus before closing the running script notification window
app.bringToFront();
working.close();
}
app.displayDialogs = savedDisplayDialogs;
app.beep();
alert('Script completed!' + '\r' + inputFileCounter + ' source files saved as ' + fileCounter + ' WebP files!');
// Restore the Photoshop panels
app.togglePalettes();
}
///// Helper Functions /////
function getFilesRecursive(folder, recursive) {
var fileList = [];
var allFiles = folder.getFiles();
for (var i = 0; i < allFiles.length; i++) {
var file = allFiles[i];
if (file instanceof Folder && recursive) {
fileList = fileList.concat(getFilesRecursive(file, recursive));
} else if (file instanceof File && /\.(webp|tif|tiff|jpg|jpeg|psd|psb|png|tga)$/i.test(file.name)) {
fileList.push(file);
}
}
return fileList;
}
function fitImage(fitValue, ppi) {
// NEARESTNEIGHBOR | BILINEAR | BICUBIC | BICUBICSMOOTHER | BICUBICSHARPER | BICUBICAUTOMATIC
if (fitValue !== null && ppi !== null) {
// Both fit value and PPI are specified
if (activeDocument.height.value > activeDocument.width.value) {
activeDocument.resizeImage(null, UnitValue(fitValue, "px"), ppi, ResampleMethod.BICUBIC);
} else {
activeDocument.resizeImage(UnitValue(fitValue, "px"), null, ppi, ResampleMethod.BICUBIC);
}
} else if (fitValue !== null) {
// Only fit value is specified
if (activeDocument.height.value > activeDocument.width.value) {
activeDocument.resizeImage(null, UnitValue(fitValue, "px"), activeDocument.resolution, ResampleMethod.BICUBIC);
} else {
activeDocument.resizeImage(UnitValue(fitValue, "px"), null, activeDocument.resolution, ResampleMethod.BICUBIC);
}
} else if (ppi !== null) {
// Only PPI is specified
activeDocument.resizeImage(undefined, undefined, ppi, ResampleMethod.NONE);
}
}
function saveWebP(compType, compValue, xmpData, exifData, psData, outputFolder) {
// https://community.adobe.com/t5/photoshop-ecosystem-discussions/saving-webp-image-by-script/td-p/13642577
function s2t(s) {
return app.stringIDToTypeID(s);
}
var WebPDocName = activeDocument.name.replace(/\.[^\.]+$/, ''); // Remove file extension
var WebPSavePath = outputFolder + "/" + WebPDocName + ".webp"; // Save path
var WebPFile = new File(WebPSavePath);
var descriptor = new ActionDescriptor();
var descriptor2 = new ActionDescriptor();
descriptor2.putEnumerated(s2t("compression"), s2t("WebPCompression"), s2t(compType));
if (compType === "compressionLossy") {
descriptor2.putInteger(s2t("quality"), compValue);
}
descriptor2.putBoolean(s2t("includeXMPData"), xmpData);
descriptor2.putBoolean(s2t("includeEXIFData"), exifData);
descriptor2.putBoolean(s2t("includePsExtras"), psData);
descriptor.putObject(s2t("as"), s2t("WebPFormat"), descriptor2);
descriptor.putPath(s2t("in"), WebPFile);
descriptor.putBoolean(s2t("copy"), true); // asCopy
descriptor.putBoolean(s2t("lowerCase"), true);
executeAction(s2t("save"), descriptor, DialogModes.NO);
}
Resources
Quick links - Photoshop
Quick links - Photoshop Mobile
Troubleshoot & Learn new things
AdChoices