Adding and Editing Images

When you’re working with posts or pages, you have the option of adding more than just plain text. If you want to add any media — images, audio, video, PDF files — to your post, WordPress has an easy-to-use tool to help you do just that. This article will show you how to add an image to a post or page via the media uploader, do some simple image editing, as well as how to edit image properties once the image is already uploaded.

Note: If you are looking for some high quality photos for your website http://www.pexels.com/ features lots of great photos you can use freely, without attribution of any kind.

Tip: The larger the file size the longer it will take to load. Keeping your file sizes smaller speeds up your web page access times. Typically, large, high quality images should be kept between 60KB and 100KB. Smaller images should be closer to 30KB and lower. Learn about optimizing file size and using images effectively. Also view the Tech Tuesday archive Finding and Using Images (1 hr) or read the Finding and Using Images presentation file to learn more about images wisely including copyright information.  

Media Uploader – Add an Image

When editing a new post or page, click on the Add Media button. (This button replaces the old Upload/Insert button.)

Add Media Button

On the Insert Media screen that appears, you may select a file you may already uploaded to your Media Library, designate a URL from which to embed an image, drag and drop files into the browser window, or select files to upload from your computer:

 

Insert Media Screen

 

For example, to add a new image (one that isn’t already part of your WordPress Media Library), select the Upload Files option at the top of the Insert Media screen and then click the Select Files button. (Note that you can also simply drag & drop images onto the Insert Media window.)

Select Files button on Insert Media screen

Next, select the file you want to upload from your computer and click Open.

Sample image of penguins is selected and arrow is pointing to OPEN button

The image you selected will appear on the Insert Media screen along with other images you may have already uploaded to that post or page. Any image that you upload gets stored in your Media Library so you can use it again without having to upload a duplicate copy.

Penguins image appears in Insert Media screen

The newly uploaded image’s attachment details will appear in a column on the right side of the media uploader.  Note the checkmark in the image’s upper right corner which indicates the image is currently selected. If you have multiple images uploaded for a given post or page (as we do in the above example) you can modify the attachment details for each of them by simply selecting the image you want to work with.

The attachment details column for an uploaded image allows you to provide a caption (optional), alternative text (required for accessibility purposes), and a description (optional).

Attachment detail settings for uploaded images

Also note that you can click the Edit Image link to crop, rotate, or make other modifications to the image file that will get stored in the Media Library.

Edit LImage link on Insert Media screen

When you click the Edit Image link, a new browser window opens to display the Edit Media screen. There you can access the editing tools (crop, rotate, etc.), add or edit alternative text or a caption.

Image editing window

See how an image caption is displayed on the Lorem County demo site and the Ipsum County demo site.  

If you make any changes be sure to click the Save and Update buttons.

Then close the browser window to get back to your Insert Media screen.

If you edited the image (cropped, rotated, etc.), you will want to click the Refresh link on the Insert Media window.

Refresh link on Insert Media screen

You can also delete the image from the media library by clicking the Delete Permanently link.

At the bottom of the Attachment Details column you can also set the image alignment, link URL, and size.

  • Alignment:  From the pull-down menu select how you want the image aligned in relation to surrounding text.Pull-down menu for selecting image alignment
    Use left or right to have text flow around an image. Use Center if you want an image centered on its own line without text on either side.
  • Link URL:  From the pull-down menu select the kind of link, if any, you want associated with the image.Select the image's Link URL from the pull-down menu
    In most cases this should be set to None unless there is a reason to have the image link somewhere.  Use Custom URL if you want the image to link to another site or page and then you can specify the link URL.  Media File will link the image to its actual URL (or the URL of its full size in case you didn’t choose “full size” under the size option) and clicking on the image will open the image alone in your browser window. Attachment Page will link the image to an attachment page, where you will see a page similar to other posts in your site, but it will contain only the image and whatever text you may have typed in the image’s Description field (above).
  • Size:  From the pull-down menu select the size for this instance your image.  The available choices will depend on the size of the original uploaded file.

Pull-donw menu showing size options for uploaded image

 

When you are ready to insert the image into your post, scroll to the bottom of the Attachment Details column and click the Insert into post button.

Insert into post button at bottom of Attachment Details column

Editing an image in a post

To edit an image once it has been inserted into a post or page, open the edit post/page window for the post/page containing the image you want to edit.

Click once on on the image and you’ll see two small icons appear in the top left corner of the image.

Edit existing image

The Edit Image button allows you to edit the image properties. Clicking the right icon will only remove the image from your Page or Post, it will not delete the image from your Media Library which means you could use the image again if you needed to.

When you click the Edit Image button you will get a screen with two tabs. The first tab, Edit Image, gives you access to basic image properties (size, alignment, title, alt-text, caption, and Link URL).

Edit Image Tab

The second tab, Advanced, gives you access to more advanced image properties (border size, vertical and horizontal spacing, etc.). These are less commonly used than the more basic editing functions.

Advanced image editing screen

Once you have updated the image properties, Click the Update button to save your changes.