Save-for-web
Photoshop may dominate the image editing business, but it doesn’t stand alone. This week I looked at Acorn and Pixelmator, two lightweight image editors for the Mac.
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.