Images play an important role when connecting with your audience. In fact, graphics boost overall engagement and increase how often your posts are shared in social media. Making sure to add images into WordPress is a vital part of success, and here is how you do it.
Before we get started, you need to understand this tutorial is going to cover the default abilities of WordPress. This doesn’t include any plugins you might install later to host photo galleries.
I’ll go into detail about that in a later post.
Adding Images into WordPress Media Folder
One of the first things you need to know is that WordPress 4.9 and higher is automatically responsive. This means when you add larger images, the system will automatically shrink them down to fit on a mobile device.
This is important as smartphones and tablets outnumber desktop computers when it comes to the Internet.
By default, WordPress comes with its own Media folder. It is here where you will store most of the images or videos you’ll use later on. It’s a safe place to keep your graphics and makes it easier to reuse images in posts or pages at a later date.
Click the “Media” link in the left admin panel of WordPress.
If you’re new to the system, you may see an empty screen like mine. This is because WordPress doesn’t add anything to the media library after installing.
Let’s say we want to add a picture to the library that we’ll use in a post. Click the “Add New” button next to Media Library.
A new screen will appear. You can drag and drop your image directly into this area from your desktop. For this tutorial, I’m going to click “Select Files” and add the image.
WordPress will immediately pull the file from your computer and add it to the library.
Editing Your Uploaded Image
WordPress comes with a limited ability to edit your images. You can’t do anything fancy, such as add filters or make color adjustments. You can, however, flip, crop, scale and change the aspect ratio.
If you don’t know what you’re doing, it may be best to leave this part alone.
Otherwise, click the image you just uploaded.
This will open the file in a larger window for adjustments. Click the “Edit” button at the bottom.
From this area, you can make your adjustments to fit the website. For instance, hold down the mouse across the image itself if you want to crop out a certain portion of it. You can also click the rotation buttons on the top or use the image scaling features on the right.
Once you’ve made changes, click the “Save” button below the image.
When you’re done with the editor, click the “X” icon in the top right.
I don’t usually use the WordPress image editor, personally. I create all of my images in Photoshop before uploading them. This way, I control the perfect resolutions and sizes prior to using them on the website.
It’s just easier for me to do it this way.
Adding Images for Posts and Pages
When creating content, you’ll undoubtedly add images if you want to get the attention of the reader. In WordPress, there are two primary methods for doing this: uploading while creating content, and adding images from your Media folder.
Uploading Images in Content
First, let’s take a look at how to upload photos while you’re working on a post. If you don’t know how to create content, I suggest you take a look at my other posts on the matter.
Create a new post and enter a title.
Write your content as if you’re creating a regular blog post. Now, place your cursor where you want the image to go.
As you can see from my example, I use the “Text” editor of WordPress more often than the “Visual.” This is only because I like to write my own HTML when creating content. Don’t worry, though. This technique works regardless of what editor you’re using in the system.
Click the “Add Media” button above the editor.
Make sure the “Upload Files” tab is selected at the top. Sometimes, this will load by default depending on your recent actions.
From here, click the “Select Files” button in the middle. You can also drag and drop images into this screen directly from your computer if you choose.
Once you choose your image, WordPress will immediately add it to your Media Library. Click the “Insert into post” button on the bottom right.
What if you accidentally uploaded the same image twice?
WordPress will see the image has a duplicate filename. When this happens, the system will add a number at the end when it’s uploaded. This way, the integrity of the graphic is unchanged. It means you can upload more than one image with the same name without overwriting or corrupting the original.
The image is now added to your content.
Using an Image from the Media Library
What if you have an image in the Media Library you wish to use instead of uploading a new one? The process is similar except for one detail. Instead of the “Upload Files” tab, you want to be in the “Media Library” tab on the Insert Media screen.
Click the image you want to use in your content. Remember, this will be placed where ever your cursor is in the editor.
Click the “Insert into post” button on the bottom right.
Your image will be added to the post.
Good Optimization Practices
Now that you know how to add images into WordPress, what are some key elements to optimizing? After all, you want your site to perform well for both visitors and search engines, right?
For this, let’s look a little bit at the details of your graphics. I won’t go into too much detail as I am saving that for a future post. But here are some good practices to get into if you want to really get your site to shine.
The title of your image is what Google and WordPress see. It’s not as vital to search engine optimization, but it’s incredibly useful for keeping your library organized. Personally, I make this the same name as the image I upload, except I put in spaces to make it appear like a real phrase. For instance, instead of “TitleistGolfBall.jpg,” my title is “Titleist Golf Ball.”
Captions are useful if you want to add a bit of text under the image for greater clarity. I rarely use these unless I feel it’s necessary to further explain the graphic. Otherwise, it’s OK to leave it blank.
The Alt Text is an important part of SEO. Because search engines cannot determine what an image is, at least not yet, the Alt Text helps it understand what the image is in reference to. Again, I use the same text as the filename of my images. It helps me keep track and looks great for SEO. For example, the Alt Text of my image above would be, “Titleist Golf Ball.” This tells Google exactly what the image is.
The description further helps people and search engines determine the use of the image. I haven’t really seen much of a difference when using an in-depth description as opposed to repeating the alt text. So, I usually just copy-and-paste it. Feel free to experiment, though. I’d love to hear your results.
Obviously this is to tell the system how to align the graphic. By default, you have left, center, right and none. Depending on how you want the image to appear in the post, you can change this function. For instance, making it right or left will add the graphic within the text to give it a wrap-around effect.
Here’s another example: The images I use in this article are all set to “None.” This means they rest exactly where I put them in between sentences.
You can set images to open links to other files or websites if you wish. This drop down window includes media file, attachment page and custom URL. If I wanted the image of my golf ball to open up Titleist’s homepage, I would choose “Custom URL” and put in the web address of the site.
When you upload images, WordPress will create variations of it. You can do a full size, medium or a 150-by-150 pixel thumbnail. This is useful when you want specific sizes in your post or pages. Personally, I already size the images I use in Photoshop before uploading them.
Featured Versus Regular Post Images
One last thing we should go over when adding images into WordPress is understanding the difference of Featured images.
A featured image is the primary graphic your post or page will use. WordPress will take this and base thumbnails within your theme for sharing the content. If you connect or share posts on social media sites like Facebook or Twitter, the featured image is the graphic that will show on those sites as well.
This is why it’s important to select a featured element that will grab the attention of potential readers.
To add Featured images into WordPress, click the “Set featured image” link on the bottom right of your post or page.
The Featured image screen works much in the same way as the others except you can’t alter the sizes or add links. You still want to put in your title, alt text and description, though.
Going Further with Images
This is only the basics of adding images into WordPress. Later, I’ll cover setting up galleries, plugins and even importing photos from apps like Instagram. For now, get more out of your posts by including images in WordPress content. It’ll help make your site stand out among the herd on the Internet.