Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|improve this question

9 Answers 9

up vote 12 down vote accepted

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.

share|improve this answer
    
+1 Wow! Those are awesome articles. I am very glad you posted those. –  jessegavin Jul 9 '10 at 18:14
    
Yeah, they're way more Photoshop-advanced than I am but I've shown them to my designers and they've always learned a thing or two. –  Bryson Jul 9 '10 at 18:18

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer
    
I'll second the EXIF data - if you don't need it dump it. I thought it would be small (it's just text, right?) But on some sites, I've seen a difference of 30KB where 50KB images (user uploaded - but resized keeping EXIF) reduced down to 20KB or less at the same quality setting - just by removing the EXIF data.. –  jeffreypriebe Sep 29 '11 at 17:47

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

share|improve this answer
    
lol, the URL have a funny word –  ajax333221 Jun 20 '12 at 5:04

http://www.sitereportcard.com/imagereducer.php

share|improve this answer
    
cool tool, thanks for the link –  Larry Smithmier Jul 8 '10 at 19:53

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. alt text

share|improve this answer
1  
Please could you reduce the size of that image? It takes several seconds to load. –  delete Jul 9 '10 at 1:20
1  
JPEG is normally a smaller file size for large multi color images. –  Thorn007 Jul 9 '10 at 5:06

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)
share|improve this answer
    
in combination with "Save for web" this is often a great solution –  Jason Jul 8 '10 at 20:24
2  
PNG-8 is most often much smaller than the corresponding GIF. –  neo Jul 9 '10 at 7:17
1  
GIF is almost obsolete apart from animation, and even that is being superseded by APNG. –  DisgruntledGoat Jul 12 '10 at 21:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.