Working with Images in WordPress
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.
If I borrow images from a photography site, I want to make them look their very best. If you have a similar goal, examine how I do it on my blog.
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
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?
Similar Posts:
Ah at last a tips about using pics in WP. Thanks for it. Appreciate the code. I got a few WP blogs could use your tips to help me out.
The CSS trick to use floating images is a good idea. I use it all the time.
The way I manage images is to manually upload all of them to a particular subdirectory on my public_html directory and then reference them on my blog. I don't use the inbuilt "upload" feature of my blog, as it's a clunky way to manage files and insecure as well.
hari's last blog post… Linux games I want to try out
I think your are right with the padding tag. You keep the margin constant, so should fit for every size. I admit that I usually put the pics simply in an extra line, mainly because they become much more visible then.
But also I agree on the point of size. I use a special software "image optimizer" for this, where you can really precisely adjust size.
Anton's last blog post… Our ghostly Mumuye couple
There's a great plug-in for captioning and floating images: Image Caption Easy. Take a look.
Stevo's last blog post… i'm voting republican…¦
Meh, too many plugins. It's easier for me the way I do it. If I change themes, I don't have to fool with the style sheet as well.
I think i'll be adding this one. I have been having some issues with my images in wordpress. Thanks for the heads up.
thanks for this tip. my knowledge for wordpress has just increased by a bunch.
hi RT, This comment doesn't have much to do with working with images, or how images show up, or how WP displays them. Instead I thought I'd provide an update on Project Titanium Gopher Trousers, and toss another hook in the water for google. It's been about 3 weeks. It took a week for the first comment on Esentepe to get swallowed by the G whale, and about two weeks for the Yoga bait to get swallowed. Both posts now show up for the phrase unilateral show displays, but neither of the two linked pages are anywhere on google for unilateral show displays (well, at least not in the top 500). So it's like fishing for catfish (a unilateral catfish). I'm baiting a third hook and tossing it out there. I'll let it just sit on the bottom and see what happens. ~ Too Long Winded Steve
I've been following along. I think the links end up just giving the anchor text more authority to rise in the SERPS and not necessarily very quickly. I think the key in your experiment is to watch the various anchor texts and where they show up in the SERPS, in Google, Yahoo, Live, etc. That will help to see how effective certain tactics are.
[...] sorted out. This weekend. Much testing. In the meantime – check out Untwisted Vortex – and his post Working with Images in WordPress. ← Randa Clay's [...]
Oh Matt, you are sooo smart!
Thanks a bunch. I am going to start posting lots of pictures on my website of before and after shots of people that are losing weight with the new exercise pill!
I can REAllY use this information!
Penny
My latest blog post: News Still Breaking About this Wondrous Exercise Pill
Nice post. Depending on the version of WP that I'm using, I have really struggled with images on a couple of site. I've bookmarked this page and will give the steps a shot later tonight.
this one is cool.. i think i better add some of this stuff..
My latest blog post: Bernard Tomic | Australian Open 2009
"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;" . This helped me a lot, I used something similar, but it give me some errors on some browsers. I tested your inline styles, and now it's working good on some older versions of IE
Thanks for the informative article. I am not familiar with wordpress or other blog platform, and sometimes I encountered some programming problems. I bookmarked your blog for future references. Have a good day.