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

add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: reddit :: furl :: TailRank

27 thoughts on “Image editing and preparation tips part 1

  1. so the best image file for me to put on a word document for the purpose of allowing others to download the word page would be a GIF image file. Am I correct?

  2. Hello timethief,

    Thank you very much for this great article. I never understood why my pictures were losing quality until now. Sometimes such a simple knowledge can make a huge difference.

    All the best!

  3. P.S. Is my assumption of the png file correct or should that format be reserved only for graphics? We do want a very crisp image of the club head, etc.

  4. Very helpful – I have been trying to figure out how to save my screenshots of charts without the text getting blurry. Know I know it is because I am saving them as JPEGs. Hopefully switching to GIF will help. Thank you.

  5. Greetings. I would so appreciate insight on how to assure my full photo is inserted in my blog. I sometimes get a photo “chopped off” and don’t know how to avoid this unintentional cropping. I can only find info on resizing a photo, not assuring that a whole photo image is printed. Thank you!
    Barbara

    • Barbara,
      You have a wordpress.ORG install. The theme you use and in fact every theme has limited space in the blogging space and the best approach to preserving image quality and to avoid “breaking the layout” is to resize images to fit into that blogging space prior to uploading them.

      If you need help determining space and sizing in your theme then you go to the web designer who created the theme to find the information you need. If you can’t find the help you need there then you can post here > http://wordpress.org/support/forum/themes-and-templates

      See > http://en.support.wordpress.com/images/ and http://en.support.wordpress.com/images/image-settings/

      With Settings —> Media —> set maximum width, you can set standard sizes of pics in new posts for Thumbnail, Medium, Large.

      Full size images will appear when a reader clicks on an image when you choose “file url” when you upload then insert the image and choosing “post url” will make an attachment page.

  6. Pingback: Required Reading « Random Acts of Photography

  7. Roads,

    Thank you. I have IrfanView loaded on one of my PC laptops, but haven’t done anything with it yet. I prefer working on my Mac and I have Photoshop on it, which for most of the things a blogger would do is like trying to adjust your watch with a sledge hammer.

    I’ll have to take a closer look at IrfanView so that I’m more familiar with it.

  8. Very helpful, Richard. Just to add that I use IrfanView for all my image work. It does nearly everything important that you need, and it is entirely free to download at IrfanView.

    One good feature of IrfanView is that after each step in an experimental resize or colour enhancement, you can (and should) use the ‘undo’ option to go back to the original on your clipboard, before trying a different edit. If you work correctly, you can then limit the number of file resaves to a bare minimum of 1. As you show above, this is a critical step in retaining the optimum image quality.

    Another useful feature in IrfanView which I use very often is screen capture – in IrfanView it’s Options->Capture/Screenshot->F11.

Comments are closed.