Drop shadows add impact to web graphics, but they also impact file size. You can minimize the resulting file size of palette-based images such as GIFs and PNGs by reducing the complexity of drop shadows. This article shows how to create optimized drop-shadows in Photoshop to minimize the size of web graphics.
Creating Drop Shadows in Photoshop
Adobe made creating drop shadows in the newer versions of Photoshop easy. Create a layer, and then select Layer -> Layer Style -> Drop Shadow (see Figure 1).
Figure 1: Selecting the Drop Shadow menu in Photoshop
Layer Styles
Photoshop brings up the layer style dialog (see Figure 2). The defaults are shown in Figure 2, including Multiply for Blend Mode, Opacity (the opacity of the shadow, higher is darker), Distance (the offset in pixels away from the layer at the angle specified) of 5 pixels, Spread of 0% (how far the drop shadow spreads under the layer), and Size of 5 pixels (the width of the shadow in pixels, higher gives a more diffuse shadow). We’ll show how to tweak these defaults next to find more efficient settings.
Figure 2: Layer Style Dialog in Photoshop
Settings that Effect Drop Shadow File Size
Using the defaults above and reducing the opacity to 52% gives a subtle drop shadow to our text layer (see Figure 3). The problem with lower opacity drop shadows is that they create additional shades of color (gray in this case). These additional shades make quantizing the image into lower bit depths more difficult, forcing higher bit depths to avoid banding. They also increase file size by using additional shades of gray (Figure 3 is 4.12K at 32 colors).
Figure 3: Subtle Drop Shadow with Serif Font (4.12K, 4228 bytes)
Increase Opacity
By increasing the opacity (towards 100%) to darken your drop shadows you reduce the resulting shades of gray and thus file size. Increasing opacity to 82% reduces the file to 4.08K (or 4187 bytes, see Figure 4), and reducing opacity to 100% reduces the file further to 4.05K or (4188 bytes, see Figure 5). Note that the darker the drop shadow the less distance you need to offset the shadow. We’ll reduce this offset next.
 |
 |
| Figure 4: Opacity 82% – 4.08K | Figure 5: Opacity 100% – 4.05K |
|---|
Reduce Drop Shadow Distance and Size
Larger offsets and shadow widths cause more pixel patterns for the LZW and LZ77 compression algorithms used in the GIF and PNG image formats to contend with. The result of this increased complexity is larger file sizes. Reducing the offset and size of your drop shadows (from 5/5 to 3/3) reduces the resulting fize size (see Figure 6).
Figure 6: Reduce Drop Shadow Distance and Size to 3/3 pixels (3.6K or 3688 bytes)
Remove Anti-Aliasing or use Sharp
You can, of course, remove the anti-aliasing from text to minimize the number of color shades used to render text, but this isn’t practical for most fonts. A smoother alternative is to use Sharp anti-aliasing. Our tests showed that using Sharp created the smallest files (see Figure 7).
Figure 7: Selecting Sharp for Anti-Aliasing Text
This setting yields the smallest file yet (see Figure 8).
Figure 8: Sharp for Anti-Aliased Text (3.38K or 3463 bytes)
Use Sans-Serif Fonts
Continuing to reduce complexity, switching from a serif to sans-serif font simplies the text and drop shadow even further. Switching to Arial (48 point, same as before) with the same settings as above (3/3 offset/size) yields an image of 3.26K or 3345 bytes (see Figure 9).
Figure 9: Switch to Arial (sans-serif font) (3.26K or 3345 bytes)
Use a Solid Drop Shadow
You can simplify your shadows even further by creating solid drop shadows with no gradations. Create a duplicate layer of your text, change the text to black, and move it below the lighter layer. Using the same offset and size above of 3 pixels yields an image of 2.66K or 2724 bytes (see Figure 10).
Figure 10: Switch to Solid Drop Shadow(2.66K or 2724 bytes)
Reduce Offset
With a solid drop shadow the shadow looks a bit heavy, so let’s reduce the offset even more. Reducing the offset and size to 2 reduces the size even further (see Figure 11).
Figure 11: Reducing Offset to 2 and Size to 2 (2.52K or 2584 bytes)
You can see that each of these tweaks simplifies the image, either reducing the number of necessary colors or swaths of different colors.
Summary
In summary, use the following techniques to simplify your drop shadows.
- Use Layer Styles to create and tweak drop shadows
- Increase opacity (darker is better)
- Reduce Drop Shadow Distance and Size
- Remove Anti-Aliasing or use Sharp Anti-Aliasing
- Use Sans-Serif Fonts
- Use a Solid Drop Shadow
What about CSS Drop Shadows
This tutorial showed how to create drop shadows that create smaller web graphics. Many of these techniques can be applied to non-text layers.
You can also use CSS to create drop shadows for text, we’ll visit that technique in a future tweak.