Expert: LizaL - 3/1/2006

Question
I've just recently run into a problem trying to make small pictures to upload for web use.  When I say small I mean about 300x200 pixels at less then 100dpi.  I'm making these pictures by cutting and pasting and resizing parts of larger pictures.  my problem is that I can't seem to get certain previously described "small" pictures to be under 500K.  Why would this be?  this seems like a massive file size for such a small picture.  I'm using Photoshop CS2.  In one example, I cut and past one part of a large picture, put in some text, and put a gradient on a background layer, this all on a 300x200 pixel frame at 70 dpi.  The file size came out to be over 600K!  Any help would be greatly, greatly appreciated.

Answer
Hi Tyler,

It sounds to me like your gradient is the culprit here. But that's not a problem if you use the Save for Web method of saving your files. Next time you go to save one these pictures, make sure you keep a copy as a straight Photoshop file with layers (in case you have to go back and edit), but then, when you're ready to save a copy to use on the Web, instead of doing a Save or Save As, select Save for Web. You'll be taken to a screen where you have the option of looking at your file in a "before" state, with the "after" state alongside -- or you can look at it by itself. The more important thing here is that this screen has controls for the JPEG or GIF settings (as well as PNG), and you can actually control how it's going to look in the Web.

This might sound confusing so look at this:
http://little-works.com/all_experts/save_for_web.mov

You can see the differences in size, and also the differences in quality, when you change the JPEG settings. But the overall difference here is that when you use Save for Web, you let Photoshop do the JPEG compression needed for Web files -- and as a result, your files are small and optimized.

You mention having to put type on the pictures... I wonder if you could do this on your Web page, instead of in Photoshop? That is, could you add the type later, say, below the picture, in the Web page itself?

If not, you'd need to use guides in Photoshop to block off your type, then go to ImageReady and choose Create Slices from Guides from the Slices menu. Now you need to select the slice that has the type, and save it as a GIF (see below), since type is always optimized as GIF, rather than JPEG. Then you'd select Save Optimized As... from the File menu. What this does is generate the HTML for the page. Open the page in a text editor, or an HTML editor like Dreamweaver, and you can edit the page as usual.

http://little-works.com/all_experts/slices.mov

This last part about the type might sound confusing, but try it yourself and see what you think.

Hope this helps --

Lisa