WP-Mix

Here is a quick tip for getting clearer images when reducing their size at web resolution 72dpi.

When designing with CSS, it’s often necessary to resize images from full-size 300dpi to web resolution 72dpi. Doing so usually leaves plenty of data for smaller, clear-looking web-rez images, but achieving crisp, clean images when reducing size at 72dpi can be difficult. For example, when resizing a circle graphic from, say, 300px x 300px (72dpi) down to 100px x 100px (72dpi), the circle’s edges tend to look mudged, uneven, or partly blurred, etc. It won’t do..

One possible solution, recommended by an associate, is to switch to a greater bit-depth before resizing the image. For example, if you’re working with an 8-bit image in Photoshop, you can go to “Image > Mode” and change the bit-depth to something higher, such as 32 bits/channel. Then when you resize the image, apparently, the program has more data to use in its calculations. Once the image is resized, changing the bit depth back to its original value will help decrease file size without changing the crisp appearance of the image.

So if you’re grappling with funky/fuzzy looking resized images, this is definitely worth a try. FWIW, you can see the results of applying this technique to the round icons just beneath the fold at WP-Tao.com :)