How do I optimize images for my website without losing quality?
I have tried smushing it, but doesnt give good results, only 3% – 4% reduction in size.
Any more tricks or tips?
You can also try PunyPNG, a similar service that sometimes yields better results. If you have Photoshop you can use the Save for Web... tool under the File menu and reduce quality and colors to shrink size (it will let you compare to the original and changing the quality % may not make a noticable difference in appearance, but still change the size)
You may want to try different formats as well. I like PNG for graphics such as buttons and icons and JPG to pictures/photos.
Another good example what you have to think about is here on MUO if you look at the main sprite
For example one could have grouped all the blue buttons into one sprite (creating an image with a pretty small color pallet of white and a few blueish-cyan tones) and for the menu buttons a grey scale image adding the red line via CSS.
It would have added two more http request but may have resulted in even lower file size. Optimizing images for the web and the entire website is kind of a science itself. It's a lot back and forth, doing and redoing things.
Mike (as usual) has some excellent input.
I'd like to also suggest program I've had pretty good results with, which I found via Make Use Of. It's called FastStone Image Resizer, and due to the resizing algorithms it employs, it does a really nice job of either resizing or simply optimizing images with little to no noticeable loss in quality.
There are some other cool features, such as batch processing, renaming, etc. If you'd like to check it out, here's a link to the homepage. The other products listed there are pretty good, too!
When trying to save file size on images there is always some quality loss involved and you always have to try different saving methods to get the best results.
One option is to save it in various formats (JPG, PNG, GIF) with different options (amount of colors, and whatever settings your software offers) and compare them.
Thats why professional programs like Photoshop offer sort of a preview with calculated file size when saving images for web. This allows you to find the best compromise between file size and quality.
I suggest to read up the difference between vector and raster graphics
And I also suggest to test out how the different options to save images work out.
Smashingmagazine has some perfect examples there. If you scroll down to the last portion of the article you get a great example how quality settings can effect file size in different manners.
Forgot to add that you may want to read up on the use of CSS Sprites which can help you save space and loading times too.