Save Photoshop CS5 Images for Web and Mobile Devices

Saving files for the web or mobile devices in Photoshop Creative Suite 5 creates a smaller version of your image so it will load quickly. It’s important to know the differences between GIF, JPEG, PNG, and WBMP, so you can choose the appropriate format based on the type of image you’re saving. The idea is to make the image as small as possible while keeping it visually pleasing.

GIF

Use the GIF format if you have large areas of solid color.

An image with lots of solid color makes a good GIF.
An image with lots of solid color makes a good GIF.

The GIF format isn’t lossy (it doesn’t lose data when the file is compressed in this format), but it reduces file size by using a limited number of colors in a color table. The lower the number of colors, the smaller the file size.

Transparency is supported by the GIF file format. Generally, GIF files don’t do a good job on anything that needs smooth transitions from one color to another, because of the format’s poor support of anti-aliasing, which is the method Photoshop uses to smooth jagged edges.

Because anti-aliasing needs to create multiple colors for this effect, GIF files generally aren’t recommended. In fact, when you reduce the size of a GIF, you’re more apt to see banding (streaks in the image) because the anti-aliasing can’t take place with the limited number of colors available.

JPEG

JPEG is the best format for images with smooth transitions from one color to another, as in photographs.

The JPEG format is lossy, so you shouldn’t save a JPEG and then open it, edit it, and save it again as a JPEG. Save a copy of the file as a JPEG, keeping the original image in PSD format if you need to edit the image later, open the original PSD, make your changes, save the PSD, and then save a copy of the edited file as a JPEG.

The JPEG format does not support transparency.

Images with smooth transitions from one color to another are good candidates for the JPEG file form
Images with smooth transitions from one color to another are good candidates for the JPEG file format.

PNG

PNG is the perfect combination of GIF and JPEG. PNG supports varying levels of transparency and anti-aliasing. This variation means that you can specify an image as being 50 percent transparent and it shows through to the underlying Web page! You have a choice of PNG-8 and PNG-24. As a file format for optimizing images, PNG-8 doesn’t give you any advantage over a regular GIF file.

PNG-24 supports anti-aliasing (the smooth transition from one color to another). These images work beautifully for continuous-tone images but are much larger than a JPEG file. The truly awesome feature of a PNG file is that it supports 256 levels of transparency. In other words, you can apply varying amounts of transparency in an image where the image shows through to the background.

A PNG-24 file with varying amounts of transparency.
A PNG-24 file with varying amounts of transparency.

PNG files are not supported by all browsers. Also, PNG-24 images have file sizes that can be too large for the Web.

WBMP

WBMP is optimized for mobile computing, has no compression, is one-bit color (just black and white — no shades), and is one bit deep. WBMP images aren’t necessarily pretty, but they’re functional. You have dithering controls to show some level of tone value.

Want to see how your mobile content will look on specific devices? Click the Device Central button in the lower left corner of the Save for Web & Devices dialog box.

The WBMP format supports black-and-white only.
The WBMP format supports black-and-white only.
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com