You know how sometimes you find that you’ve been doing things the hard way for a long time, and then realize that if you’d only taken the time to think about it, there was a much easier way to do it? That’s how I was with managing the images in my sites. Since WP 2.7 there have been some expanded media options, but I just never took the time to think about how I might put them to good use until recently. I was sizing each image in Photoshop and I could never remember which site needed which size- basically wasting a lot of time on something that WordPress had already simplified for me.
If you’re new to WordPress, you might not be familiar with the media settings, so here’s a brief run through:
Under the Settings section at the bottom of your admin options at the left of the screen, click on Media and it will take you to this screen. 
You can see that there are 3 size settings to play with: Thumbnail, Medium and Large. When an image is uploaded to WordPress, it will automatically generate 3 image sizes for your use. You can still use the full size image you uploaded of course, but you can also choose to use the various sizes that are generated in different ways on your site. In my site, I use the thumbnail size in my second column on the home page, the medium size in the first column and the large size in blog posts.
Large size
If you do nothing else, you might at least want to set the max width on the Large size image setting. You can see I’ve got mine set to 448 pixels. This is because I know that the maximum size image my main content column will hold is 460 pixels, and my images are styled so that there is a 6 pixel border around them. The height is set very large, since this will be variable and I don’t necessarily want to limit it. This ensures that I will never try and put an image in a blog post that is too wide for the column. In some themes, depending on the browser, if you put in an image (or video) that is too wide for the column, it will break the theme and send your sidebars down to the bottom.
So, what if you don’t know the maximum width your theme can use? You can usually find the width of your main column in the CSS stylesheet using a add-on for Firefox called Firebug. Check out my overview on using Firebug for how to find the CSS styles for your theme. You could also install the MeasureIt add-on for Firefox and measure the column.
Medium size
Unless you’re using the medium size for a specific purpose, as on my site, the best width for this size might be about half of the large size. This will give you an image that you can align to the left or right and still have plenty of room for your text to wrap around it and look balanced. You could also use the medium size for a second thumbnail size depending on how you use images in your site.
Thumbnail size
This will be the size of the thumbnails in your image galleries, if you use that function. It is also most handy for setting the size of thumbnails that are regularly used in magazine-style themes (here’s a good post by Brian Gardner on this topic), or if you use thumbnails in your archive pages (see example here).
So, that little overview is probably basic for some, but WordPress has so many great features these days, it never hurts to go over some of the ways they can be put to good use!
Hi, I have a similar type system when I manage images in wordpress. All images are set to the main column width in the content column.
By doing this it also allows my posts to have consistency in their look, which is obviously quite important.
Michael’s workflow as described above works well, with one caveat: In my experience, you have to make sure that the aspect ratio of your image is consistent with the aspect ratio (the general shape) of your three sizes within WordPress, or else you end up cutting off part of your original image as WP tries to do its resize thing.
Larry,
WP doesn’t mess with the aspect ratio. The thumbnail is a resize with a crop, and the other settings are “max” width and height. Aspect ratio is not affected. Thanks for your comment.
Hi Randa,
All I can tell you is that it messed with mine. Took me awhile to figure out that that’s what was happening.
This is one of the nice features that Wordpress has quietly added in recent times. I remember when I had to dig around in php files to reset the dimensions for large, medium and thumbnail images when I designed my blog, and that’s only going back about 15 months ago.
I have also recently noticed that image management is way easier with new versions of Wordpress. I am so used to modifying them manually. Now you can just upload the image and tell Wordpress exactly how to display it.
I heard the Firebug is pretty good tool, but I haven’t given it a try yet. Maybe, I should download and test it out right away. Thanks for the great tips!
Firebug is an awsome tool, it makes designing so much easier.
This is one of the finest feature that Wordpress has incorporated. Resizing the image is a tedious work in any site. But this is great.
Thanks a lot.
Tremendously helpful. Thanks so much.
I’ve been using Wordpress for nearly a year and continuously would get aggravated everytime I would insert an image through the browser only to find it improperly cropped on my web page. Now, I know I can change the settings beforehand. This will save a lot of aggravation. Thanks.
Nice. It seems that I have to adjust these dimensions based on the space I have for posting on my blog, and then that would make it easier when I just select a preconfigured setup, say large at 420×360 pixels for example.
thanks for all (:
Thank you for this post. I couldnt stand the older versionss of wordpress and image posting
Yes having just done a major upgrade from a very old version of Wordpress, the new image capabilities are much better.
[...] The super-talented Randa Clay has a timely basic explanation of the new(ish) image handling functions in current versions of WP. Check out “How to Efficiently Manage Your Images in WordPress.” [...]