Adding Images to WordPress Pages and Posts

I have created a video tutorial to walk you through the process for adding images in WordPress:
VIEW VIDEO!

TUTORIAL SUMMARY

Adding images in WordPress is very simple. You can add them directly to pages and posts (and there are a couple of ways to do this), or you can first upload them to the Media Library and then insert them into a page or post.

Upload to Media Library

1. Hover over the MEDIA navigation link in the left sidebar and you’ll see 2 options: Media Library and Add New. Select Add New.
2. The multi-file uploader appears. Drag and drop your media files into the boxed area designated “Drop Files Here”.
   
3. Alternatively, click the SELECT FILES button to get to the single File Upload window that requires you to navigate to the image file on your desktop.
4. Another alternative is to click on the browser uploader link. Then click on the Browse button to navigate to the image file on your desktop.
   
5. Once the file is uploaded, there’s nothing left to do until you want to add it to a page or post. But, if you want to make changes, click the Edit link. In the Edit Media area, you can adjust the size and cropping, and/or fill in the fields for caption, alternative text, and description.

Add to Pages and Posts

The ADD MEDIA button that resides above the content editor area is the key to adding images.

1. Go to the page or post where you want to add an image.
2. Find the spot where you want to place the image and click there with your cursor. It will work best if you place the image at the beginning or the end of a paragraph, or between paragraphs.
3. Click the ADD MEDIA button. This brings you to the INSERT MEDIA window overlay.
   
4. If you’ve already uploaded an image, it will be in the Media Library, where all images are stored. Find the image you want and select it.
   NOTE: Use one of the nifty filters or the SEARCH bar at the top of the INSERT MEDIA window to help you find images in the library.
   
5. With the image selected, its details will appear in the right sidebar. Pause here for a moment and notice that this is where you can fill in the fields for caption, alternative text (for accessibility), and description. Look further down and you’ll see the ATTACHMENT DISPLAY SETTINGS. Adjust the settings for alignment, linking, and size as needed. I set the linking to None when I don’t want the user to go anywhere when he/she clicks on the image.
6. Click on the button INSERT INTO POST. The image will now be in the page or post. Remember to click the SAVE DRAFT or UPDATE button when finished.

Editing the Image

If you want to change the size or alignment, select the image. A small toolbox will appear above the image. Click the “x” to delete the image. You can easily change the alignment right inside that toolbox. Or, you can click on the pencil icon to go to the IMAGE DETAILS window overlay, where you can make the same alignment changes as well as size and linking modifications. You can even edit the original image size and cropping. Advanced Options provide an opportunity to apply title attributes and CSS classes.

Optimization

Before adding images, make sure the images are optimized! For tips on image optimization, check out my blog post How to Prepare Images for the Web.

More Related Posts

How to Resize an Image in WordPress
How to Resize an Image in Photoshop
How to Create and Edit WordPress Galleries
Best Alternatives to Photoshop
Image File Formats: print vs. web