Nomadic Matt Working with images in WordPress isn't difficult, but I've found better ways to include them in blog posts than what's provided by the WordPress admin options alone. To your left is a picture of Matt from the "About Matt" page at Nomadic Matt's Travel Site. I'm using it as an example since I was messing with the image on my PC just a short time ago and because I think he's more photogenic than I am.


Image Uploads and Display

When you add an image through the image upload function of WordPress 2.5+, you have various options to change or choose on the form. It seems that every time I went through the process and tried to do the thumbnail routine, the thumbnails ended up with tops and bottoms cut off or other image errors.

The way I do it now is that I create a small image with FastStone Image Viewer, use the image upload function, paste it into a post, and then upload the large image without pasting (save only).

In my example, I used "nomadic-matt.jpg" as the small image name and "nomadic-matt2.jpg" as the large image name. The name of the large image isn't important because it doesn't get indexed by the search engines with the post. The "title" and "caption" (or alt attribute) for both images is "Nomadic Matt".

After I'm done, I change the target link in the pasted code to point to the large image. I also remove the class attribute from the code since I don't use it. If you click on the picture, you'll see the larger image appear. Because I use the Shutter Reloaded WordPress Plugin, another click on the picture or the red "X" at the bottom will close the large picture and you're back to a clean screen.

Image Positioning

I sharted If the images you upload are always the same, say 125×125, and you always put them on the left, you can add an image class to your style sheet. Something like this would work:

.image-left {
float:left;
padding:0 15px 0 0;
}

The problem is that not all images, unless you edit every single one yourself, will need the same properties. What if you want to put an image on the right? What if you're putting it between paragraphs? What if…

To make it simple, I use inline styles with my images. By doing so, I can change the float from left to right, use the appropriate padding, or use margin properties instead of padding when the situation arises. I place the inline style just before the alt attribute like this: style="float:left;padding:0 15px 10px 0;"

I haven't even used all the different variations that are possible and I imagine I could end up with 10 or more new classes (or IDs) on my style sheet if I wanted to do it that way.

Notes on Resizing Images

When I resize images, I try to make the thumbnail-type images as small as possible, whether they lead to a larger image or not. As a rule of thumb, and there are always exceptions, I try to keep the size of those images at just under 5K so that they load fast.

I try to optimize large page images based on their size. I try to keep 200-300 pixel-width images under 10K and 400 pixel-wide images under 20K. All of this resizing is an attempt to make images load as fast as possible.

Certain types of images resize better than others depending on the type of image. Pictures resize better as .jpg images whereas non-pictures seem to resize better as .gif images, but not always. I usually play with the various formats to see which one works best in each situation.

Your mileage may vary.

As with anything, the way you do all this may not be the way I do it. I'm merely offering how I do it as food for thought. Image manipulation can be a royal pain in the butt if you don't use the right tools for the job.

I have a question for the CSS gurus. Is there a better way, especially with WordPress, to do what I've been doing?