Common knowledge says that modifying a compressed image is a bad idea. Not always, though.
A somewhat bad habit I’ve fallen into over time is making an adjustment to a GIF file without modifying the Photoshop source. I open a GIF directly, edit the pixels in situ, and then overwrite the original. The GIF becomes my source, as the original PSD file that it was generated from falls further out of synch.
Of course, the classic wisdom of common web file formats is that if you’re going to edit an image, you have to re-create it from a master. Because web compression tends to be lossy, having the source PSD on hand is a must.
…but that’s not always the case. JPG files are lossy, sure, and you’d never want to use a JPG as your master if it can be helped. But theoretically GIF is a lossless format, once you get around the 256 colour limitation. Provided you save the file with the same colour index each time, you won’t lose any detail after each edit.
Take the following image for example. Let’s say you’ve started with an overly large corner for your rounded boxes.
There’s probably no need for such a large image, so by cropping to look like the top right ‘after’ result, you can save a few bytes. Or if you need just the edge pieces, a quick crop can pull out the top and left edges as separate images, as shown in the bottom two ‘after’ results.
Point being, you’ve already optimized the larger image — you could go back to the original PSD and re-save, or you could drop it into Photoshop and just crop the smaller images out. They’ll be (mostly) optimized, and you’ve saved about 3 steps in the middle between flattening your layer effects, cropping, optimizing and saving.
In fact, if all you’re doing is cropping, resizing or the occasional pixel-level tweak, you don’t even need to go through the whole File → Save For Web dialogue either. Open the GIF, modify the pixels without first converting to another colour space like RGB Mode, and then re-save using File → Save. If you haven’t changed colour modes, the color index is preserved, your compression tweaks are re-calculated automatically, and you don’t lose any detail because no new colour information has been added on top of the original GIF.
What if you’ve spent time applying a dither mask, or enabled lossy GIF compression, or a number of other variations that will affect the file size and quality of the original image? That’s where it becomes muddy — if the starting GIF isn’t of reasonable quality, you probably wouldn’t want to use it on your site anyway, but there may be times when a GIF shouldn’t be manipulated this way.
Assuming the starting image is workable though, the compression algorithm WILL pick up these effects on re-save and you won’t have to spend time applying them again. Compression is applied after all other effects like dither and lossiness have worked their magic, so a dithered GIF will always be compressed the same way. (Try it if you don’t believe me — dither a high-colour GIF, save, and then open and re-save without dither… if your colour settings match, the resulting files will be the same size.)
The big problem with working this way is source control; over time, the images for your site fall further and further out of synch with the master Photoshop files. I’m not actually convinced most designers could refer back to a contained set of source PSD files for all graphics anyway, especially later on in the course of a site’s life… but that’s another thought for another day.
: And all this applies to PNG too, of course.