Menu Close

Saving quality. Preparing product images for the web in Photoshop

Why do we save our images at the highest quality possible? The answer to this question is very simple: because we are not perfect and it might be necessary to correct some of the images after quality control. And we would not be able to do that if we saved them at high compression levels.

Some contents or functionalities here are not available due to your cookie preferences!

This happens because the functionality/content marked as “Vimeo framework” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.

This effect is very easy to demonstrate: I’ll save one image two times, one at the highest quality possible, and the best, and another one at the lowest, which is 0. If I used the Save for web panel, it would have been a range from 0 to 100, but it doesn’t matter. If we compare both images, the thing that really stands out is their size in kilobytes. The high-quality image weighs many times more than the low one. At the same time, it means that something, some information that was stored in those excess kilobytes is gone.

Now, let’s compare how the images look. It might not be evident at first glance, especially if you are not viewing them at 100% scale. And it’s easier to notice on big areas filled with relatively consistent color like this gray background. Quality degradation is not so evident on textured images, because there's less compression going on. But let me show you what happens to smooth surfaces.

Same as before, I’ll save one image two times, one at the highest quality possible, which is 12, and another one at the lowest, which is 0. Now, look at the low-quality image. It looks horrible even in its original, “saved once” state. The degradation will be even more evident as soon as I try altering the image. Imagine that the image in question was rejected at the quality control as “too bright”, and to make it pass you need to darken it a little bit. If you saved the image at the highest quality, it won’t be much of a problem: just use the curves and you’re fine. But if you’re dealing with the low-quality jpeg, you won’t be able to fix it. Any alteration and you’ll see the background filling with ugly compression artifacts, that become much more evident at this point.

Open

Of course, if you don’t use the lowest setting, it will not be that bad. But still, lowering the quality settings will severely decrease your ability to alter images. In catalogue retouching, the need to modify images arises on a regular basis. So if you want to know which quality setting you should use when saving images to pass them on to the quality control stage – there’s only one answer: the highest possible. It will be your backup in case you have to correct anything. But with the highest quality comes the biggest size, and it has to be dealt with.

In this situation you can’t kill two birds with one stone: it’s either quality or size, there’s no way to get both, you have to balance. So reducing the image size in kilobytes should be the final step either after the quality control stage, or just before, keeping the high-quality jpegs as a backup. To reduce size, you should batch all the images into jpegs with lower quality settings. The process should be fully automatic. The quality setting should set by someone responsible for the final look of the images: this is where it’s necessary to find a balance between how much they weigh and how badly damaged visually they get. In my experience, this is some middle range between low and high, some medium value, like 6 or 7.

Batch resave with lower quality

When your images are all checked and correct, and they are ready to be uploaded where they belong, like to a website, we have to batch all the images to lower their quality and reduce the size in kilobytes. This can be achieved by using a very convenient Photoshop command, which can be found in the File menu, Automate submenu. The command is first in the list and it's called Batch. It allows you to run actions on multiple files without having to open them all at once. But we don't have an action to run yet.

Batch to a specific folder with specific quality

What we are going to do now is record a simple action that will do two things. First, it will access the Save for Web command, which can be found in the File menu, Export submenu. You can also press Shift-Ctrl-Alt-S on your keyboard. There we need to set things up a little bit. First of all, make sure you're saving jpegs. Then check the “Embed Color Profile” checkbox. Some online stores don't do that, maybe because they don't care, maybe because they are trying to save 4 kilobytes a profile usually weighs. But if an image doesn't have a profile embedded, the chances of its color being transferred correctly through other people's browsers and monitors seriously drop. Is it worth spending 4 kilobytes? In my opinion, yes, because if you don't care about that, maybe you should omit color and tone correction as well, but normally people care about these things.

When customers buy goods online they get really disappointed if the color of the items they receive doesn't match what they expected. If you studied through the color correction section of the course, you already know that it's impossible to transfer color through the web, but we try as hard as we can to make our images look nice and correct to as many users as possible. So now it's time to spend 4 kilobytes of disk space per image to make sure that browsers color management systems recognize our images as sRGB, which they really are.

Another important thing here is quality. The less the number, the worse the images of less size you get. Under 60%, your images will be seriously compromised with all the artifacts. Personally, I think that 70 is a good option. As I said, quality affects image size. But it's impossible to make the images all the same size in kilobytes, as it's rather unpredictable. A black shoe on a white background will weigh less than a non-isolated close-up of some colored material. Saved with the same quality, images of the same size in pixels may result as totally different in terms of their weight, or size in kilobytes. If you're not looking for a particular file size, but just need to reduce whatever you have, just set the quality to something lower than the original 100%. Now you can click on the Save button.

A new window will be opened, and you'll have to select a folder where all your reduced quality images are going to be saved. It makes sense to make a folder named BATCH or something like this, in some specific place on your hard drive, because you will be using it a lot. So, this is how this whole Save For Web thing works. Now when that's recorded, if you run the action on any image, it will reduce its quality and send it to some specific folder. It's also wise to close the image while still recording, and when it offers to save the changes just say “no”.

Now you have an action that consists of two simple steps. It sends a copy of the opened image to the folder named BATCH located conveniently on your hard drive, and then it closes the original photo without any changes. If you work with multiple images that are located or at least can be gathered in one folder, you can run this action on them and it will batch them all to a lower quality. By using the Batch command, you can run actions on multiple files, either opened in Photoshop or located in a specified folder. To do it, just copy all the images you need to batch in a separate folder and use the File/Automate/Batch command. Find your set of actions where the quality reducing action is located and the action itself, because you can batch with any action of any set that you have.

As a source, choose a folder where all the non-batched image files are located. You can also batch Opened files, but this can be hardly applied to the catalogue processes, as we usually batch a lot, and you can only open 200 images in Photoshop at the same time. But that's still an option. You should also check the checkboxes like “Include all subfolders” if you need to, and also suppress all sorts of warnings and dialogs. You're not going to sit in front of your screen while the computer is batching, you'd want to go for a little stroll around the studio or your apartment if you work at home. You can also choose a Destination, but as you have it already inside of your action, you just leave it as None. That's it.

When you're done with the setup, you can batch images, and no matter how many files you have in your source folder, they will all be copied to another folder, specified in the action, and they all will be reduced in file size and quality. But… yes, there are always “buts”. What we can easily do is batch a bunch of images located in one folder, and we can use some percentage of the original 100% quality to reduce file size and quality. It doesn't always work for all the online stores, as some of them have very specific demands.

Batch while preserving folder structure

What if your files cannot be gathered in one folder? What if you have a bunch of folders with files, not just files, and you have to preserve the structure? In online stores, file naming is important. Each image has to be named correctly because every image belongs to an SKU, which is an abbreviation for Stock Keeping Unit. An SKU is a unique combination of numbers and letters. To us, every image is an image, a variety of pixels fit in a rectangle. But to a website engine, every image has to have a proper name or it has to be placed in a properly named folder.

On our side it looks like this: we either deal with images that contain SKUs in their names or with images that have to be placed in folders with SKU names. When put into named folders, images can have simple names like 1, 2, 3. If you take them out of their respective folders, you won't be able to identify the SKU they belong to. And if you have a bunch of images from different SKU folders, you can't copy them in one folder, because their names are the same. There are other possible situations with SKU naming, but these two options are the most popular. So how can you batch images if they all are sitting in their respective folders and they have to stay like that?

In Photoshop, you can't. But you can do it if you call JavaScript to your aid. If you have a bunch of folders and you need to batch them all into some lower quality, but you want to preserve the particular folder structure, it can be done by scripting. This script does the following: when you use it on an image that is located in an SKU folder, it creates a BATCH folder in the directory where all the SKU folders are sitting, and it creates SKU folders there and puts every image in its respective folder while batching them all to lower quality. This kind of saving doesn't address any specifically named folders on your hard drive, it creates folders depending on where it finds folders and files. It means that you can use it on both PC and Mac machines, and it will work.

var doc = app.activeDocument;
var filename = doc.name;
var foldername = doc.path.name;
var parentfoldername = doc.path.parent.name;
var filepath = doc.path;
var parentfilepath = doc.path.parent
var jpegQuality = 70; // 0-100 is quality
doc.flatten ();
doc.channels.removeAll();
doc.pathItems.removeAll();
savefolder = new Folder(parentfilepath + '/BATCH/' + foldername); //save to a BATCH folder above
savefolder.create();
saveFile = new File(savefolder + '/' + filename.split('.').slice(0, -1).join('.') + ".jpg");
var sfwOptions = new ExportOptionsSaveForWeb();
sfwOptions.format = SaveDocumentType.JPEG;
sfwOptions.includeProfile = true;
sfwOptions.interlaced = 0;
sfwOptions.optimized = true;
sfwOptions.quality = jpegQuality;
activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);

doc.close(SaveOptions.DONOTSAVECHANGES); //closes file

And this script here does practically the same, but all the SKU folders go to the BATCH folder, which would be created in your desktop folder. Why desktop? Because Mac and PC users have different file systems. One of the few places they have in common is the Desktop folder, which can be accessed via ~/Desktop/

If I put some directory like C:\BATCH\ there, the script would only work on PC. This way it works everywhere, so Mac users won't feel neglected.

var doc = app.activeDocument;
var filename = doc.name;
var foldername = doc.path.name;
var parentfoldername = doc.path.parent.name;
var filepath = doc.path;
var parentfilepath = doc.path.parent
var jpegQuality = 70; // 0-100 is quality
doc.flatten ();
doc.channels.removeAll();
doc.pathItems.removeAll();
savefolder = new Folder('~/Desktop/BATCH/' + foldername); //folder to desktop
savefolder.create();
saveFile = new File (savefolder + '/' + filename.split('.').slice(0, -1).join('.') + ".jpg");
var sfwOptions = new ExportOptionsSaveForWeb();
sfwOptions.format = SaveDocumentType.JPEG;
sfwOptions.includeProfile = true; //change to false if you don't want to embed profiles
sfwOptions.interlaced = 0;
sfwOptions.optimized = true;
sfwOptions.quality = jpegQuality;
activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);
doc.close(SaveOptions.DONOTSAVECHANGES); //closes file

Both scripts use some quality settings that you can specify yourself. Now it's set to 70, but it can be any value from 0 to 100. You can use a script like this in an action instead of the Save for Web step, and then you can batch images using the action. It will work just the same. And if you want to change the saving quality or add any other features, you just change the script text. This kind of approach lets you batch images in folders while preserving folder structure. Sounds like a great thing, but… wait, there might be more “buts”!

Batch to specific file size

What if you need your image size not to exceed some specific value? Some online stores that I worked with had demands like that. They demanded their images not to exceed 500 kilobytes. I don't really like this approach because file size depends on images. You can easily reduce a black shoe on a white background to just a fracture of its original weight, but a close-up is a different thing. You'll have to reduce its quality drastically to get a decently sized file. But if you say so, sure. Let's do it. It won't be easy though, as Photoshop does not provide a simple way how to achieve a specific file size.

When you're at the first Save For Web screen, where you pick quality, click on the Optimize menu in the upper right corner and choose the Optimize to File Size command. There, just put you desired file size in kilobytes and press OK. The algorithm will set the quality automatically to make the image fit the size you specified. But I have some bad news: you can't record it into an action. If you try and do so, it will record not the desired file size, but the quality settings that allowed this particular image to reach the file size you wanted. The rest will be just saved with the same quality. So you have to either save each image manually or resort to some advanced saving methods like scripting. Fortunately, you have me, and I've already taken care of that.

Photoshop doesn't let you batch images and make them fit some specific file size at the same time. But it's not a problem because you can script this. What we need the script to do is the following: try saving an image with some lower, but decent quality, like 70. Check the file size of the image, and if it exceeds some specific value, remove it and save with some lower quality, like 65. Repeat. If the image is still too big and we reached some unacceptable quality, save at the lowest quality level we find acceptable and move on. Sounds like a smart algorithm, right? First, we try to save with decent quality, like 70. Then we try lowering quality and see if it's possible to reach the desired file size while not dropping the quality too much. If that's possible, great, but if the image is too large for that, we won't let quality drop to 0.

Instead of just one variable, we need four. Same as before, we have the “jpegQuality” variable, which has to be a number from 0 to 100. This is the starting point for the script, it will try to save images with this quality first.

Then there's this “maxfilesize” variable, which is the maximum desirable file size. It should be specified in bytes. I set it to 512000, which is 500 kilobytes. To convert kilobytes into bytes, multiply by 1024.

You also have the “dec” variable, it's not called “dec” because of December. It was supposed to mean “decrement”, which is basically the same as “subtract 1”. The deal is the “dec” variable actually substracts 5. So each time when the script checks the file size and it's exceeding the desired value which is stored in the “maxfilesize” variable, the quality gets reduced by 5. If that's still not enough, it gets reduced by 5 again and again until it hits the minimum desired quality defined by the "minimumqual" variable. I set it to 50, but it can be any other number. It's just that when you save with quality less than that, you get really bad images.

var doc = app.activeDocument;
var filename = doc.name;
var foldername = doc.path.name;
var filepath = doc.path;
var parentfilepath = doc.path.parent
var jpegQuality = 70; // desired quality
var maxfilesize = 512000; // max size in bytes
var dec = 5; // decreasing step
var minimumqual = 50; //minumum desired quality
savefolder = new Folder(filepath + '/BATCH/');
savefolder.create();
saveFile = new File(savefolder + '/' + filename.split('.').slice(0, -1).join('.') + ".jpg");
doc.flatten();
doc.pathItems.removeAll();
doc.channels.removeAll();

function savebatchweb(saveFile, jpegQuality) {
var sfwOptions = new ExportOptionsSaveForWeb();
sfwOptions.format = SaveDocumentType.JPEG;
sfwOptions.includeProfile = true;
sfwOptions.interlaced = 0;
sfwOptions.optimized = true;
sfwOptions.quality = jpegQuality;
doc.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);
}
savebatchweb(saveFile, jpegQuality);
while (saveFile.length > maxfilesize) {
jpegQuality = jpegQuality – dec;
saveFile = new File(saveFile);
saveFile.remove();
savebatchweb(saveFile, jpegQuality);
if (jpegQuality <= minimumqual) {
break
}
}
doc.close(SaveOptions.DONOTSAVECHANGES); //closes file

So, what you can and should change here is the “maxfilesize”, which is in bytes. You can set the “jpegQuality” to any value you want, and it will be your standard quality reduction value. You can also change the “dec” value if you want the script to work faster and reduce quality more, like 10, not 5. If you set it to 10, it will just run three times: 70, 60 and finally 50. That is, of course, if 70 wasn't enough to reach the desired file size. But if you set the “dec” variable to 1, it will take ages to work, as it will be trying 70, then 69, then 68 and so on. And finally, you can change the "minimumqual" variable, which is the minimum desired quality. You can change it to something else, just make sure you have a look at images saved with the quality lower than that before you send them to anyone or use them anywhere.

An important notice! All the batch scripts are not supposed to be used for the initial saving, as they do not save with maximum quality. Use them on saved and checked files only.

All the scripts close the original file in the end without saving it, which makes a perfect sense. If you need it to stay open, remove the last line from each script, which is doc.close(SaveOptions.DONOTSAVECHANGES); //closes file

This is it, enjoy! Now you know how to save your images, how to use scripts to your convenience and how to batch images to lower quality. You're now ready for the next chapter.

Next: Afterword

Top

On this website, we use first or third-party tools that store small files (cookies) on your device. Cookies are normally used to allow the site to run properly (technical cookies), to generate navigation usage reports (statistics cookies) and to suitable advertise our services/products (profiling cookies). We can directly use technical cookies, but you have the right to choose whether or not to enable statistical and profiling cookies. Enabling these cookies, you help us to offer you a better experience. If you choose to disable cookies, you won’t be able to watch the embedded videos. Cookie policy