Posted by Matt Thompson on July 23, 2010
Best practices for adding images
1. Consider aligning your images to the right by default.
You'll notice I do this on the Argo blog. That's because text floats left. So if an image ends near the bottom of a paragraph, text can get "widowed" away from the rest of its sentence. This also affects bulleted lists, which will wrap around left-floated images rather than coming straight down in a neat line.
None of this bothers me all that much. But all of it can be avoided easily by floating images to the right rather than the left by default.
2. Horizontal images work best on the home page.
To keep posts from getting too long on the home page, horizontal images (especially those around the 300x200-pixel size) are your best bet. Vertical images can be very powerful inside a longer post, however.
3. For now, if you need to delete an image, make sure to delete the whole module.
Click and drag to select all the components of the image – photo, caption, credit and line – then delete them. If you're having trouble selecting only what you'd like to delete, there's no harm in deleting each piece individually. Select the photo and delete that (or click on it and click the red "delete" button), then delete the caption, credit and line in turn. Just make sure all those pieces are gone.
Then, if you'd like to replace the image, go ahead and bring up the "Add an image" window again, find the image in "Media Gallery" and reinsert it. All the information should have been retained from your previous attempt to insert it.
4. Upload the photos, don't hotlink them.
WordPress allows you to add an image from a URL, bypassing the image upload altogether. (This is commonly called inline linking, or hotlinking.) Avoid the temptation to do this, even though it's quicker, even if it's your own images on Flickr. For one thing, it will keep your images from displaying correctly – captions and credits will appear full size, like body text, rather than gracefully styled. For another, it's bad etiquette to capitalize on another site's bandwidth, unless they invite you to. And there's always the danger that the site will yank the referenced image file, leaving a broken image box where your spiffy photo used to be.
Instead, take the extra few seconds to save the image to your computer and upload it to WordPress.
5. When you upload images from other sites, make sure the photo links back to the source.
In the WordPress Add an Image window, paste a link to the image's source (e.g. its Flickr photo page) in the "Link URL" field. (See image at right.) If the image is yours, or there's no page to link to, make sure to clear the Link URL field (hit "None").
6. "Edit Image" might just be the wonkiest part of WordPress.
Although it's nice not to have to open up a separate image editor to do a simple crop, many things are still very confusing about the WordPress Image Editor. Here's what you should know, after you click "Edit image":
Cropping images in the editor
To crop the image, start by framing your crop, clicking on the image and dragging to select the area you'd like to appear in the result. Pay attention to the numbers under "Selection" on the right; they'll tell you the width and height you're cropping to. To finish your crop, hit the button above the image that looks like the one at right. After you crop the image, the size options at the bottom of the "Add an image" screen mean nothing. Only the cropped image should display in your post. That means you should make sure to crop your image to the size you want (probably 300 or 620 pixels wide) to insert. Once you hit that crop button, you're on your own.
Also important: crops that you make in the WordPress Image Editor won't be reflected in the "Featured post" thumbnail. If you need a precise crop to appear as the thumbnail, crop the image outside WordPress (I recommend Pixenate as an easy, Web-based image editor), then set that crop as the featured image.
Scaling images in the editor
If you want to scale down an image, click scale image, then write the desired width or heigh into the appropriate boxes. This is relatively straightforward. One piece of this, however, is very, very not straightforward:
After you've scaled the image to the size you want in your post and you've returned to the main "Add an image" screen, make sure that "Full" is selected among the size options at the bottom before you hit "Insert into post." Pay no attention to the dimensions listed under "Full."
Lastly, don't use cropping and scaling together in the Image Editor. If you want to both crop *and* scale an image, use an image editor outside WordPress. Again, I recommend Pixenate.