webサイトではロード時の容量を減らすために、画像の軽量化をすることが求められます。
少しの画像であれば手作業で作業していくのも問題ないですが、webサイトでは多くの画像を使用することも割と発生するかと思います。
有名な画像軽量化ツールも色々ありそちらを利用するので全く問題がない気もしていますが、デザイナーであればほとんどの人が利用しているPhotoshopのみで同様のことが実現できないかと今回試してみました。
サブディレクトリに含まれている画像を再帰的に検索する必要がなかったり、同様の画像形式のみで書き出す場合であればドロップレットやアクションで自動処理を行うことも可能かと思います。
しかし、webサイトで利用される画像はJPEG・PNG・GIFなど様々な形式を用いられていることも多く、また画像の使用箇所等を明確にするためにサブディレクトリで管理することも多いかと思います。
ドロップレットやアクションでは条件分岐や再帰的にファイルを検索する機能がないため今回はJSXで自動処理の方を記述してみました。
まず以下のソースをテキストエディタにコピーしてください。
// ============================================================
// * 以下適宜変更する
// ============================================================
// ------------------------------------------------------------
// ** 対象フォルダのパスをシングルクォーテーション内に記述する
// - 包括されるディレクトリ内の画像もすべて取得を行うので
// 大元のディレクトのパスのみを指定してください
// ------------------------------------------------------------
var TARGET_FOLDER = '/Users/hogehoge/Desktop/test';
// ------------------------------------------------------------
// ** 品質の指定
// ------------------------------------------------------------
// *** JPEGの指定
// - 品質: JPG_QUALITY(1〜100)
var JPG_QUALITY = 60;
// *** PNGの指定
// - 品質: PNG_TONE(1〜255)
// - ポスタリゼーションを用いて色数を減らす
var PNG_TONE = 15;
// *** GIFの品質指定
// - 色数: GIF_COLORS(1〜256)
// - ディザ: GIF_DITHER_AMOUNT(1〜100)
var GIF_COLORS = 128;
var GIF_DITHER_AMOUNT = 75;
// ============================================================
// * 以下のScriptは変更しない
// ============================================================
var targetFolder = new Folder(TARGET_FOLDER);
var allImages = [];
function scanFolder(folder) {
var files = folder.getFiles();
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file instanceof Folder) {
scanFolder(file);
} else {
if (file.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
allImages.push(file);
}
}
}
}
function jpgExport (fileObj) {
var opt = new ExportOptionsSaveForWeb();
opt.format = SaveDocumentType.JPEG;
opt.includeProfile = true;
opt.interlaced = false;
opt.optimized = true;
opt.matteColor = new RGBColor();
opt.matteColor.red = 255;
opt.matteColor.green = 255;
opt.matteColor.blue = 255;
opt.quality = JPG_QUALITY;
activeDocument.exportDocument(fileObj, ExportType.SAVEFORWEB, opt);
}
function pngExport (fileObj) {
var opt = new ExportOptionsSaveForWeb();
opt.format = SaveDocumentType.PNG;
opt.PNG8 = false;
opt.transparency = true;
opt.interlaced = false;
activeDocument.exportDocument(fileObj, ExportType.SAVEFORWEB, opt);
}
function gifExport (fileObj) {
var opt = new ExportOptionsSaveForWeb();
opt.format = SaveDocumentType.COMPUSERVEGIF;
opt.colors = GIF_COLORS;
opt.transparency = true;
opt.interlaced = false;
opt.dither = Dither.DIFFUSION;
opt.ditherAmount = GIF_DITHER_AMOUNT;
activeDocument.exportDocument(fileObj, ExportType.SAVEFORWEB, opt);
}
function posterization(tone) {
var idposterization = stringIDToTypeID( "posterization" );
var desc256 = new ActionDescriptor();
var idlevels = stringIDToTypeID( "levels" );
desc256.putInteger( idlevels, tone );
executeAction( idposterization, desc256, DialogModes.NO );
}
if (targetFolder) {
scanFolder(targetFolder);
for (var i = 0; i < allImages.length; i++) {
var file = allImages[i];
var extension = file.name.split('.')[1];
app.open(file);
switch(extension) {
case 'jpg':
case 'jpeg':
jpgExport(file);
break;
case 'png':
posterization(PNG_TONE);
pngExport(file);
break;
case 'gif':
gifExport(file);
}
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
}
その後var TARGET_FOLDER = '/Users/hogehoge/Desktop/test';となっている部分の右辺のパスを今回軽量化したいディレクトリのパスに変更してtekitouna_namae.jsxといった形式で保存してください。
品質の設定等も変更できますが一旦パスの指定のみで実行は可能です。
次にPhotoshopを起動して、ファイル > スクリプト > 参照 から保存したファイルjsxのファイルを選択することで実行されます。
注意点としてはこのスクリプトはバックアップを取らずに既存のファイルがあった場所に上書き保存するようになっているため、実行前にオリジナルファイルから複製したものに対してスクリプトを実行するようにしてください。
また、こちらのスクリプトの実行は自己責任でお願いいたします。
PhotoshopではJSXを用いることで様々な業務をを効率化することができます。
もし効率化でお困り事などありました、お気軽に弊社にお問い合わせください！