How to Add an Image to your WordPress website

Adding an image to one of your WordPress blog posts or web pages is easy. In most cases you can just use your Dashboard and follow your nose. But there are a few tips that you may find useful if you are going to be adding images a lot (and you should be!)

Location – sounds obvious, but you’ll need to know the location of the image on your computer hard disk. WordPress loads it from there and copies it to your website.

File size – you should also take a moment to check the filesize. Large files take longer for your visitors to load – if the file size is displayed in MB (Megabytes), you’ll definitely need to trim it down – 100Kb to 200Kb is a good target. If you have photo software with a camera, you can use that to shrink file sizes. Check out our instructions on preparing images before uploading and links to low cost/no cost Graphics Tools.

Adding an Image to a Page

Login to your website.

To edit your page, either:

• go to Dashboard, Manage, Pages (we’ll assume a page for this example, but it is the same for Posts); or
• view your website and click the Edit this page link at the bottom of the page (this will only show up when you are logged in).

Below the Page Title and on top of the text editor, there are some Upload/Insert buttons (just above the yellow Add an Image highlight in the image below.

The first button is Add an Image, and lets you upload images. The second – Add Video – lets you embed videos, the third – Add Audio – lets you add audio, and the fourth button – Add Media – is for uploading other files (such as PDFs, Word or Excel documents).

In this case we’re uploading an image, so click the first icon on the left (the add an image button).

Select images from your computer by clicking on “Select Files ” or images already on the web by entering the URL. If uploading an image from your computer, you can upload multiple images at once by holding the shift or ctrl key (on PCs) or the shift or cmd key (on Macs) while selecting the files. The image(s) will be copied from your computer to your website.

When the images have been uploaded you will be shown this:

This allows you to set some options before inserting the image into your page/post:

• Title – use a descriptive title that explains the image well enough so sight impaired visitors understand what the image is showing
• Caption – if you want your image to display with a caption, enter it here. It is a great idea to use these, as they look good and explain the image). A good Title is often a good Caption as well, so you can copy/paste between these two.
• Description – not used very often, only used in the body of an auto-post if you use the Post URL option below
• Link URL – do you want the image to link somewhere? Enter the URL of a website if you want the image to be a clickable image to the URL. Click the File URL if you want the image to be a clickable link to the full size image file you have uploaded.
• Alignment – Left or Right will float your image to the left or right.
• Size – for larger images, WordPress will automatically create three smaller images for you. Under Settings, Media you can control the default size of the Medium, Small and Thumbnail images that get created. Auto images are only created where they will be smaller than the original.

To place the image into your page, set the appropriate options and click the Insert into Post button. If you chose Right Align and are using the Visual Editor, this is how your image might look:

Now Save your page and view it to see the image.

HTML View

Note: if you use HTML view instead of the Visual view, you will see the HTML link to your image that has been created for you – that is how your image works in HTML. Don’t worry if you don’t understand it, you can switch between HTML and Visual any time.

More on the options for Size and Link URL

You can use the various Show and Link To options to control how the image appears on your page, and what it links to.

You can choose exactly what is displayed on your webpage:

• Thumbnail: shows a small (automatically created for you) version of your image
• Medium: shows a medium (automatically created for you) version of your image
• Full Size: shows the full size image

You can also choose what happens when a visitor clicks on the thumbnail/image shown. You make the image ‘clickable’ using these options:

• File URL: Displays the full size image file when the image is clicked.
• Post URL: Displays the full size image in a new page when clicked – this allows visitors to comment on the image.
• None: Doesn’t display anything when the image is clicked. So if you Show the full size image, the image isn’t clickable.

Alternatively, you can manually enter any URL in the Link URL field and the image will link to that.