'Saving for Web' in PS

[Steve Kaluski]

I just thought I might recap on 'How to Save for Web', as I full appreciate that the majority know how and indeed, this has been posted elsewhere, but there are, it seems, a few that have a few issues and this I hope might serve just as a refresher.

OK, so you have your Final RGB JPEG saved, all cropped and sized to what your want it to be ie A4 300dpi for printing say, and now you want to post your image on the web.


Step 1: Firstly click on Edit at the top of the Menu bar > then scroll down to Convert to profile

A window now pops up and it should show Source to be RGB and you should ensure that the Destination is sRGB

Click OK

[Steve Kaluski]

Step 2: Go back to the menu bar, click File > Scroll down to Automate > Click, Fit image

Type in the actual size you want the file to be ie 800px x 800px for Portrait and 1024px x 800px Landscape, the image will be cropped according to the max size for BPN. If you wish to post smaller, just type in the longest figure ie 500px x 500px

You may at this stage do another round of selective sharpening

Then click OK

[Steve Kaluski]

Step 3: Go back to the menu bar, click File > Scroll down to Save for web

Please note that there a few variables between CS2, 3 & 4, this is for CS4 but applies to all

In the window it should show JPEG, Maximum. Optimized, Embed colour profile, Convert to sRGB are all checked. Quality should be set to 100

Click on the three little bars in the top rh corner and the Optimze window pops up, type in 200, click OK it will now resize to the correct size.

[Steve Kaluski]

Step 4: Now click on Save and give the file a name ie Barn Owl BPN, but do not save the file with your original name, now click Save, job done. After, when you hit the Done button it prompts you to save the file, say NO otherwise you will over write your file and lose your ORIGINAL.

Now you can post on the web. Hope this helps :)

[Harshad Barve]

Thnaks for this Steve , Big help indeed

[Dumay de Boulle]

Thanks Steve..This has made the world of difference for me...Big help indeed!

[Kerry Perkins]

Steve, just wanted to point out that you don't have to use two different "fit image" settings. If you leave this set to 1024 horizontal and 800 vertical the program will default to the longest possible edge, which will be either 1024 or 800 depending on the original orientation. This is convenient as you only have to enter these numbers once and they will be there for subsequent saves.

[Ron Bernstein]

Thank you for this post. I want to be sure I followed your instructions, using CS5, because when I hit okay after putting 200 in the field for optimize to file size in step 3,
100 changed to 59% and quality changed from maximum to medium. What gives?
THANKS!

[Steve Kaluski]

What gives?

Nothing, that's fine.

[John Chardine]

I would add that resizing can be done with Image->Image size. If you use Fit image to resize, the image interpolation method is taken from the Ps General preferences. Image->Image size allows you to change this on the fly.

[Doug Brown]

There's a much simpler way to save for the web in PS. Just use the Save for Web command. In that dialog, you can resize your photo by entering the width or height you desire in the Image Size section, and then hit Enter. Make sure the Convert to sRGB box is checked. Click the drop-down menu at the top right and choose Optimize to File Size. Then choose 195 KB for your file size (if you choose 200 KB, you may end up with too large of a file for BPN). Click Save, and you're done. :)

[Jay Gould]

There's a much simpler way to save for the web in PS. Just use the Save for Web command. In that dialog, you can resize your photo by entering the width or height you desire in the Image Size section, and then hit Enter. Make sure the Convert to sRGB box is checked. Click the drop-down menu at the top right and choose Optimize to File Size. Then choose 195 KB for your file size (if you choose 200 KB, you may end up with too large of a file for BPN). Click Save, and you're done. :)


Doug, when you use this method, and do a substantial resize, e.g., from 5000 to 1024, which algorithm are you using in the quality drop down menu to the right of the sizing box?

[Jay Gould]

...

OK, so you have your Final RGB JPEG saved, all cropped and sized to what your want it to be ie A4 300dpi for printing say, and now you want to post your image on the web.

...
Click OK


Steve, Rachael kindly referred me to this posting tutorial - thank Rachael.


What sizing method did you use to go from your full size image to A4 in this example?

Have you used the method described by Doug at the end of the thread and have you found a significant difference in output quality?

[John Chardine]

Hi Jay- Under Preferences-General you can set Image interpolation to what you want. This is what is used in Save for Web and Devices and in File-Automate-Fit image.

[Jay Gould]

Another question comes to mind: Normally, we are taught to reduce to size and then sharpen the reduced file. Following either of these methods - Steve or Doug - when are you sharpening?

[Jay Gould]

Hi Jay- Under Preferences-General you can set Image interpolation to what you want. This is what is used in Save for Web and Devices and in File-Automate-Fit image.


John, I do understand that you can tell CS5 which interpolation to use; which is the best for large reductions in one go? I just did a test saving the same image all three ways and I cannot tell the difference between the three in lightroom.

[Don Lacy]

Hi Jay, For down sizing large files I would recommend using the image size command in Photo Shop using bicubic and doing it in stages to help preserve detail make sure you have the constrain proportion and resample image boxes checked. If the image has a lot of detail like a landscape image going from 5000 to 4000 to 3000 to 2000 to 1020. Only after you reach your finale size should you sharpen the image for the web. When the image is sharpen go to edit, convert to profile and in the destination box chose sRGB and correct any color shifts or clipping if needed form converting to the smaller color space. Only then do I go to save for the web were I have the following boxes checked Progressive and embed color profile (the image is already in the sRGB color space and I do not want save for web to do any conversion) preview set to document profile and meta data set to copyright. Use the drop down menu to set file size and then save.
I know doing the steps separately ads time but I want to make sure I have control over the conversion of the color space so I can correct any issues that come up and the finale sharpening of an image should be done when it is at its output size.

[Jay Gould]

Hi Don, I have created actions using the image size command for all amounts of reduction starting with two 25% reductions and then 10% down to the size I want.

I created the actions using both Bicubic Normal and Bicubic Sharper. Bicubic Normal results in some halo; Sharper results in a lot more. I stopped using Sharper after reading a Cambridge Color Article which basically suggested using Normal and then sharpening the final image.

The halo from Bicubic Normal is enhanced with either Pixel Genius Output Sharpening or Nik Output Sharpening.

Interestingly, if I simply use either Image Size or reduce using Save For Web in one shot there is no halo.

[Don Lacy]

Then go with image size Bicubic in one shot thats what I do for 99% of my images and while I love and use Pixel Genius output sharpening for prints I find it over sharpens when set for web use and stop using it for that since I get much better results with smart sharpen on a layer to selectively sharpen different areas of the image as needed.