Adding images in WordPress

How to add single images to posts and pages (not galleries)

1. Prepare the image and log into WordPress

Ensure that you know the filename and location of the image to be added in advance.

Your image should be a JPG, GIF or PNG type file. Any other format is likely to be inappropriate for web use and will need to be converted beforehand (usually with image editing software).

2. Position the cursor in the content

(First, edit the page or post where the image is required.)

Position the cursor carefully within the content, where the image is to be added.

We strongly recommend positioning the cursor at the very start of a paragraph or heading (or a blank paragraph). Avoid positioning the cursor in between the text itself or you may get strange results. You can align the image relative to this position later.

If necessary, read our separate supplementary guide on positioning images in WordPress to better understand how this works.

3. Add Media

Click the Add Media button (above the toolbars)

4. Upload Files

Select Upload Files if adding a new image or Media Library to select an image which you’ve uploaded before.

Click Select Files and locate the file on your computer to be uploaded. WordPress will now import your image to the Media Library.

As suggested, your new image can also be dragged and dropped into the box, instead of using the ‘Select Files’ option.

5. Adjust the options before inserting

When the image has been uploaded, ensure you consider and set the options presented (using the help notes below).

Then press the Insert into Page/Post button.

Add Media dialog box Options

• Title: A short text description of the image
• Caption: Not required unless your design supports the display of image captions
• Alt Text: Usually the same as the title
• Description: Usually not required
• Alignment: As required. None usually works better when the image is positioned on a blank line (paragraph). Left and Right work
•  best when the image is being positioned with text or headings. The available text will wrap around the image automatically. Center is often avoided. Read our separate supplementary guide on positioning images in WordPress to better understand how this works
• Link URL: Leave blank (None) or select Media File if the image is to be linked to the full-size version (this allows the user to enlarge the image). You can also link to any web address (URL) of your choice. This could be to another page in your website or an external web page.
• Size: Choose as required. If the sizes displayed are not appropriate for your design and layout, you may need to speak with your web designer. NB – If the image is too large for the containing element, this may cause the layout to break.

Changing the options after an image has already been inserted…

If you wish to edit the options for your image, click the image once and then click the ‘Edit’ button (pencil icon) which appears. Alignment options can also be changed quickly here. There’s also a button to delete an image (displaying a cross).

Another way to create image links

The Insert Link button on the Toolbar can also be used to create linked images (select the image first).

See also: Setting image links to open in a new tab

 Pre-processing your images for insertion

(preparing images in advance)

Images can (and arguably should) be prepared prior to insertion using software such as Adobe Photoshop Elements or similar. This gives you the added benefit of being able to adjust other qualities such as brightness, contrast, colors. And sometimes, cropping the image can be very useful.

All of these tasks should be carried out in advance, prior to inserting your image into your WordPress powered website (in your favorite image editing software).

Some fairly primitive image editing options are built into WordPress (e.g. for cropping, rotating and flipping images). To access these features look for the Edit Image button in the Add Media box (seen during the upload procedure).

If you want to edit an image previously uploaded, go to your Media Library, click the image you wish to Edit and then use the ‘Edit Image’ button underneath the image.

The Media Library

All the images uploaded to your website can be viewed and edited in the Media Library. Click Media in the left hand navigation menu of the dashboard to view them.

Imsanity! Compress your images to a sensible size

TIP: We recommend the use of image compression plug-ins such as Imsanity. This will automatically resize your image to a sensible size. This is especially important if inserting images which have come directly from a camera. This will save valuable disk space on your hosting server.