Beast-Blog.com
Image Optimization, and Re-Optimization

The more I develop websites, the more I have been concerning myself with image optimization. Put it this way, I used to crank up my image export compression setting to 100% in all cases. Now, well now I don’t. This is what I do do in my attempts to now optimize my images:

• I test with different export formats where allowable. GIFF, I find, is not always the smallest or the best to use. I depends. If the image is one which might be okay as a GIFF, I will try it. Yet if it’s an image which would ordinarily be exported as a JPEG, I may test it as a GIFF to see how I fair. I have found that JPEG images are often smaller than than a GIFF of inferior quality. It’s ironic.
• I push things with my export settings trying as low as 60% and checking the results. Bear in mind all of this takes just minutes. Save as new size/format, look at it, adjust… rinse and repeat.
• I will sometimes lighten or darken by adjusting the background color and then adding transparency to the image. Doing it this way affects the image itself in only one way (transparency) so it loses little in the area of richness if the background color chosen was a good one — experiment. On the flip side, lightening or darkening reduces color-count which is effective for reducing file size.
• Reduce the size. Making the image physically smaller will in itself lend to file-size reduction. So instead of going with a 600px by 300px image, see what a 300px by 150px will do. If an image has to be large to show artistic attributes or fine details, try posting a thumbnail copy and linking it to the full-size original. Also keep in mind how large images may look in smaller resolution monitors. A 600px by 300px image for example would be awfully big in anything smaller than a 1024×768 resolution.
• If you have jumped on the W3C’s push-for PNG bandwagon, you might want to jump off for a bit. First of all the scare is off, GIFF isn’t going bye-bye and, second, PNG isn’t that well supported by all browsers and results can be mixed. And third, the PNG file size, being loss-less, can run high.
• If you do use PNG images, try re-optimization. Optimize the native image, then open the exported PNG and re-optimize it for further reduction (and it’s still loss-less). An example is below:

Here’s my example images for the re-optimization of pre-exported PNG files.

This is an optimized 148 color 148 x60 PNG file - 7969 bytes.

This is an optimized 64 color 148 x60 PNG file - 2528 bytes.

I got the second image from re-optimizing the first. I’m happy with its quality and for a whopping savings of around 70%, well, I’ll take it. If this were a GIF or JPEG it would be half the final size the first time around so I can’t really justify using PNGs, for now, but this may help those that do.

Filed under Imagery & Graphics —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

WordPress Titles & Descriptions for SEO »

SEO Optimization »

Not Quite Black and White »