How to create actions for PNG24 and then convert to PNG8 (responsive web workflow how to)

Question

Many of us, particularly professionals who use Photoshop, are sick of the exporting workflow and how we can't save actions using the new Export window, as well as how Adobe removed JPG percentages. As a resut, I've developed a fast workflow for exporting PNG24 from Photoshop and then saving to PNG8 using other tools. You may find it of use until Adobe gets their act together. This will work on Windows or Mac, and the command line tools also work on Linux.
Basic Workflow:

Export from Photoshop as PNG24 using legacy web export (saving steps to actions)
Run pngquant command line tool to convert to PNG8
Optimize through ImageOptim (or similar app)
Run files through a file renamer (if your workflow requires it)

Requirements:

Basic use of Terminal
Homebrew (for ease of use)
libpng (install with brew)
gcc (install with brew)
rust (install with brew, may be needed, read install instructions)
pngquant (command line tool)

When creating your actions, export to PNG24 (with alpha if needed) from legacy web export so it will save the step to your actions. Once you run your action and have all your PNG images in a folder, you will then fire up Terminal and use the following command, and additional flags if necessary and tweak as needed:
 
pngquant --speed=1 --quality=50-75 --strip /path/to/png/folder/*.png
 
SPEED flag means it will take longer for better compression (it's very fast at lowest setting of 1), QUALITY is a range of the lowest and highest that pngquant will shoot for while trying to maintain visual accuracy, STRIP will strip unnecessary metadata (is the default on mac and not needed), and using * is a wildcard so it will work on all your PNGs instead of a single file.
Note that you can't set an output folder if using *. It will append the converted filenames with "-fs8" or "-or8" inside your original folder, but there is an optional flag "--force" which you can use to overwrite the original PNGs. I tend not to force overwrite, since I play with quality settings, but use what works for you.
After you are done using pngquant, I would suggest running your PNGs through an optimizer, such as ImageOptim to make them as small as possible. I also use A Better Finder Rename to batch rename my files when done, removing the pngquant suffixes. Very useful when you have a lot of files for responsive web work. Links are in the top of this post for each.
I know this is a workaround, but it's fast once you're used to doing it and you can get pretty good results with pngquant. I'm using WebP images using the WebPShop PS plugin which I also save to my actions, so the PNGs are just fallbacks when I need transparency.
Installation Notes:
On my desktop mac, all I needed to do was download the zip for pngquant from Github, install libpng with homebrew, and then cd into the pngquant folder and build it globally using `sudo make install`. On my laptop, for some reason the zip wasn't recursively downloading all files, and I needed to use the Github CLI to clone it. When running git on command line, Github will prompt you for password—I find it easiest to use HTTPS method so I don't need SSH keys, and it will let you validate through your browser, which is fast if logged in to your Github account.
Here's a few code snippets for doing the installs (on macOS):
Install Homebrew
 
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 
Install libpng
 
brew install libpng
 
Install gcc
 
brew install gcc
 
Install Github CLI with homebrew
 
brew install gh
 
Download pngquant recursively using Github CLI
 
git clone --recursive https://github.com/kornelski/pngquant.git
 
Build pngquant globally
 
cd /path/to/pngquant_folder/sudo make install
 
Hope this helps those who need it. It's made my life easier and I can still build my beefy actions I need for responsive web images that need PNG with transparency but smaller file sizes that come with PNG8.

rob day · Answer

Hi @MisterExt , not sure if this helps, but you can save for web via the Photoshop Javascript API’s exportDocument command—I don’t think there is a way to do it via recorded ActionDescriptors.

If you set the format to PNG and the PNG8 property to true, the output will be an index color PNG. This .jsx example will batch convert a folder of .PSD files to 8-bit PNGs into a subfolder in the same directory:

//select a folder of PSD files
var f = Folder.selectDialog("Select the folder containing .PSD files"); 
if(f != null){ 
    fa = f.getFiles(/\.(PSD)$/i);
}

//Make a new subfolder for saved PDGs
var pngF = Folder(f + "/PNGS")
pngF.create()

//the save for web PNG Options https://theiviaxx.github.io/photoshop-docs/Photoshop/ExportOptionsSaveForWeb.html
var so = new ExportOptionsSaveForWeb();
so.format = SaveDocumentType.PNG;
so.PNG8 = true;
so.blur = false;
so.colors = 256;
so.colorReduction = ColorReductionType.ADAPTIVE;
so.dither = Dither.DIFFUSION;
so.ditherAmount = 100;
so.includeProfile = false;
so.interlaced = false;
so.lossy = 0;
so.optimized = true;
//so.quality = 60;//for JPEG
so.transparency = true;
so.transparencyAmount= 100;
so.transparencyDither = Dither.NONE;
so.webSnap = 0;


//Save For Web
for (var i = 0; i < fa.length; i++){
    var of = open (fa[i]);
    var n = of.name.replace(/\.[^\.]+$/, '');
    n = n+".png";
    of.exportDocument(new File(pngF + "/" + n ), ExportType.SAVEFORWEB, so);
    of.close(SaveOptions.DONOTSAVECHANGES);  
};

If you want to edit the PNG options the ExportOptionsSaveForWeb properties are listed here:

ExportOptionsSaveForWeb

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded