Automate Save for Web

[Jonathan316]

I am redoing my website and I have many new images to post to the new site. I have been using save for web to make each final jpg about 400kb.

A few questions:

1) Is Save for Web the best way to specify a final file size and color space for the following situation: From a tiff file in Adobe 1998 I would like to output a jpg in sRGB at a final file size of approximately 400KB?

2) If this is the best method, how can I automate the process of setting the size of the final file output at 400kb?

3) If there is a better way to do this than using Save for Web, what is that?

Thanks!

[mark@headTrix]

Hi,

I don't think you want to place a set file size on your images. The point of optimizing your images is to reduce the download time of a Large Bitmap file. You want to reduce the image as small as you can make it while keeping the look and feel of the image.

Some images are best saved as JPEG, and some GIF, and some PNG .. it depends on the image.

For Photographs I think JPEG is the best, its 24 bit, and compresses much smaller that it comparative PNG24.

For flat art, solid lines of color a GIF would optimize the file better and smaller than a JPEG.

If you want or need transparency... then a JPEG will not work. GIF, PNG8 and PNG24 can be transparent.

GIF and PNG8 are just ONE color of transparency, so if you have a drop shadow or Alpha transparency you can save it out as a PNG24.

I personally think Save for Web is great, however there is a NEW Export window (File>Export>Export As) that was created to export images for the web. Most websites these days are Scaleable, so they change as the browser gets scaled or if people view it on a smaller device (phone, tablet) therefore the images also change, and the File Export as panel allows you to export multiple sizes of the same image at the same time for your Scaleable website.

Try using Save for Web for now, choose the 4 UP tab then you can try changing the settings on your image (try GIF, JPEG, PNG) so you can play with the sliders to optimize and you can see how it affects the LOOK and FILE size of your images and will help you choose the best looking and smallest sized image!

To automate the process you can set up an ACTION in the Action panel to either save or batch save your files----there are also other ways to save time by exporting all your layers to files, or Generating Image assets by naming your layers so everytime you save it exports.... these might have to be another post... or two!

Hope this helps!

mark

[Per Berntsen]

Lightroom will do exactly what you want, but I have to agree with headTrix that exporting to a fixed file size is a bad idea.

File size for jpgs is largely dependent on image content, and you may end up with some files being unneccesarily large, while other files may look bad because the quality setting is too low because the limit on file size.

For batch processing, try the Image processor, located under File > Scripts, and set quality to for instance 8.

I have never used this utility, but I believe the quality scale goes from 1 to 12.

There is even an Image processor Pro with more options, do a search for it.

[mark@headTrix]

Yes the scale is 1-12 which is a little confusing since its 1-100 in Save for Web Panel.

so an "8" is not 80% as it would be in Save for Web Panel. so an 8 will be about 66-67% JPEG compression.

although I think with the 1-12 it is incrementally divided into 12 sections. so a setting of 10 would be "77-84%" compression.

This is probably a good standard setting, although some images could probably look fine with a lower setting, definitely will depend a bit on what the photo is.... a close up versus a picture of clouds for example.

[Jonathan316]

Thanks for your responses to my questions. I wasn't aware of that Export As feature which is apparently replacing Save for Web. I now realize that I should have said that I am going for a MAXIMUM file size of 400 KB as a jpg. The company who's web template I use, aphotofolio.com, just told me that I can actually go up to 650kb now. He also mentioned that I can do the image and file sizing in Lightroom. I never noticed that little box before he mentioned it, under "File Settings" in the export dialog box "Limit file size To". Then of course I can adjust the output size at the same time under "Image Sizing". And then sharpening at the same time too.

Now I just need to figure out how to automate pasting the image onto a white canvas the size that fits the website design. For example, if the image is 1140 x 1140 I need to paste it, centered left and right onto a canvas that is 1140 x 1850. I think this can be done in Lightroom under Print but can't figure out how. Do you happen to know?

Thanks again for your responses. 

[mark@headTrix]

Hi Jonathan,

Yes there are so many ways to work. In Lightroom you can choose your Photos in the Library module and then click the EXPORT button (right next to the IMPORT button on the bottom lower left). And then you can check the checkbox to "Limit File Size To" and add sharpening on Export.

1. The print method you would have to go into the Print Module with your selected photos
2.  on the TOP right under "Layout Style" panel  you can choose "Single Image / Contact Sheet", you can set the cell size (size of the image area) It in Inches, NOT pixels so you will have to convert your pixels to inches to type that into Lightroom in the Layout Panel

3. set the CUSTOM File Dimension in the "Print Job" Panel (if you set resolution to "100" then you can type in 11.4 inches which would equal 1140 Pixels)

4. set the "Print to:" in the "Print Job" panel to "JPEG, and set the Quality (80 should be good - do some testing)

5. Select Print Sharpening in the "Print Job" panel if you want to sharpe (again might need testing)

6.  Set your background color to White in the Page Panel

Then in the bottom of the MAIN picture window in Lightroom     under "use: select "ALL Filmstrip Photos" so that when you press "Print to File..." it exports ALL of your images.

(I think if you click IMAGE below it will expand so you can see more details!)

hope that helps!

mark

[Jonathan316]

Thank you for all that info, Mark. I went through all the steps you mentioned. The one thing I can't seem to do in Lightroom in the Print module, is put borders on the left and right but not on the top and bottom. There doesn't seem to be any way around that. So I have actually used your original suggestion, which is Export As where I can add a canvas left and right but not top and bottom. First I am using Lightroom by importing my original tiff or psd files. Then exporting them sized and with sharpening. Then opening them up in Export As. Wish I could automate the whole process. But your suggestions have cut out a few time consuming steps. Thanks! Jonathan

[Per Berntsen]

Now I just need to figure out how to automate pasting the image onto a white canvas the size that fits the website design. For example, if the image is 1140 x 1140 I need to paste it, centered left and right onto a canvas that is 1140 x 1850. I think this can be done in Lightroom under Print but can't figure out how. Do you happen to know?

Are you doing this to improve the way images display?

Positioning and borders, padding. etc. on a website is controlled by the site's coding (html + CSS), and is normally not something you should need to be concerned about.

I'm not familiar with aphotofolio.com, but I would have thought that you should use plain images without any borders.

If you decide to use Lightroom to export for the website, I suggest that you export everything at quality 60, and then review file size and quality. (view each image at 100% and check for jpg artifacts). If there are artifacts (like blockiness in a clear sky), increase the quality setting, and export again, overwriting the file you exported first. If the file size is too big, export again with a lower quality setting.

If you export with Limit file size to checked, the Quality slider will be greyed out, and LR will use the highest quality setting possible without exceeding the size limit.

This means that some of your files (possibly a lot of them) probably will have an unnecessarily large file size - they would have looked just as good with a lower quality setting.

Also note that this kind of export might take a long time, because LR has to do a lot of calculations.

You can read more about jpg compression here: File formats

[mark@headTrix]

HI Jonathan!

Glad I could help! You can control the border of the page in Lightroom by changing the custom dimensions and then changing the CELL size of the Photo in the Layout panel could possible help with what you are looking for. Or if you learn how to use ACTIONS, you can record the steps of adding canvas size, saving to a JPEG, and then batch process the entire folder with that action assigned so Photoshop can do the work while you are eating lunch!

But I do agree with Per Berntsen​ in that adding white space should not be necessary if these images are for a website. This will only increases the size of the files, and therefore the download time to the users device. Normally adding white space is done with CSS so that as you scaled the browser that white space would be reduced, or in some cases move the images to the next row. Having extra white space could make things a bit messier. And what happens if you decide to change the background? Some things to think about. Hope this helps!

best,

mark