How to reduce image file size more?

Question

I have to process a lot of pictures for a website. The smaller the better but the quality has to stay good. Now I know that image file sizes differ depending on the dimension, colors, meta data... But is there a way to process pictures for web and have them all at about the same size?

I use "Save for web" JPG and PNG/GIF depending on the image. Then I might run it through TinyJPG/PNG (since the quality will sometimes drop dramatically). But my results vary greatly from 100KB to 650KB (same dimensions, the image is also kinda similar in terms of color).

Is it all in the meta data? Can I somehow strip it off (should I strip it off)? I'm at a loss, since I also can't explain why some pictures get such small file sizes but others don't.

Should I change something in my process?

Any help will be appreciated!

Answer 1

Let me explain a bit the theory behind compression.

A losless compression

A non compressed bitmap image will look like this.

Pixel 1,1 is white
Pixel 2,1 is white
Pixel 3,1 is white
Pixel 4,1 is white
Pixel 5,1 is red
Pixel 6,1 is red

A compressed one will look like this

Pixel 1,1 to 4,1 are white
Pixel 5,1 to 6,1 are red

This means that the amount of compression depends on the content of the image, how many pixels of the same color are next to each other.

That image will compress at a diferent ratio than other

Pixel 1,1 is white
Pixel 1,1 is red
Pixel 3,1 is white
Pixel 4,1 is white
Pixel 5,1 is red
Pixel 6,1 is white

Lossy compression

The lossy compression makes something simmilar but takes a diferent aproach.

On a photo we can have simmilar colors, not identical. Then the algorithm says: "Oh this color looks simmilar to that one, let us think that it is the same. But that one it is too diferent, lets not consider that one"

That is defined by the level of compression, and that is why it looses information.

Your case

(same dimensions, the image is also kinda similar in terms of color)

It would probably be a matter of seeing your images in detail, but lets think one case.

You have a pure green circle on one file and you have the same size green circle but with a small pattern on it. This will totally be a diferent size, becouse in a bitmap there is no way of describing a "general pattern on the circle" it must be done pixel by pixel.

There is a chance you actually increased the file size by doing a 2 step process, for example, when you use a gif or PNG 8 bit compression you could add a pattern. This is becouse probably on your pallete you have a green that could look better using a small pattern of a lighter green. In thoose cases you should use non pattern or dither.

The conclusion

It is a matter of analizying what method and lvl of compression each image needs.

The program that the other users are recomending try some settings on the image and discard others.

Answer 2

If you're on a Mac take a look at Image Optim. If not then still take a look as they mention several other open source alternatives that do the same job.

• Make sure all your images are resized to the same dimension.
• Usually JPG is smaller than PNG but there are exceptions. Keep in mind every time you open and resave a JPG it will be recompressed so the quality will go down over time.
• In general the fewer unique colors you have tha smaller the image will be, so if you really need to shave off some extra bytes, look into exporting them from Photoshop with a limited palette.

Answer 3

For illustrations or other images with large areas of solid color:

Save for web > PNG24 > imagealpha > imageoptim

For photos:

Save for web > JPEG 50-60 > imageoptim

https://pngmini.com

https://imageoptim.com

Answer 4

I suggest you take a look at FileOptimizer. This is my go-to application for all things compression.

The UI isn't much to look at, but it works wonders! The difference with other programs is that it combines multiple algorithms into one program, ensuring smallest file size while not needing five different programs or command line utilities. Especially powerful for PNGs (with an option to do only lossless compression).

Just drag and drop the images into the queue. Take a look at the settings to tweak the optimisation process to your needs.

Old files are moved to the bin. So if there's ever an issue (which happens almost never), you can just restore your original from the recycle bin.