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

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.