Image editing and preparation tips part 2

By Richard

In part one of this two part series, we discussed the different image file types you can upload here at WordPress.com and also why it is important to always work off of the original image. In part two we are going to discuss the preset WordPress image sizes as well as using image editors to crop and size images prior to uploading.

About the WordPress image sizes

Prior to the recent upgrade here at WordPress.com, you either had to size your images in an image editing program, or you had to resize them once they were inserted (unless choosing thumbnail) to prevent an image that was too wide from “breaking” your theme and forcing the sidebar to the bottom of the page. Judging by the number of posts in the WordPress.com forums about sidebars that had moved to the bottom of the blog due to images that were too wide for the post area, it was apparent that quite a number of bloggers are not aware that there is a maximum width for images inserted into a post.

The new WordPress dashboard gives you the choice of inserting three preset image sizes, thumbnail (128px wide +/-), medium (300px wide +/-) and full size. “Full size” as defined by WordPress is not really full size, but is actually the maximum comfortable width that can be inserted into your particular theme without causing issues, and will vary from theme to theme. And just as with the “full size” images, medium sized images width will vary from theme to theme (at least it did in my testing of a few different themes).

Resizing and Optimizing Images for Your Theme

When preparing images for your blog, it is best to have the images as close to the size you want them to be in the post or page before uploading them. This puts you, instead of WordPress, in control of the resizing and the resulting quality. And always keep in mind that many people out there are still on dial up which means that with large image file sizes it is going to take much longer for a page to load. Resizing and optimizing your images before uploading them will keep frustration levels lower for your viewers. Just as an example, my pocket digital creates 3072×2304 images at 180 DPI which is about 2.6MB. If I change it to 72 DPI and 800×600 and save it at medium, it goes down to 92KB.

Will the image in the post or page be linked to the original image so that viewers can click on it to see the full sized image? If yes, sizing the image to approximately 800 x 600 ahead of time is my recommendation. Why? Because when the view clicks on the image in your post, the image will open in the browser and a very high percentage of people out there are still using a monitor resolution of 1024×768 and you have to consider the actual usable area of a browser window (less tool bar and address bars at the top and side borders) so that your viewers will not have to scroll around to see the hidden parts of the image.

Below is the resize/resample window for irfanview (image menu > resizing/resampling), a free, popular and easy to use image editing program for Windows and is show an an example. Other programs will have similar options and you can search help in your particular program or consult the documentation that came with your program. For Mac users, iPhoto comes with your Mac and can be used to resize and optimize your images.

To resize and optimize an image with irfanview:

  1. Make sure “Preserve aspect ratio” is selected
  2. Set the desired DPI for the final image
  3. Change the width or height of the image depending on which is more critical (note that the other dimension changes automatically to preserve the image aspect ratio
  4. Click OK when done
  5. Go to the file menu and select “save as”
  6. In the window that comes up, select the type of file you wish to create in the “save as type” pulldown, and put in the file name and navigate to where you want to save it
  7. When you click save, another window may appear so that you can set other options such as image quality and color bit depth
  8. Click save when done and your new resized image is now done and ready to upload to WordPress

Other programs will be similar and it shouldn’t take you too long to get used to it. Do remember that each program should have a searchable help file, and some may even include a tutorial.

Related posts:
Image editing and preparation tips part 1

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

Image alignment in the new wordpress.com
Images: Optimizing, Pre-Sizing and Resizing (with list downloadable programs)
WordPress FAQ: How big can my images be?
WordPress FAQ: Optimizing your image

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

8 thoughts on “Image editing and preparation tips part 2

  1. Glad you’ve reopened the comments here. The link to the old support FAQ on maximum width for images now redirects to the new Support Doc on image *header* size. :p

  2. hi,

    maybe you can help me.
    When I’m uploading photos, let’s say it is 170kb and insert it as a full-size image, the photos get automaticly a compression. after the upload the picture is only 66kb big and looks ugly as hell ;) how can I change it? see a better quality here
    http://www.flickr.com/photos/sens1a/

    I tried it with full-size but it didn’t change anything

    thank you

  3. Pingback: Not the Official WordPress.com Gallery FAQ « Random Acts of Photography

  4. Pingback: Wordpress: Image Uploading Troubleshooting « one cool site: wordpress blogging tips

Comments are closed.