: What can I do to reduce the file size of my images? 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

@YK1175434

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.


PNG-32, four bytes per pixel - 65 KB
PNG-8, one byte per pixel - 16 kB
PNG-4, four bits per pixel - 8 KB


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.


A List Apart: CSS Sprites: Image Slicing’s Kiss of Death
A List Apart: CSS Sprites2 - It’s JavaScript Time
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Vote Up Vote Down

@RJPawlick198

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.

Vote Up Vote Down

@Gloria169

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).

Vote Up Vote Down

@BetL925

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.

Vote Up Vote Down

@Carla537

You might want to check out Yahoo's Smush.it. I've found it to work very well.

Vote Up Vote Down

@Steve110

www.sitereportcard.com/imagereducer.php

Vote Up Vote Down

@Welton855

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.

Vote Up Vote Down

@Angela700

Try other formats.


JPEG for photographs
PNG for photographs with alpha and/or shaddow
GIF for images with a small color palette (black/white or a yellow icon or something)

Vote Up Vote Down