In photoshop, hide the layers with the solid colors (text, vector art and logos, etc, anything that would optimize better as a GIF image) by clicking the eye next to the layer in the layers pallete. Save and optimize the jpg image, appending "bg" or similar tell to the name.
Next, re-show the solid layers. Mask off or delete the areas of the background jpg image that are not near the parts of the image to be exported as a GIF. This will make it less tedious to clear these colors from the GIF in the save for web dialog.
Next, choose "Save for Web" from the file menu, choose GIF in the presets, then use the eyedropper tool to select any color that is part of the background JPG. Use the shift key to select more than one color by dragging the eyedropper in an area with the shift key pressed. Click the white and grey checkerboard button underneath the color table to remove those colors from the image. If you make a mistake you can click it again to put the selected color in the color table back to visible. Once you have removed all of the background colors, save the file with the letters "fg" for foreground in the file name.
Code your image tag using the foreground image as the src="" image, and insert this style into the image tag : style="background-image:url ('images/myimgbg.jpg');" using the path of your background image. This will layer the transparent GIF on top of the JPG, creating one image with two different optimizations. If the image is saved, it will only save the transparent gif part of the image, but this may come in handy for situations like when you have to render a complicated logo on a background image, and don't want the company logo to disintegrate.
