Image editing and preparation tips part 1

By Richard

This post is the first of two on the subject of images and image editing. They are not intended to turn everyone into image editing experts, but I hope to be able to give you some useful information and tips on working with images that will help you maintain the highest quality by keeping a few simple things in mind.

Image File Types: There are three basic image file types that can be uploaded here at WordPress.com, JPG, GIF, and PNG.

JPG is a lossy compression format which supports 16 million colors and is designed to compress color and grayscale continuous-tone images by discarded information that the human eye cannot detect. If there is text in the image, JPG compression will typically make it look fuzzy due to text anti-aliasing. Some image editing programs will allow you to turn off anti-aliasing, but not all. Re-saving a JPG images will degrade quality. Best suited for photographs and complex graphics.

GIF is a lossless compression format which support only 256 colors and works better with text than JPG compression. Re-saving GIF images will not degrade quality. Best suited for very simple photographs (few colors) and graphics without gradients or blends.

PNG is a lossless compression format that improves on GIF performance, but is not supported by some older browsers. Like GIF, PNG compression handles text better than JPG. Typical files sizes for PNG files will run up to 25% smaller than a GIF. Re-saving PNG images will not degrade quality. As with GIF best suited for very simple photographs (few colors) and graphics without gradients or blends.

Editing JPG Images: Since JPG is a lossy compression technique, each time you re-save an image, the quality is going to decrease, even if you choose the highest quality setting. To give you an idea of what this means, take a look a the two images below. The one on the top is a crop out of the original RAW camera file (no compression) from a 10.2 mega pixel digital SLR that was saved at the highest JPG quality setting to preserve as much of the original detail and quality as possible. The photo below that is a fifth generation JPG re-save (image on top opened and saved at medium quality, the second file was opened and again saved as medium, that image was opened and saved as medium, and that image was opened and saved one more time – fifth generation).

As you can see, there was a considerable color shift by the time I got to the fifth generation JPG, and if you look at the center area, you can clearly see that there is a noticeable loss of detail. Also note that at the right side of the lower image, the white area has started to pick up a lot of noise (light blue areas).

When working with JPG’s, always make your edits are on a copy of the original, but not one done with the save as command in your image editing program (save as performs a JPG compression so you would be starting with a second generation file). Go to the directory where the file is and duplicate it or make a copy of it there and then do your editing on that copy, which will be identical to the original.

Editing GIF and PNG Images: Since GIF and PNG are lossless compression techniques, you do not have to worry about re-saving as there is virtually no loss in quality.

In part two I will take you through the preset WordPress images sizes and cropping, resizing with an image editing program.

Related Posts:
Image Editing and Preparation Part 2
More on inserting images full sized at wordpress.com
New image upload option: wordpress 2.5
Inserting images full-sized in new WordPress.com
Uploading and inserting image with the new wordpress.com

:: :: :: :: :: :: :: :: ::