Tip: File Sizing for NPN in Photoshop

There is an obscure feature in Photoshop's "Save for Web & Devices" dialog that takes all the guess work out of sizing image files to meet NPN's 200K and 500K limits. Note: this is about file sizes not pixel dimensions.

Once the image is prepared and appropriately sized for NPN, open Photoshop's "Save for Web & Devices" dialog by selecting it under the "File" menu.

Click on the little triangular button in the upper right corner of the dialog (see Fig 1).

Select "Optimize to File Size" from the pop up menu (see Fig. 2).

Enter the desired file size in the "Optimize To File Size" dialog and click "OK" (see Fig. 3).

Now click the "Save" button to save your file.

Finally, figs are tasty and nutritious (see Fig 4).

I'm using Photoshop CS3. I don't know what versions of Photoshop and Photoshop Elements support this feature. It might be useful if people could post what version they're using and whether it supports this feature.

Thanks for the tip!

CS2 has the capability to "Optimize to File Size". In CS2, the flyout menu (fig. 2) does not have the options to "Convert to sRGB" or the "Include XMP

Funny, I never noticed this before. This is because I host my posted images on my web server, rather than upload them to NPN's server so that I can post images larger than 200K.

Thanks for the tip, Mark.

--P

I have found the 'Save For Web' feature often messes with the color and contrast of the image, so I use the resizing and web sharpening technique here: http://www.fredmiranda.com/forum/topic/726816. I set it up as an action on PS for the 720 px size and then for the 1200 px size, and get to the 200 or 500 kb limit using the quality settings when saving the JPG

I use CS4, I do not see that typing in the actual size is an option, I have to use the quality slider to adjust the kb output, unless I am missing something? The screen setup is totally different from CS3 and CS4 for optimizing for web.

Now that I understand it, it is painless!!

Dave

I have used this feature for a number of years now and it never occurred to me to post a thread about it. I haven't noticed the issue Doug mentioned but then I always convert to sRGB profile before moving to the Save for the Web & Devices procedure outlined above to meet the 200 kb size limit. Works great, thanks for bringing this up Mark.

Doug - "Save for Web" doesn't do anything directly to colors in your image. What it DOES do, though, is remove color profile and metadata information to save file size. So if you're using a color managed browser (and most people aren't), you'll likely see a shift in your images between a regular save, and "Save for Web". I'm not sure if that's what's happening, but it seems like the most likely explanation.

The problem with this is that, as I said, most people aren't using a color managed browser. So by leaving the colors "correct" in your environment, you're likely making them a bit wonky for everyone else. That's why most people recommend a conversion to sRGB (not an assignment, but a conversion) so that the colors will better match the capabilities of most people's monitor. That way, everyone is seeing as close to the same colors as possible (on average). Of course, the cost of this is a little extra time, and possibly some color tweaking after the color space conversion.

In CS4, the button isn't a triangle but instead an outline of a list in the upper right hand corner. After that, it works much the same. Great tip, Mark; can't believe I missed it.

Mark, thanks for posting the information and screen prints as well. I've always Converted to sRGB profile first, and then the Save for Web process you have outlined so well here.

Like Paul, I always convert to sRGB prior to using Save for the Web. It is only rarely that I have any noticeable color change.

--P

I'm confused about fig.4.

Pete D. doesn't really find them tasty - no comment on nutrition.

"I'm confused about fig.4."

I am too. Go fig-ure

--P

wow lotsa great response thankyou so much. I'll check it all out.