8

I have a very large background image (about 940x940 pixels) and I'm wondering if anyone has tips for compressing a file this large further than Photoshop can handle? The best compression without serious loss of quality from Photoshop is PNG 8 (250 KB); does anyone know of a way to compress an image down further than this (maybe compress a PNG after it's been saved)?

I don't normally deal with optimizing images this large, so I was hoping someone would have some pointers.

One Crayon
  • 18,759
  • 9
  • 30
  • 38

16 Answers16

14

It will first depend on what kind of image you are trying to compress. The two basic categories are:

  • Picture
  • Illustration

For pictures (such as photographs), a lossy compression format like JPEG will be best, as it will remove details that aren't easily noticed by human visual perception. This will allow very high compression rates for the quality. The downside is that excessive compression will result in very noticeable compression artifacts.

For illustrations that contain large areas of the same color, using a lossless compression format like PNG or GIF will be the best approach. Although not technically correct, you can think of PNG and GIF will compress repetitions the same color very well, similar to run-length encoding (RLE).

Now, as you've mentioned PNG specifically, I'll go into that discussion from my experience of using PNGs.

First, compressing a PNG further is not a viable option, as it's not possible to compress data that has already been compressed. This is true with any data compression; removing the entropy from the source data (basically, repeating patterns which can be represented in more compact ways) leads to the decrease in the amount of space needed to store the information. PNG already employs methods to efficiently compress images in a lossless fashion.

That said, there is at least one possible way to drop the size of a PNG further: by reducing the number of colors stored in the image. By using "indexed colors" (basically embedding a custom palette in the image itself), you may be able to reduce the size of the file. However, if the image has many colors to begin with (such as having color gradients or a photographic image) then you may not be able to reduce the number of colors used in a image without perceptible loss of quality.

Basically it will come down to some trial-and-error to see if the changes to the image will cause any change in image quailty and file size.


The comment by Paul Fisher reminded me that I also probably wouldn't recommend using GIF either. Paul points out that PNG compresses static line art better than GIF for nearly every situation.

I'd also point out that GIF only supports 8-bit images, so if an image has more than 256 colors, you'll have to reduce the colors used.

Also, Kent Fredric's comment about reducing the color depth has, in some situtations, caused a increase in file size. Although this is speculation, it may be possible that dithering is causing the image to become less compressible (as dithering introduces pixels with different color to simulate a certain other color, kind of like mixing pigment of different color paint to end up with another color) by introducing more entropy into the image.

coobird
  • 151,986
  • 34
  • 204
  • 225
  • I would advise against using GIF for static line-art–type images, since PNG compresses better than it nearly every situation. Other than that, great answer. – Paul Fisher Nov 26 '08 at 01:17
  • I discovered that in some exceptional cases, images using colourmaps can be *larger* than those using full 24 bit. Why exactly this is I am unsure. – Kent Fredric Nov 26 '08 at 01:21
  • @Kent Fredric: Just speculation, but perhaps the color depth was reduced to the point that the image was dithered was used? I would guess that dithering will cause it to be more difficult to compress an image. – coobird Nov 26 '08 at 01:24
  • @Paul Fisher: Thank you for the information about PNG better at compressing line art than PNG. I haven't used GIF in a while to actually compare the difference. – coobird Nov 26 '08 at 01:25
  • Thanks for the great answer! Unfortunately, this actually wasn't particularly relevant to my scenario (quite aware of the basics), but hopefully anyone who needs to compress images in general will take a look. – One Crayon Nov 26 '08 at 01:27
  • I've noticed that GIF is usually smallest for very simple images (small, and with less than 20 or 30 colors); PNG 8 usually wins out for larger or slightly more complex images (with less than 256 colors). – One Crayon Nov 26 '08 at 01:35
7

Have a look at http://www.irfanview.com/, is an oldy but a goody.

Have found this is able to do multipass png compression pretty well, and does batch processing way faster than PS.

There is also PNGOUT available here http://advsys.net/ken/utils.htm, which is apparently very good.

seanb
  • 6,809
  • 2
  • 28
  • 33
5

Heres a point the other posters may not have noticed that I found out experimentally:

On some installations, the default behaviour is to save a full copy of the images colour profile along with the image.

That is, the device calibration map, usually SRGB or something similar, that tells using agents how to best map the colour to real world-colours instead of device independant ones.

This image profile is however quite large, and can make some of the files you would expect to be very small to be very large, for instance, a 1px by 1px image consuming a massive 25kb. Even a pure BMP format ( uncompressed ) can represent 1 pixel in less.

This profile is generally not needed for the web, so, when saving your photoshop images, make sure to export them without this profile, and you'll notice a marked size improvement.

You can strip this data using another tool such as gimp, but it can be a little time consuming if there are many files.

Kent Fredric
  • 54,014
  • 14
  • 101
  • 148
  • Just as an addendum; embedding a color profile will often mess up your color in Safari, too. I think Photoshop by default sticks in sRGB by default, but I turn that off whenever I export an image for web. Very good point to bring up. – One Crayon Nov 26 '08 at 01:31
3

pngcrush can further compress PNG files without any data loss, it applies different combinations of the encoding and compression options to see which one works best.

Sparr
  • 7,297
  • 27
  • 46
2

If the image is photographic in nature, JPEG will compress it far better than PNG8 for the same loss in quality.

Sparr
  • 7,297
  • 27
  • 46
2

Smush.It claims to go "beyond the limitations of Photoshop". And it's free and web-based.

bradheintz
  • 2,942
  • 17
  • 24
1

http://www.jpegmini.com is a new service that creates standard jpgs with an impressively small filesize. I've had good success with it.

Meekohi
  • 9,280
  • 5
  • 49
  • 55
1

For best quality single images, I highly recommend RIOT. You can see the original image, aside from the changed one.

The tool is free and really worth trying out.

ra00l
  • 540
  • 4
  • 20
1

It depends a lot on the type of image. If it has a lot of solid colors and patterns, then PNG or GIF are probably your best bet. But if it's a photo-realistic image then JPG will be better - and you can crank down the quality of JPG to the point where you get the compression / quality tradeoff you're looking for (Photoshop is very good at showing you a preview of the final image as you adjust the quality).

Marc Novakowski
  • 42,180
  • 11
  • 55
  • 62
1

The "compress a PNG after it's been saved" part looks like a deep misunderstanding to me. You cannot magically compress beyond a certain point without information loss.

First point to consider is whether the resolution has to be this big. Reducing the resolution by 10% in both directions reduces the file size by 19%.

Next, try several different compression algorithms with different grades of compression versus information/quality loss. If the image is sketchy, you might get away with quite rigorous JPEG compression.

Svante
  • 46,788
  • 11
  • 77
  • 118
  • PNG is based around the deflate family, which doesn't prescribe one particular encoding algorithm. An encoder can tweak its parameters for speed/performance. A typical PNG encoder like zlib -9 is decent but you can certainly get better by sacrificing compress speed, and that's what pngout does. – bobince Nov 26 '08 at 03:01
1

I would tile it, Unless you are absolutely sure that you audience has bandwidth.

next is jpeg2k.

david valentine
  • 4,165
  • 2
  • 19
  • 15
  • Tiling is impossible in this instance; is JPEG2000 supported across browsers? I've never tested it myself, and I can't find an option for JPEG2000 in Photoshop CS4 to test it now. – One Crayon Nov 26 '08 at 01:33
1

To get more out of a JPEG file you can use the 'Modified Quality Setting' of the "Save as Web" dialog.

  1. Create a mask/selection that contains white where you want to keep the most detail, eq around Text. You can use Quick-Mask to draw the mask with a brush. It helps to Feather the selection, this results in a nice white to black transition in the next step.
  2. save this mask/selection as a channel and give the channel a name
  3. Use File->Save as Web
  4. Select JPEG as file format
  5. Next to the Quality box there is a small button with a circle on it. Click that. Select the saved channel in step 2 and play with the quality setting for the white and black part of the channel content.
marioddd
  • 41
  • 2
0

Caesium is the best tool i have ever seen.

Habil
  • 561
  • 1
  • 10
  • 16
0

PNG images are already compressed internally, in a manner that doesn't benefit from more compression much (and may actually expand if you try to compress it).

You can:

  • Reduce the resolution from 940x940 to something smaller like 470x470.
  • Reduce the color depth
  • Compress using a lossy compression tool like JPEG

edit: Of course 250KB is large for a web background. You might also want to rethink the graphic design that requires this.

Bill Karwin
  • 462,430
  • 80
  • 609
  • 762
0

JPEG2000 gives compression ratios on photographic quality images that are significantly higher than JPEG (or PNG). Also, JPEG2000 has both "lossy" and "lossless" compression options that can be tuned quite nicely to your individual needs.

Paul Sonier
  • 36,435
  • 3
  • 72
  • 113
0

I've always had great luck with jpeg. Make sure to configure photoshop to not automatically save thumbnails in jpegs. In my experience I get the greatest bang/buck ratio by using 3 pass progressive compression, though baseline optimized works pretty well. Choose very low quality levels (e.g. 2 or 3) and experiment until you've found a good trade off.

Wedge
  • 18,614
  • 7
  • 44
  • 69