Photoshop Top 40, Feature #34: Save for Web (and Devices)

Submitted by deke on 25 August 2009 - 12:15am.

If you take a look at the File menu you'll see a command, about midway down, called "Save for Web & Devices." It's actually two commands. There's the "& Devices" part, which lets you save an image for display on virtually every cell phone except the iPhone. No offense, but if I had to rank this feature, I doubt it'd make my Top 10,000.

But the first part of the command, "Save for Web," that part rocks. It lets you downsample and compress an image for dissemination on the Web. Not to mention jettison all extraneous information and convert the colors to sRGB, the color space of the people. Plus you can compare the Web-optimized image to the original and thereby judge what gets lost in the translation. In other words, Save for Web does everything it can to produce slim, trim, and ultimately beautiful Web graphics.

We use this command to produce every image on this site. If that's not high praise, I don't know what is. Watch the video to learn more.

(For a list of all Photoshop Top 40 videos thus far, click this link.)

. Tagged with:

Comments

picture preview

Submitted by PCbee on 22 September 2011 - 3:43pm.

In Photoshop 5, I cannot preview the pictures in my files without opening them. This was a given with prior versions. What is wrong?

You can't preview the images where?

Submitted by deke on 22 September 2011 - 7:06pm.

In the Bridge? In the Open dialog box?

What OS are you using?

Follow up

Submitted by PCbee on 23 September 2011 - 3:50am.

I am using Win 7 64 bit, Explorer 8(?), Photoshop Elements 5. I am not real computer savvy, so please excuse my lack of knowledge.

The lack of preview happens when I open Photoshop Elements 5 and pick a picture to edit. All the pictures and photos have a landscape scene where the actual picture or photo usually is located. This is true of all the pictures and photos. I'm sure its a setting somewhere that will allow the actual picture or phototo show, I just can't find it. I can open the photo okay, but can't tell what it actually is until I open it. Everything else works okay

Any help will be appreciated.

Save for Web does everything

Submitted by zicklerboey123 on 19 April 2011 - 4:06am.

Save for Web does everything it can to produce slim, trim, and ultimately beautiful Web graphics.

Windows or Mac??

Submitted by FreePowerGenerator on 1 November 2010 - 11:37pm.

Wonder which is best in the world of Website imagry?
I'm a rank beginner as far as working with all this goes.
Though I'm using an ASUS, 64 bit, Windows 7. And its capabilities still blow me away!
Cheers - Michael

Question about Batch Processing and Save for Web & Devices

Submitted by Megalos on 28 October 2010 - 2:44pm.

I have the following question. I have made an action which resizes, does some color correction, sharpens the image and then saves it using 'Save for Web & Devices'. Then I try to use that action using the Batch processing feature in Photoshop. I set the 'Source' to a specific folder where all my source images are (e.g. C:\Input\). I set the 'Destination' to a specific folder too (e.g. C:\Output\). I make sure that the 'Override Action "Save As" Commands' checkbox is unticked, so that I can set some specific File Naming options (basically, I add the string "_small" between the original file name and the extension). When I'm ready and hit the 'OK' button to process all my images, suddenly the 'JPEG Options' dialog box opens after the first image has been processed. That's not what I wanted! When I press 'OK', the next image is processed and the 'JPEG Options' dialog box pops up again! So I have to manually hit 'OK' for 100+ times (I have 100+ images to process), while the Batch function ought to be automatic, not manual. And moreover, I don't want to save my images using the 'JPEG Options' dialog box and get big file sizes. That's why I chose 'Save for Web & Devices' in the first place ;).

Does someone know how to get the 'Save for Web & Devices' option to work properly in combination with the Batch processing feature?

I found the answer: Use the

Submitted by Megalos on 1 November 2010 - 6:58am.

I found the answer: Use the script from 'Paul MR' that is called Picture Processor. It works great!

I created just such an action

Submitted by deke on 1 November 2010 - 1:03pm.
In my Chapter 34 of my Photoshop CS5 One-on-One: Mastery course for lynda.com. It sounds like you have this figured out now, but you might still want to try it out. After all, with an action you can easily modify the results later and batch other operations. Here's a link to the action set that I used in the videos.

First, thank you for your

Submitted by Megalos on 1 November 2010 - 3:52pm.

First, thank you for your reply, Deke. Here some comments:

I do use an action. The Picture Processor (PP) is really sort of a 'Batch v2.0'. You can call actions in PP. The problem is that the original Batch command in Photoshop (PS) isn't really compatible with the 'Save for Web' feature. For example: you can't use the 'Destination: Folder' option in the PS Batch command and use the 'File Naming' options (what I want). However, when you do that, PS will still save in the folder specified in the 'Save for Web' step of the action without the 'File Naming' options I specified. So you can't use the 'Save for Web' feature together with the ability to save to a custom folder (I want to set the output folder regardless of what is set in the 'Save for Web' step in the action) and use the 'File Naming' options. The PP script can do that, and that's why I called it 'Batch v2.0'. (It can be found here: http://tinyurl.com/294b3pf )

Proper support for 'Save for Web' inside the Batch command; maybe a feature for PS CS6 ;-)

My question may seem stupid

Submitted by ducafelipe on 25 November 2009 - 8:23am.

My question may seem stupid but where do I find these videos ? I mean, is there a RSS feed or a podcast ? I found no trace of that video on the Lynda Podcast and did not found any other RSS feed...

Thanks for your help ! ;-)

Libros Gratis

PPI for the web

Submitted by Crazylegsmurphy on 13 November 2009 - 5:51am.

Hey All,

I am wondering if you could help me understand something that has recently thrown me for a loop.

I have been designing webpages for, well, years and I have always designed at 72 PPI as it is considered the standard.

Recently I heard that this 72 PPI number is actually not accurate to modern monitors. So, what should I (we) be developing at, and does the save for the web function in PS override this anyway and force it to 72 PPI?

Thanks,

Jeff

Resolution doesn't matter for the Web

Submitted by deke on 13 November 2009 - 3:45pm.
Modern monitors tend to vary anywhere in resolution from 96 to 120ppi. But that doesn't matter where screen images are concerned. As a rule, Web browsers show each and every pixel in an image, regardless of resolution. (The one exception is when an image is too big to display in a given window, in which case the browser scales it to fit.) For complete info, check out these two Martini Hour podcasts: Martini Hour 025, In Which Colleen Experiences Deke in High Resolution Martini Hour 026, In Which Deke Proves He Really Does Have an Hour's Worth The net result is: size matters, resolution does not.

Awesome, thanks Deke! I'll

Submitted by Crazylegsmurphy on 13 November 2009 - 6:18pm.

Awesome, thanks Deke!

I'll check out the podcasts right now.

Just a quick suggestion. If you haven't already, it would be cool if one day you did a blog post regarding all your Wacom settings. I have always been curious as to what setting other artists are using, but can't seem to find much information on it.

Thanks again for the reply.

Jeff

Nice One

Submitted by solarpoolheatinglady on 17 September 2009 - 8:40am.
Wow this is a usable article for photoshop lovers. Great thanks for this.

This is good

Submitted by becomewriter001 on 7 September 2009 - 10:06am.
This is good to know and this is something I would love to try .

great tutorial

Submitted by clownssydneyent... on 30 August 2009 - 9:58am.
Thanks for this additional tutorial video sir...it really increase my interest in photoshop...thanks again.

i can't see the movie!!

Submitted by Switer on 28 August 2009 - 7:40am.
i would like to know why i can't see the movie. Just blank flash there. Even all the Feature # before. Can anyboday tell me? Tks!

Blank movie

Submitted by sgarriepy on 28 August 2009 - 4:44pm.
I also suffer this same problem, but only with some of the films here? Has anyone told you why yet?

Try clearing the cache

Submitted by deke on 29 August 2009 - 12:28am.
It's always possible you need to update your version of Flash. But it seems that the most common problems with YouTube videos happen when the cache gets cluttered. If you're using Firefox, you bring up Preferences, switch to Privacy, and click Clear Now. Make sure the Cache check box is on before you click Clear Private Data Now.

Faster website

Submitted by jretzner on 27 August 2009 - 1:34pm.
This should really decrease the launching time and moving within my website time. Thanks!

Graphic Gods

Submitted by Wedding Planning on 27 August 2009 - 12:15pm.
I am just beside myself trying to take in all of this insanely incredible information. Working for a wedding planning company where all of our graphic work is for the most part almost on a caricature level, this in depth photo editing is simply amazing to me. As a new member of this world, I will keep watching and be sure that our graphics department pays attention to these mastery skills. Just had to put in my two cents and just sit and watch in awe.

wooo

Submitted by munch314 on 26 August 2009 - 8:45am.
Deke, you gonna let him get away with that? What's the matter? What's the world coming to?

Interesting....

Submitted by draken3d on 26 August 2009 - 5:18am.
Well, there is a function I never used in Photoshop that is quite interesting! Thanks again Deke! :)

I agree

Submitted by acaiburninfo on 26 August 2009 - 10:35pm.
I have also never used this function. I think it could really be useful though, thanks Deke. ;]

Preview

Submitted by ReneDamkot on 26 August 2009 - 4:58am.
If you're going to mention the different "Preview" options, please expand a bit on it. The image is not going to look brighter on a Mac using Gamma 2.2 and using a decent (color managed) browser (as anybody should). There's enough confusion about color management as it is ;) You also might want to mention that stripping the profile will ensure consistency between an image and a background on Safari, while embedding a profile will ensure that "color Stupid" browsers (Safari and FF 3.5 at default) will display an image correctly, instead of assuming monitor profile. Here's what's happening: “Monitor Color“: As a non color managed application would show it on your screen. “Macintosh (No color management)” As a non color managed application would show it on a monitor with gamma 1.8 (ancient): The image appears lighter. “Windows (No color management)“: As a non color managed application would show it on an sRGB monitor. An sRGB image will look the same here as in the last option. An AdobeRGB or ProPhotoRGB image will appear less saturated. “Use document profile“: As a color managed application would display it. http://www.getcolormanaged.com/color-management/saveforweb/

I guess I'm not seeing the controversy

Submitted by deke on 26 August 2009 - 5:34pm.
The Preview options are fundamentally representative. Mac screens are set to a gamma of 1.8 by default. To suggest that they ought to be calibrated to 2.2 is interesting (if debatable). But given that 1 out of 100 users so much as characterize their displays--let alone regularly calibrate them--the chances that a Mac screen is set to anything but 1.8 are slim. By default, no profile is embedded, the reasoning being that most folks do not employ color-managed browsers, and even if they did, the screens have not been properly characterized, redering the color-management process an exercise in futility. Finally, given sRGB's ubiquity as a factory-default display space, converting an image to sRGB resolves issues for creative pros working in Adobe RGB or ProPhoto RGB.

No controversy really...

Submitted by ReneDamkot on 27 August 2009 - 9:54am.
Just trying to avoid confusion. Mac screens are set to gamma 1.8 for a default, true. I'm happy that Apple (at last) saw the light for OSX 10.6 and changes that. They have been recommending Gamma 2.2 for a while , but alas, most people don't read manuals, nor does Apple make it easy to find ;) I fully agree that any image on the web should be converted to sRGB. No argument there. And I also agree that any image that should blend into a background should have no embedded profile. That is the only way to get Safari and FF 3.5 at default setting to display it identical to the background after all... IMO, photographers should be aware however, that not embedding a profile, will make the image look different from Photoshop in most browsers. And if you don't point that out, a lot of people will be confused about that. At the same time, web designers should be aware what happens when you do, or do not, embed a profile, and what are the (dis) advantages of both. Also, for a photographer (which I assume would cover a pretty big percentage of your readers), I'd hope that accurate display of an image would be important. The only way to get that, is to embed a profile. (and then hope that the viewers will browse color managed and have calibrated screens off course ;)) I guess the point I'm trying to make is that the "preview" options are only going to give a very rough approximation. In fact, the only two that will be accurate are "Document profile" and "Monitor Color". Since those show you what the image will look like color managed (in an ideal world that would be identical anywhere) or non color managed but only on your system (who cares?) "Mac" and "Windows" preview are essentially useless IMO: For instance, if someone is browsing the site on some uncalibrated Dell laptop, using Chrome, it's anybody's guess what the image will look like on his screen. On a side note; I know that the majority of people browsing my blog (about 75%) use Firefox or Safari. Assuming they use the latest Firefox, that would mean they browse color managed... ;) Maybe non colormanaged browsing is on the way out. Since these two browsers won't color manage anything without an embedded profile, that might lead to a whole bunch of new web posts about backgrounds and images not matching, instead of the plethora there is now about browsers not matching PS ;).

I can see your argument

Submitted by deke on 27 August 2009 - 1:35pm.
For embedding a profile. I think you laid it out pretty nicely, actually. And we may indeed be on the verge of a new day where reliable color is possible on the Web. But not until the majority of screens are characterized. As you mentioned:
For instance, if someone is browsing the site on some uncalibrated Dell laptop, using Chrome, it's anybody's guess what the image will look like on his screen.
Substitute "Generic PC" for "Dell laptop" and you've described 90 percent of the machines out there. Certainly, there's no harm in embedding profiles. (Just avoid trying to match a background as you say.) But I wouldn't put much faith in it unless I were controlling the screen or kiosk.