Preparing Images for the Web

Written by Brian Ledebur

What We Know So Far

To date we’ve discovered the following about images on the Web:

The following describes the JPEG and GIF image formats, how they work, and when to use them. We will also be introduced to a new image format, the PNG, and briefly talk about it as well.

A Note on web safe colors

When working in Photoshop or Illustrator, you may have come across the term “Web Safe Colors”, and even been confronted with the Web Safe color palette. Back in the day, in addition to having to worry about browsers, screen sizes, and so forth, we also had to worry about the amount of colors our users set their monitors to. Many old computers only had this set to 256 colors. If we wanted to display a color outside this palette, we would see an ugly pattern of dots that attempted to simulate this color, in a process called dithering.

To further confuse matters, Macs and PCs used a different set of 256 colors. Designers further had to narrow down their color choices to 216 colors that were supported on both the Mac and PC platforms. As you can imagine, this was quite restricting.

Thankfully, the number of users today with monitors set to only 216 colors is so small it is negligible. Feel free to ignore this Web Safe color palette and use any RGB color you want in your images and designs.

The GIF (.gif) file

The GIF file was actually the first image format available to early Web designers. GIF files compress images by finding adjacent pixels that have the same solid color, and replacing those with one piece of information, instead of separate information for each pixel. Due to this, GIF files work best for images that have large blocks of solid color, like logos, text, and line art. Because the GIF format generally doesn’t degrade the quality of these types of images, it is referred to as lossless compression.

GIF files can hold a maximum of 256 colors. Again, this makes it great for line art, but bad for photos and images that contain gradients. But it doesn’t always have to be the same 256 colors. GIF files can choose which 256 colors it wants based on what colors are in the image. Another advantage of GIFs is that they support transparency – certain pixels can be set to be transparent so the background can show through the image. The catch? Pixels in GIF files have to be either 100% opaque and filled with a solid color, or 100% transparent. They don’t work like a layer in a Photoshop file, for instance, that can be set to be %50 opaque.

Because of the nature of this transparency, edges of an image that we would like to be surrounded by transparency will appear jagged thanks to our square pixels. To compensate for this, we use a technique called anti-aliasing. Anti-aliasing blends the edges of pixels between the foreground and background colors, resulting in a smooth edge instead of a jagged one. But if our background is transparent, how does the GIF know which color to blend the edges of our image into? We tell it, using something called a matte color. The matte color is the color we expect our transparent image to appear in front of. Photoshop uses this matte color to blend the edges of our transparent image.

This is important to note. Once we’ve saved our transparent GIF file, if we later change the background color, we have to change the matte as well. For instance, if we save a transparent GIF with a white matte, but place it on a red background, we will see an undesired halo around our image.

Options When Saving GIF Files
When we are ready to save our images for the Web, we use the Save for Web feature (File > Save for Web) in Photoshop or our preferred design program. Inside the Save for Web dialog box, we are presented with a confusing array of options we can use for our GIF files. While some of these options are indeed helpful, many were much more important when file size was such an issue that every fraction of a kilobyte saved was vital. Today, we can safely disregard many of these.

When we choose GIF as our desired output format, we will see the following options:

The JPEG (.jpg) file

Developed a short time after the GIF image format, the JPEG format is the choice for full-color images, photos, and images that include blends and gradients. JPEGs compress their data not by finding blocks of the same color as GIFs do, but blocks that can be approximated with smooth gradients. This approximation can reduce the detail in full-color images by replacing sharper edges with smoother blends, and highly compressed JPEG images can appear blurry. As a result, we refer to the JPEG as a lossy compression format.

Unlike the GIF format, the JPEG supports millions of colors – just what we need for our gradients and full-color images. But also unlike the GIF, JPEG files do not support transparency.

Options When Saving JPEG Files
When we use the Save for Web feature, unlike the confusing myriad of primitive options we are confronted with for the GIF format, the JPEG format is much more straightforward. We do have the following options at our disposal, however:

The Future, Conan? The PNG File

The PNG format is a relative newcomer to the Web image world. PNG was created as a unified format to replace both JPEG and GIF. PNG files work well with both solid-color images and line art as well as full-color images and gradients. In addition, it does so using a lossless format, so even our full-color images are never degraded. PNG files don’t compress solid colors and line art quite as well as GIF files, nor do they compress full-colors and gradients quite as well as JPEGs. However, they still do an excellent job, and as more people use faster connections like broadband, this will become less of an issue.

However, the real power of the PNG lies in its transparency. Unlike GIF files, where a pixel must be either completely transparent or completely opaque, PNGs support 256 levels of transparency, meaning a pixel can be partially opaque, like 20%. This makes PNG files just as flexible as Photoshop layers, for instance, and completely eliminates the need for specifying a matte color, or worrying about what background color a transparent PNG will appear in front of.

So there has to be a catch, right? You got it. In this case, the catch is that transparency in PNGs are not supported in Internet Explorer through version 6 (which accounts for about 75% of today’s Internet users). Since transparency is by far the most valuable feature of PNGs, this is mainly what has been keeping designers and developers from using the PNG format regularly thus far.

Options For Saving PNG Files
The options for PNG files are very limited and straightforward:

PNG Resources

If you are planning to use PNG's you should ensure you do your research so that the PNG will view the same on all browsers. Here a few resources to assist you:

Now we know how to optimize and save individual images in Photoshop for use on the Web. But as we discussed earlier, our Web pages won’t be one solid image, but a series of smaller images that we’ll export separately and place into our rectangular table cells in HTML.

But how do we do this? Do we individually crop each part of our designed Web page into separate files? Do we cut and paste into dozens of new files? That’s pretty tedious, considering there may be dozens of images – and therefore dozens of image files. This is where Photoshop’s slice tool comes into play. Using the slice tool, we can divide our design into individual, rectangular sections that we want to be individual images (slices), then save these slices separately. Basically we can treat each slice almost like a separate image file, without having to make dozens of files.

In Photoshop, the slice tool is the third tool down on the right side of our tools palette. To use it, simply select it, then begin drawing rectangles – as many as you need for your design – above the areas of your design you want to make separate images.

A Note on Photoshop’s Slicing Feature

Photoshop, like many other graphics programs with Web capabilities, was designed to take this one step further. Using Photoshop, you can save each of these slices at once (including sections that you haven’t explicitly drawn slices over) and even generate an HTML file including a table with these slices already placed inside.

This is very convenient, and Photoshop means well, but do not be tempted to use this feature!. This generates bad HTML. Specifically, instead of creating a series of smaller, simpler, more workable tables that we’ll build by hand, it tries to create one big super table that holds our entire Web page. We’ve already learned tables are not the most reliable layout tool, and one way to ensure we’ll be confronted with this ugliness is to try to do too much with a single table. Specifically, making too many cells in too many rows and columns that don’t line up.

Photoshop avoids this by forcing its generate table rows and columns to a certain length and height. It does this by creating an extra 1-pixel wide column, and an extra 1-pixel tall row on the outside edge of the table. It then fills the individual cells in this extra row and column with tiny graphics called spacers (1- pixel by 1-pixel transparent gif files) that are stretched to the desired width and height.

This may work at first, but what if we want any flexibility in controlling layout? What if we want to make our Website stretchy (fill the width of the browser). What if our content gets larger? All of these things will break our über-table, and create nightmares for us down the road. The problem is Photoshop sets itself to do this by default. Therefore, the first time we use it, we may have to change some settings to make it do what we want to.

Optimizing and Saving our Individual Slices

Once all our slices are drawn, we are ready to export. Below the slice tool is the slice select tool (hold down the slice tool to access it). Using this tool, select the first slice we wish to export. Then proceed to the Save for Web dialog box (file > save for web). Select the options you wish to use (keeping in mind the above discussion on GIFs and JPEGs) and click “save” on the top right. It is here we need to begin telling Photoshop we don’t want its crummy HTML, and to do things the way we want. The options we need to set are listed below:

After we have finished modifying our settings, you will notice “Web Page Design” is now selected inside the settings drop down. In the future, we can retrieve these settings using this drop down in case someone comes along and changes them.

When all of the above is how we want it, we can click “OK” to save our image. We can save our other slices as images by selecting each slice (using the slice select tool), choosing Save for Web”, choosing our format and optimization settings, choosing “Save”, giving it an appropriate file name, and clicking “OK”. Follow these steps as many times as you need to save all your slices.

Using ImageReady to Export Slices

Photoshop comes bundled with an underused, but quite useful companion application for exporting Web images, called ImageReady. We can access ImageReady easily from Photoshop by clicking the bottom icon in the tools palette. Once in ImageReady, most of the major tools and features are familiar to us from Photoshop, with a few small exceptions geared specifically to creating and exporting Web slices.

The most notable difference is that we have the ability to create, name, and choose export settings directly from the main document window using ImageReady palettes, as opposed to dialog boxes. The slice palette allows us to name and change attributes for slices much like double-clicking a slice did in Photoshop. The optimize palette allows us to set our desired exported format and settings just like "Save for Web" feature did in Photoshop. Another nifty feature is the ability to preview how our optimization settings affect our outputted images by clicking the optimized, 2 up, and 4 up tabs at the top of the document window. Also nice is the ability to hide auto slices using the button in the options palette, and manage (rearrange and turn on and off) our slices using the web content palette like we would with Photoshop layers.

Experiment with both Photoshop and ImageReady to find the method that suits you best.