Read the full article I wrote at Webdesigner Depot.

Above: Turning block-shaped photos into text means cutting into the image. The more cuts made, the greater a chance for cutting out something important.

This posts asks the question: Which app saves the best images for websites? I tested two images with Acorn 2.3.1, Photoshop CS3 (v10.0.1) and Pixelmator 1.5.1 to find out.

JPG file size

Image dimensions: 500×220 pixels.

Image dimensions: 800×533 pixels.

These charts show how small each app compressed two images. Acorn created the largest files at 100% and the most erratic results overall, but did well for in the teens, a size I commonly aim for on the web.

Photoshop’s files tended to be the most predictable. Its files were most efficient when highly compressed.

For both files, Pixelmator produced the smallest file sizes between 40% and 100%. But its file sizes doubled—or more—between 90% and 100%.

JPG quality

File size is only part of the equation. How do the final images look? Samples from 0% compression show how each app’s artifacts—the changes it makes to improve file size—vary from each other.

The results are subjective, but Photoshop seems to sacrifice the most detail, especially in the shingles and stone walls. However, at 0% compression Photoshop’s file is about 25% smaller than Pixelmator’s and 36% smaller than Acorn’s.

Based more on gradients than organic textures, the difference in quality for the second image was harder to spot. Pixelmator’s artifacts seem to match Photoshop’s more than Acorn’s, though it’s only apparent when the samples are overlaid onto each other.

PNG

Saving PNG files is a different story. Acorn can only save 24-bit PNGs, which result in enormous (if flawless) images. Pixelmator can save both 8- and 24-bit PNGs, but lacked the precision found in Photoshop. Photoshop enables users to choose the number of colors in a PNG, the type and amount of dithering, and the ability to manually change individual colors in the palette. Pixelmator, however, only has a slider for choosing the number of colors.

Pixelmator’s PNG resembled Photoshop’s PNG, sans-dithering. Pixelmator’s image was slightly larger than Photoshop’s non-dithered file, but significantly smaller than either of Photoshop’s dithered files. Pixelmator’s PNGs are better suited for images with relatively few colors—graphics and icons over illustrations.

Photoshop, no dither: 12,805KB

Photoshop, 88% dither (default): 15,554KB

Pixelmator: 13,812KB

Photoshop, 100% dither: 17,386KB

Overall results

Even before Adobe bought their competition, Photoshop was the favorite choice for image editing. Its 20+ years of development keep it ahead of the newcomers like Pixelmator and Acorn. Still, I’m looking forward to seeing how these low-cost, high-performance apps develop.