- Before proceeding, log into WordPress and open the appropriate page or post for editing. Also, ensure that you know the name and location of the image to be added. Your image should be a JPG, GIF or PNG type file.
For example, it could be a file called beach.jpg and could be located on your desktop or in your Pictures folder.
- Next, position the cursor carefully where the image is to be added. You are advised to position the cursor at the very start of a paragraph or heading (or blank line). It’s best to avoid positioning the cursor within text. You will be able to align the image relative to this position later.(This PDF training aid on inserting images may assist you also)
- Click the Add Media button (above the toolbars)
- Click Upload Files if adding a new image (or Media Library if adding an image already uploaded).
- Click Select Files and locate the file to be uploaded. WordPress will now import your image to it’s media library, ready to be used wherever needed.
- When the image has been uploaded, complete the options using the help notes further 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 works best when the image is being positioned with text or headings. The available text will wrap around the image automatically. Center is often avoided.
- 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).
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.
Pre-processing your images for insertion
(preparing 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, colours. 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 favourite 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.