There are a few ways to add images to your post, depending on how you start. If you’re using the "Press This" bookmarklet, take a look at the tutorial for that as it gives you a really easy way to include images from other sites.
This tutorial covers two methods: embedding an image using a URL, and uploading your own images. To create a slideshow or gallery of more than one image, take a look at the separate tutorials.
Uploading an image from your computer
To start the process, create or edit the post you want the image to appear in. Then click the "add image" button (circled in red above).
Decide where the images are coming from
You have three choices. "From URL" will be described later in this tutorial. "Media Library" allows you to select any image you’ve previously uploaded. It’s so simple that once you’ve done this tutorial you’ll be able to figure it out yourself, so I won’t bother explaining it.
For the next few steps we want to stay on the default "From Computer" so go ahead and click on the "Select Files" button, highlighted in red above.
Select your file
You should now find yourself with a standard file selection dialogue. The one here is from the Mac OS.
Simply find the file you want to upload and select it, then click "Open".
If you’re on a Mac running a recent version of the operating system, take a look at the left hand bar where I’ve circled "Photos". Clicking on this will show you all your photos in your iPhoto library. I believe (though I’m not a Windows user) that there may be something similar on Windows 7 and Vista. Correct me if I’m wrong!
The photo upload page
The window now changes to reflect the image you’ve uploaded. As you can see it tells you the name of the image you’ve chosen, its file type, and its dimensions in pixels. I scaled my images to 600 pixels wide to keep them big enough to view onscreen but small enough that I wouldn’t quickly fill up my storage space. Your photo may be much bigger than this. I’ll explain the other parts of this window in the next step.
Adding text, caption and alignment.
You have lots of options here so let me explain them one by one.
Title is simply what it says – it’s the title of the image and by and large is purely for administrative purposes. If you hover the mouse over the image in some browsers, the title will appear.
Alternative text – this is a fuller description of the image. It’s main purpose is so that people with a visual handicap who are using a screen reader will know what the image is, so try to fill it with a description that makes sense. "Photo" isn’t enough. I’ve just added the title as it says it all, really.
Caption – this is optional. If you add text in here it will appear below the photo in your blog post so experiment to see if you want it or not.
Description – This is like a longer version of the caption and usually can be left blank but you can use this for information like who took it, where, when, with what camera etc. If the image isn’t yours you can add copyright information and credits in here. It won’t appear on your site but it will be embedded in the code so it will be indexed by search engines. If you’re creating a portfolio site this is a good way of making sure your work comes to the top of relevant searches, e.g. "British textile weaver working in Dundee, Scotland. The piece was created using… etc" In many cases some of this information will appear in your blog post anyway, so don’t bother. But if someone is looking for images and finds yours without visiting your blog, this is a way of attaching the information to the image, rather than attaching the image to the info.
Link URL – if you put a link in here, the image will be clickable and take you to another page. There are four options here. Imagine you want the user to be able to click on the image to go to another site or page (for example you post an image of your friend’s work and you want the image to act as a link to her site). Then you’d paste the URL in here. Or you might want it to link to a file to download a PDF or song or business card. Then click on "File URL". "Post URL" means link to a blog post on your site. "None" means exactly that – the image will not be clickable.
The default is for the image to link to itself. This is the most commonly used one but seems a bit odd. Why would you do that? Well, see the "Size" option below? Imagine you uploaded a large, high definition image that is, let’s say, 1000 pixels wide? That won’t fit in a standard browser window and will take ages to load. So you might want to post a smaller version in the blog post and let the user click on it to see the full size version. That’s what you can do here, and that’s why you’d link to the image itself in "Link URL". Simple. So in most cases, keep what WordPress puts in here automatically.
Alignment determines how the image relates to the text near it. I normally use "none" here so the image sits on its own but you can experiment to see how the others work (I’ve shown an example below).
Once you’ve made all the additions you need, click "Insert in to Post".
If you’re in a rush all you need to do is add a title, decide on the size and go ahead.
(The "Use as featured image" option is for WordPress themes that use an image as a link to a post. You can probably ignore this but if the theme you chose for your blog supports them, have a play).
Check everything's okay
Here we are back in the post and you can see the image has been inserted below the text where my cursor was, and there’s a caption underneath it. If you want to centre the image in the post, just select it and centre it as if it were text.
Changing your mind
Let’s say you want to change the size of the image or its alignment, just click on the image to select it…
Getting the "edit" icon
Hover your mouse over the image and two icons will appear. One will delete the image, the other (looks like a photo) will return you to the earlier screen where you can change the options.
Changing the alignment
This is what the image looks like with the text aligned to the right. This works best with narrow images – if they’re too wide you only get one or two words on the line so make sure you don’t sacrifice readability.
Wrapping up
As you can see it’s actually quite easy to upload images and embed them in your blog post or page. If you upload lots of images you might want to think about file size but for most of you that won’t be an issue. Try to stay consistent – if you add a caption to one image are you going to add captions to all of them? Will the caption be a short description of your image? What about a copyright message?
Don’t just post an image and have done. Describe the image, what it is, where it was taken or how it was made. People want the story, not just the picture.
If the image is someone else’s, give credit and make sure you’re allowed to post it. (See the separate tutorial for instructions on how to embed an image from another site)
Finally, if you want to upload more than one image to a post, for example of your work, consider a gallery or slideshow – described in separate tutorials.
