Working with some wordpress themes I've been modifying some of the image files and noticed that my edited versions are sometimes 3-4x larger than the original (saved using the same format). I don't want to degrade quality - what are some of the ways to make a file size smaller so it will load faster?
Right now, for example, I use Photoshop and set the image quality slider to '8' (out of 10).
Smashing Magazine did 2 great articles on PNG Optimization and JPG optimization.
They're quite in-depth, explaining in great detail some things you may not know about the formats and their implementations. For example, the JPEG article: "Keep in mind that when you set the Quality to under 50 in Photoshop, it runs an additional optimization algorithm called color down-sampling, which averages out the color in the neighboring eight-pixel blocks".
Both articles go into specific techniques you can use in Photoshop to prep your files for greater compression. Which is vastly more effective than techniques used after a file has been saved.
After you've saved these files, or on files you aren't lucky enough to have layered source files for to tweak in Photoshop, there's still more compression to wring out of these files.
I use a Mac app called ImageOptim. From their site:
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.
ImageOptim provides GUI for various optimisation tools: AdvPNG from AdvanceCOMP, OptiPNG, PngCrush, JpegOptim, jpegtran from libjpeg, Gifsicle and optionally PNGOUT.
It's excellent for publishing images on the web (easily shrinks images “Saved for Web” in Photoshop) and also useful for making Mac and iPhone applications smaller.
Piece of cake. Drag your images (or image folders) onto the window, it runs through all of these tools tweaking compression schemes and removing unnecessary meta-data and color profile information (which aren't widely supported anyway – you should be fixing color profiles before saving, not saving and embedding them).
All of the tools linked in that quote have Windows/Linux/Mac versions except PNGOUT, but thankfully somebody ported PNGOUT to OS X and linux because they're so thoughtful. If you choose to use ImageOptim, it will include all but PNGOUT in the .app, so grab the PNGOUT port, drop it in /usr/local/bin (or wherever) and tell ImageOptim where it's at.
It isn't uncommon for me, especially with PNG images, to see file sizes drop over 30% even after saving through Photoshop's "Save For Web & Devices".
Protip: After running the optimization, sort by the icon column on the left and select all the rows with the (X) icon – files that were not reduced any further. Remove them from the list, and rerun on all images that have the check-mark icon. I can almost promise you that you will have images that still lose file size. Repeat the sorting, selecting, removing, rerunning until you get all (X) icons and call it a day.
When saving photographs in Photoshop I recommend using File > Save for Web and Devices. It will allow you to play with compression levels and see the visual result in real time. On photographs you can usually save it lower than level 8 and still get great results.
For PNG images you can reduce the number of colors in the colormap and save as an indexed PNG. For instance, consider a logo that is 128x128 pixels (uncompressed). Imagine that there are only 16 colors that it actually uses.
You can see that without reducing the quality of the image (this only applies to certain kinds of images) you can reduce the size substantially.
For buttons and site icons, you can also consider aggregating them into one image and using CSS or JavaScript to control their display (sprites). This saves on the number of HTTP requests made for each image.
Try other formats.
Basically, try saving your image in different formats and then look at the file size.
If you are using JPEG, you should be able to adjust the image's quality up and down in a graphics editor like paint.net. 50% quality of image is usually good enough for the web and makes the image much smaller.
With PNG you can't do this but it is worth noting that sometimes PNG is much larger and sometimes much smaller than JPEG. PNG is much smaller for black-and-white images, for example, such as black and white line drawings.
The advice given these days is to use CSS sprites to speed up load times by reducing requests, but again you need to actually look at the image size you get. It's quite possible that the CSS sprite image will be much bigger than the component images, if, for example, you combine several black and white PNGs with a colour one.
You also want to ensure that you're stripping out all the EXIF data - almost all of this is irrelevant to the users on the web, do they really need to know that you used a Canon 5D to take the photo, and that you used an F-Stop of 2.8, exposed for 0.5seconds, with an ISO of 160, no exposure bias, and a 9mm focal length?
All of this metadata adds weight to your image, and in general should be stripped out.
As jessegavin points out, most image apps will show you a preview of the effects of the compression - use them, as a blanket setting of "8" is rarely going to give you the best possible trade off.
Finally, the Google Page Speed Firefox/Firebug plugin can give you a good idea of how much you could reduce the image sizes (including allowing you view and save the smaller versions).
Once you have done all of the other suggestions to ensure that your image is as small as possible while retaining your desired level of quality, you will also want to configure your web site so that it serves images with minimal HTTP headers and make sure that the headers you are serving allow the images to be stored appropriately by caching proxy servers and web browsers.
To reduce the size of requests, ensure that your web server is configured not to send useless headers like X-Powered-By. Also, ensure that you are serving things like images, CSS and other static components from a host which does not set cookies (e.g. static.example.com).
For images that are static, set their Expires header to a date in the far future. This ensures that the web browser and any caching proxies in the middle will hold onto the image as long as possible. The only downside to this is that if you want to show a different image you will need to use a different file name and link to that instead. Version numbering in the filename (e.g. myimage_1.png or /images/3/logo.png) can be an effective way of doing this. For less-static pages, set a realistic Expires header (access plus X hours), and ensure that you are setting either the Last-Modified header or the eTag header (not both) so that browsers that have previously downloaded the files can quickly test whether they have the current version by comparing headers instead of pulling down the entire image.
Although there are many resources available discussing these techniques, Yahoo has done a great job bringing many tips for improving the performance of content delivery together in one place.
