One element of reducing the file size of a bitmapped item is to eliminate unused space surrounding the art. This tip is mentioned briefly elsewhere on the forum, but I thought I’d toss it in here, and with a bit more info. This is an old Photoshop trick.
JPGs contain data for every pixel, but not all pixels are treated the same. With a solid color, it encodes the color for the first pixel in that continuous color area, then specifies the repeats of that data. The more colors and the more complex, the larger the file.
PNGs are different, as every pixel (including transparent pixels) has equal data size. Removing the surrounding background in a PNG has greater impact than doing the same with a JPG. (See note below.)
To isolate the art from the background, do this:
Create your art on a transparent background. If you are going to output it as a JPG, create a layer beneath this for the background color. When your art is ready, get rid of unwanted layers, create a layers folder and drag in all the layers except for the background (if any). Duplicate the folder (giving yourself an easy way to back out if you mess up). Turn off the dupe, select the twin folder and hit cmd-e (or select merge down in the popup menu). This will merge the folder and its contents into a single layer.
Hit cmd-a to select all, then hold down the cmd key and hit the left arrow key. This will force Photoshop to isolate the actual pixel data from the rest of the canvas. Release the cmd key and, with the content still selected, hit the right arrow key to return the pixels to their original locations. Note that the “marching ants” selection perimeter will not provide an accurate read when faint shadows are involved.
With this still selected, go to the Image menu and select Crop. You have just gotten rid of the extra space. If you are happy with the result, delete the flattened layer and turn the backup folder back on. Save the file as Photoshop document (in case you ever need to edit it), then use File > Save For Web, and output it as desired – JPG or PNG 24 (for high-quality transparency).
If you seem to have too much empty space surrounding the art (as indicated by the distance from the “marching ants” selection area to the edges of the canvas), this is usually because of an extremely faint feathering of a shadow. To tighten it up further, toss the flattened layer, turn on the layers folder and go to the layer(s) with shadow(s), adjust the shadow (opacity, spread and blur) to tighten it up, then dupe the folder and isolate and crop as described above.
There are other ways to select and isolate the background (such as having a background with a fill, setting the magic wand to contiguous, zero tolerance, no antialiasing, and inverting the selection before cropping), but this is fastest.
This approach can be very important when you are splitting layers for a stacked bitmap animation. There are two directions you can go with this. To make things easy to align in Hype, isolate everything all together before cropping, then crop and output the separate layers. Smaller objects will be floating in a much larger area, but all layers will have the same XY coordinated and sizes. To conserve file size, split them into separate documents first, then isolate and crop the images. You would have to nudge them into alignment once they are in Hype, but the combined savings in file size would be worth it.
Note that shadows in Photoshop use transparency, whereas shadows in Hype use value. A burned-in shadow in an image will multiply against the background when placed in Hype, which looks better. If, however, the art is a rectangle and has no transparency, it is often better to save file size by outputting it as a JPG and using Hype to create the shadow.
Note: Jonathan has noted that PNGs that have been processed through image optimization are different. Here’s an example – I took an 300 x 95 image, about half the area being transparent. Here are the differences in file sizes on output:
Photoshop - save as TIF, no compression: 115K
Photoshop - save as TIF, LZW compression: 57K
Photoshop - save as PNG, no compression: 115K
Photoshop - save as PNG, with compression: 37K
Photoshop – save for web, PMG 24: 33K
Photoshop - export via TinyPNG: 9K
I tried the same file, but doubled the canvas size. The optimized version via TinyPNG also comes out at 9K, because one of its processes is to automatically trims the pixels outside of the rectangle defined by the boundary of active pixels. Other image optimization apps will do the same.
The moral is twofold: that optimization is a very big deal