Best Image Optimizer

Get Started
21

Chris77:
What is the best image optimizer you know of?

That is … you! :slight_smile:

Why?
To get the file size of an image down, there have to be made some decisions which an automatic optimizer can not make:

  • What is the character of the image? Is it a photo or a graphical representation? Mostly a photo can be saved as a jpg, and a graphic (logo, text in the image) is better to save as png.
  • What can be the compression of the image? For a jpg you can often choose a compression between 10% and 20% without loss of too much quality.
  • What is the goal of the image on the site? Is it only an image on screen, or has the image to be good enough for printing (then a higher resolution / bigger file size is needed)?
  • Can the amount of colors be brought down? Sometimes a 16M colors png is hardly to distinguish from a 256 colors variant, and sometimes even a 16 colors png can be surprisingly good. This can decrease the file size dramatically!
  • In this mix of decisions there is no common guideline: each single image has to be thrown on the balance.
  • For some experiments: see “[U]Image saving - which is the best format?[/U]” (Conclusion: “the general rule is: there is no general rule!”)

To give it a try
When I saw the original image of figure 16 you mentioned (www.ncbi.nlm.nih.gov/books/NBK98754/bin/cb1_utilizationf1.jpg, copy [URL=“http://clba.nl/sitepoint/images/cb1_utilizationf1.jpg”][U]over here[/U]), I was seized by a big curiosity what I could make of it with my old Paint Shop Pro 6.
Here we go!

  • The original is a jpg file (800x518px) of 63.6kB.
  • As a jpg the original image is not razor sharp, for instance in the borderlines:

    [CENTER]
    part of the borderlines, 4x enlarged[/CENTER]
  • The original has 8.452 colors! (Where are they? :wink: )
  • For this type image a png is far more better: 1:1 color representation, no jpg-artefacs, no color multiplication.
  • So I started to build the image from scratch, maintaining the original width and height, in 16M colors for the best quality and anti-aliassing of the curves.
  • Result 1, after combining the used PSP-layers in 1 layer: this [U]cb1_utilizationf1-16Mcolors.png[/U], saved with optimized palet.
  • Hmm, the file size of this png is now 55,6kB: only a profit of 8kB, no shouting hurray yet! :shifty:

  • Saved as jpg with a strong 50% compression: this [U]cb1_utilizationf1-16Mcolors-50pct.jpg[/U], still 35.6kB and firm bleeding colors:

    [CENTER]
    874×172 8.41 KB

    50% compressed jpg, 4x enlarged[/CENTER]
  • This is not the way, the png has a better quality!

  • Maybe a decrease of the amount of colors? The png has 828 colors used of the 16M saving method.
  • First back to 256 colors (with the “optimized octal” method): that is this one [U]cb1_utilizationf1-256colors.png[/U] of 23.4kB: sounds better already!
  • Is more possible? Therefore I went back to the PSP-file with te layers, and simplified the color variety. Then the layers combined (now 807 colors), and saved in a 16 colors png with the “optimized median” method, which appeared better then the octal method.
  • Result is this [U]cb1_utilizationf1–16color-first-try.png[/U]: 15.6kB and sufficient in quality, but the horizontal %-lines are not visible enough.
  • That was easy: open the new 16 color file, choose 1 of the existing darker colors, and use it for the horizontal %-lines.
  • Result: this [U]cb1_utilizationf1–16color-second-try.png[/U], with again 15.6kB.

So far what can be done by hand!
Now the time has come to see what the optimizers can do more.

I think this is the ultimate optimizing for this image without losing quality.

To compare the original 8.452 color jpg of 63.6kB with the resulting 16 color png of 11.2kB, I’ve mounted them side by side in this page: [U]image-optimizing.htm[/U]

Borderlines in the optimized png, 4x enlarged:

Text in the optimized png, 4x enlarged:

884×148 1.14 KB

The png is winning! :slight_smile:

22

Has anyone tried JPEG Mini? Heard a lot about them but have never used it. They claim to do lossless JPEG conversion and as per the site demos the claims seem true. Any one having experience with that tool?

23

I tried JPG Mini but it didn’t reduce it at all. I’m sure it works well for actual picures of things, but not charts.

Francy put a lot of work into it, and it is a little smaller than gimp2 version, but it just doesn’t look all that good with those squares around the dates.

24

Ok is there any way you could provide a link to the image as that would help users on the forum try to solve the issue because we could do some actual compressing and test what works and what does not.

25

You can just optimize your image using Alt and Title tage which is more effective than any other technique. But you need to give relevant alt and title for images that you are using. It helps a lot to search engine to crawl and index that image.

26

Chris77:
… but it just doesn’t look all that good with those squares around the dates.

Ah, that’s a matter of personal flavoring. :slight_smile:
Here is a fresh one without the borders (the % numbers are also some smaller):

27

Francky - ah, it’s still too ugly :-), the grey is to ameteur looking (it needs to be white).
While it’s the same size as the original, I had to shrink the original down to 464/300 for my need, and I noticed ther’s no need for “Years >” and “Percent >” so I’m going to cut them off or erase them if it doesn’t increase the size too much. The need for eye candy to draw attention is taxing, that’s for sure. Sorry. This is the hazards of rebuilding. Chris

28

Too ugly: no problem! :slight_smile: - It was meant as just an example how you can optimize a 16M colors image of about 55kB to a 16 colors png of about 11kB, and what types of decisions for the method you can use.

  • The extra colors I added served to show that even with more colors in the original a 16 color png can have almost the same quality as a 16M png (and have a better quality as a 16M jpg).

Of course you have your own basic image, you like other colors, other background colors, other borders, other fonts, etc. And maybe a 16 color png is not good enough in the end, and you have to go to a 256 color type (which has a bit larger file size).

So as conclusion I can come back to my starting point in message #21:

  • “The best image optimizer I know … is you!” :wink:
29

You’re right. I don’t know what I was thinking. 'Working on too many things at once. Sorry.

30

It’s OK. - From an other topic I learned that the online [U]tinypng.org[/U] can save also a lot of the file size of a png image.

  • I tried this tinypng, and it even can save another 12% of the former irfanview optimized image. - So you give it a try too! :slight_smile:
31

I think the answer is photoshop, I been working and using this in my design and optimizing photos with great results

32

I am using “Fileminimizer” software. I think this is best because many times it reduce 70&%-80% file size. You may also use tinypng dot com for online png image compress.

33

I use photoshop and the option to “save for web”, you can change a lot of things there, and it optimizes images quite well. Almost in all cases my image size is reduced by ~70%.
.

34

I’m Using generally Photoshop to image modify but you can use online image optimizer “imageoptimizer dot net”.

35

I would suggest you to use either Adobe Photoshop or Adobe Firework’s Export Wizard for image optimization. As I also use the same one for image optimization.

36

Hi,
Adobe Photoshop is the best tool for image optimization and editing.

37

… repeat … repeat … repeat … :confused2

But so far, the oneliners are going about automatic optimizers, and nobody did come with arguments against my [U]post nr. #21[/U]:

  • "The best image optimizer you know of? That is … you! :slight_smile:
  • - There have to be made some decisions which an automatic optimizer can not make (… etc.)"
38

Satisfaction. Someone had the image in a pdf file. I highlighted the image, copy, pasted it to paint shop pro, then saved it. This created a 32kb jpg file (Gimp2 software try was larger at 39.9). While trying to reduce the file with paint shop I noticed it has a number of colors reducer with a web safe colors option for gif files. So I looked for an image converter online (image.online-convert.com) to change it to a gif file. Then I put the .gif into PSP and reduced the colors to 16 and now the file is 9.79 kb and there’s no fuzziness. It looks great.

39

I did it over using PSP convert to gif. Seems to have made the chart lines a little bit sharper. Gimp2 doesn’t have any gif tools that I could find. (number of colors was reduced to 14 (Reducing the number of colors to 13 colors changed some of the colors of the graph.)

40

… PSP convert to gif. Seems to have made the chart lines a little bit sharper.

Yes, the .jpg saving is always giving some blur.

  • Note: the “[U]web safe colors[/U]” is the 216 cross-browser color palette from the history time that computers/monitors could only display 256 colors. Nowadays everything can give the 16M colors (except the monochrome monitors :wink: ), so I don’t care about “websafe colors”. The only thing to give attention is to set the colors in rgb (and not cmyk, which has an other color space, not used by browsers).