When we were kids, pictures were the chocolate of books. Who wants to eat a meal that doesn’t involve chocolate? Who wants to read a book that doesn’t have pictures? Boring! Now that we’re a little bit older, there are delicious meals without chocolate and great books without pictures, but you have to admit you still love both! As much as I’d like to go on talking about chocolate, it’s hard to relate that to WordPress. We sure can take a look at how to add images in WordPress to make your blog a lot more interesting, though! 🙂
Stick with us for a few minutes and we’ll look not just at how to add images in WordPress, but editing with the native features of the WordPress Media Library. When we’re done you’ll not just be adding images like a pro, but you’ll be making your website more accessible to folks with disabilities and have your posts and website ranking better in Google to boot. Read on!
How to Add Images in WordPress
So you have your content written: a post about your recent vacation or business trip, a page talking about your hometown, whatever it is you’re into blogging about. Now, how to get some pictures in there to spruce things up?
3 Ways to Add Images in WordPress
First, click the location in the post or page where you want the image to be located. Don’t worry about left/right alignment right now, we’ll take care of that in a sec. Just place your cursor in the place you want the image to be located in relation to the text. You now have three options:
1) With the cursor placed, just drag and drop the image from your computer to WordPress and the image will appear right there when we’re done with editing. The Media Library image editor will open for you automatically. Or…
2) With the cursor placed, click the “Add Media” button to open the Media Library image editor. Now just drag and drop the image directly into the image editor. Or…
3) With the cursor placed, click the “Add Media” button to open the Media Library image editor. Click the “Upload Files” tab in the upper left corner. From this tab, you may drag and drop your image into the Media Library, or alternatively you may click “Select Files” in the center of the tab’s window and browse your computer for the file.
If you change your mind on placement later, you can just left click and hold over the image in the post or page, drag your cursor to the desired location, and then release the left mouse button. The image will move to the new location where you placed your cursor!
It’s a breeze to add images in WordPress. Now let’s look at image details and how to edit images!
Editing Attachment Details and Display Settings of an Image
The Attachment Details and Attachment Display Settings of an image can be found by clicking on any image in the Media Library. They then display on the right hand sidebar of the Media Library. When you upload a new image, Attachment Details are displayed there for you by default. Let’s take a look at this Ninja Forms logo image and break down the individual details one by one.
URL: This is where the image itself is located. By default, that location is your wp-content/uploads folder which is located on your host’s server. You should not need to change this except for in very unusual circumstances.
Title: The image file’s name within the wp-content/uploads folder. This isn’t displayed anywhere your website’s visitors would see it.
Caption: You may enter text here and have that test displayed for your website’s visitors alongside the image.
Alt Text: This is a more important detail than most people realize! When an image can’t be displayed, the Alt Text is usually displayed in its place. It tells Google what the image is about, so it’s an important feature for SEO. Alt Text should therefore include the keyword(s) you intend your post or page to rank for in Google for good SEO. More importantly, individuals using a screen reader or other accessibility software to access your site rely on the Alt Text description to know what the image is. The text you have entered here may be all the insight these visitors have into what your image shows and what it’s about!
Description: A description of the image for your own benefit if needed.
Attachment Display Settings
Alignment: Set here whether you want your image to be aligned to the left, right, or center of the page.
Link to: Sets the destination the user is sent to when they click on the image if you wish them to be. Can also be used to magnify smaller images when a user click on them!
- None: No effect when user clicks the image.
- Media File: Magnifies the image on the page for the user when the image is clicked.
- Attachment Page: Each attachment has its own attachment page by default in WordPress. Selecting this option links your image to that page for the visitor.
- Custom URL: Sends the visitor to the URL you specify here when they click the image.
Size: Select a default standard size from the list. You can resize your image more precisely by dragging its edges in the post or page editor once you’ve inserted the image into the post or page, or in the image editing option which we’ll tackle next!
Editing and Your Image
You’ve told WordPress where you want your image, added detail for accessibility and SEO, now it’s time for finishing touches. WordPress’ image editing is more utilitarian than many realize, eliminating the need for third party software in many cases.
Right where you are under Attachment Details, next to the small pic of your image, see the blue “Edit Image” link.
Clicking that link opens this handy dandy window, loaded with image editing options:
In the upper left corner, you have orientation tools. There you can rotate your image in 90 degree increments, turn it upside down or flip it backwards.
In the right hand sidebar, you can scale your image down to the pixel and change its aspect ratio. You can also play with thumbnail settings, applying changes to both the image and its thumbnail, or just one or the other.
That’s it! Save your changes and insert that image into the post or page (blue button in the bottom right of the Media Library window)!
That’s a wrap of the basics of how to add images in WordPress and for vanilla WordPress image editing! From this you should be able to add images in multiple ways, optimize image details for SEO and accessibility, and do basic image editing right there in WordPress. Have fun with your new WordPress mojo, and if you have any questions or comments please share in the comments below! Happy blogging!