How To Add or Insert Images to Your WordPress Blog post Or Pages

Blog post with compelling images tends to resonate well with audience than does without image.

Why?

Simply because images help to covey unspoken words in a way million text would not. It also makes social sharing almost addictive when attractive image that correspond to the theme of the text content on which it is used is placed conspicuously.

Picture, photo, image is everything on social media. That’s why Facebook could spend so much to buy over Instagrams, WhatsApp and Pinterest is growing in an exponential rate.

You got to pin this and that. That’s the effect of visual content to the subconscious mind. Other social networking sites are following suit.

Let’s be honest, which post or status update do you find appealing? The one with photo or the one without? Well, let’s hang this here. The target of this post is not to justify the use of image on post, rather to teach us how to insert image on post and pages if the website is powered by WordPress. That’s why you’re here, I guessed.

Still want me to continue in the line why it’s important to use image on your website? Okay, I’ll compose a post on it soonest. I promise. Then, you’ll know that it is a major prerequisite for audience to read and share your post. So, let’s get down to the business of the day.

How to add image on WordPress blog

Adding images within your blog post or page is not the same as adding featured image. Featured image is set at the top just below or above the post title depending on the configuration of the theme and it’s set outside the post editor, while the images inserted within the post editor appear at the exact places they are imputed when viewed on the front-end whether previewed or published.

Another difference is that it doesn’t show on the category or archive page except the theme has been programmed to take-up the first image on blog post as the default image. Again, there is no limit to the number of images you can add to blog post while the number of featured image you can add is just one except you want to re-adjust your theme to take multiple featured images.

However, there are simple steps to take when you want to add images to your post. I’ll try to break them down into units for proper understanding. Because there is really more to it than I think you know except you’re a WordPress guru.

Steps to adding images within the post editor

The post editor is the place you go when you want to publish an article or create a page on your website. It has so many functions that aid typing almost like the MS word on your computer. You can install TinyMCE Advance plugin for broader experience.

Okay, let’s assume you’re typing your article and you want to insert an image to explain a process or confirm a point.

Step 1: Place your cursor at the exact place where you want to insert the picture.
Step 2: Move your mouse to the left top corner on the post editor. You’ll see ‘Add Media’ button. Click it and you’ll be taken to the media library through a popup box.
Step 3: You have several options as to where you want to get the image you want to use. Below are the available options.

– From the media library: These are the images you have uploaded previously from your computer device.
– Upload: If you want to upload new image from your device to media library.
– From URL: When you want to get an image from the internet without necessarily having to download it and then upload to media library.

Let’s discuss these options one after the other.

Adding image to blog post from the media library

Since the image has been uploaded, all we need to do is to click on the image after location it among the images on the gallery. The one you choose will be displayed automatically at the right side of the gallery with detailed information like;

Edit image link, Delete image link, Title, Alternative text, Caption, Description, Alignment (center, left, right), Image link (To image, Custom, None), Image size.

It is necessary to set all these parameters, but the ones that are compulsory are:
1. The title tag: It helps to identify the image.
2. The alt. text: It’s good for both SEO and people with visual disabilities to navigate the web.
3. Alignment: Helps to position the image properly.
4. Image link (optional): It gives opportunity to link image to any destination or remove link out-rightly. The choice is all yours.
5. Image size (optional): You can set the image size to what you feel will fit your purpose. You only have about four options here, but you can improve on it later even within the post editor.
6. Edit Image (optional): If you want to do more than the options available on image size, then you need to link this link to edit the image behavior.
7. Delete Image: If you want to remove the image from your website, click this link.
8. Caption & Description (optional): The caption will add text to the base of the image and it can also incorporate html while the description box is meant to describe the image, but it won’t show on the image when viewed.

The last thing you need to do is to click on ‘Insert into post’ button at the bottom of the page.

Adding image from computer through upload

If the image you want to use is on your computer, then you’ll have to click the ‘Upload File’ link. Click on ‘select file’ from the new page that emerges.

From the dialog box, locate the image you want to use from your computer. Click on it and then click save. WordPress will automatically upload it to media library. You’ll see the progress bar indication upload movement. If you don’t want to go through all these long process, you can drag & drop the image from your device to media library. WordPress has implemented drag & drop for image upload.

You’ll see the image on the media gallery when the upload is concluded. The media uploader has the capacity to upload multiple images. So, use it to your advantage to save time, but you are not expected to upload image that is more than 32MB each.

If you upload one image, that image would be highlighted automatically. There won’t be need to click on it to select. But, if you uploaded more than one images, you might have to de-select all the uploaded images and then select the one you want to use. You also have to fill the image information as explained earlier before inserting into your blog post.

Note: It is imperative to edit image on your computer before uploading to your website using image editors like Microsoft Media editor, CorelDraw, Photoshop, etc. You can also use online image editor like canva. The most basic is to reduce the size of the image. If it’s too large, it will affect the load time of the page.

For blog post, I’ll recommend 650 by 300 pixels for centered images and lesser width for both right and left align positions. As much as images are good on blog post, it must be used wisely otherwise, it may affect the load time of your site adversely. However, you can setup a cdn account on your website to solve this problem.

– Creating image gallery: It is possible to add image gallery to blog post to showcase maybe an event. To do this, click create gallery after you have uploaded the pictures. Select all the pictures you want to use. Click ‘Create a new gallery’ to continue. On the new page, you can set the number of images per column, add title to each of the pictures and re-arrange them through drag and drop effect. Click create gallery and you’ll see the picture gallery on post editor.

To create an experience around the gallery when clicked on the front-end of the website, I suggest you install lightbox plugin from dfactory.

Adding image from the internet through URL

On the left corner of the media gallery, you’ll see ‘From a URL’ link. Click it and a page will open where you can paste the URL of the image you copied from the internet. WordPress will pull it automatically and it will show just below the URL box.

You have the option to set the caption, title, position the image (center, left or right), determine the link whether to the image or any other place of your choice or make it unclickable. The most important parameter to set is the title. Click the ‘insert into post’ button at the bottom.

It is important to note that you don’t really have control over images uploaded to your site through URL from another site because they are not hosted on your website. If the image gets deleted on the original source, it will also disappear on your site.

To overcome this challenge, it is advisable to upload the image normally (i.e. download and upload) to a site you own or have control over and then upload it from there through URL. For example, on this site, I don’t upload infographics directly rather, I upload them through URL from their original source and then download and upload a backup to sites like flickr, photobucket and other photo sites.

These are the available methods of adding images to post or pages from the media library. Once you click Insert into post on media library, the image or picture gallery will appear on the exact location the cursor was placed before the upload and at the pre-set alignment.

If you wish to further edit the image, click once on it. You’ll see a pencil and ‘X’ icons at the top middle or top left of the image depending on the version of WordPress you’re using. Click on the pencil-like icon. On the new page that emerges, you can re-set the caption info, alt. text, re-size image and re-set the link.

If you want to do more than the usual, click on the Advance option. You’ll see where you can set the image link to ‘nofollow’. This is good idea if you want to add a link to the source of image (attribution), but want a discounted back-link equity base on SEO factors. When search engine spider crawl the link, it will not follow it. To do this, simply add nofollow in the box where you find ‘Link Rel’. Again, you have the option of using CSS to style the image.

Click on Update at the bottom right when you’re done. You’ll be taken to the post editor and the changes you made will reflect on the image.

If you want to delete or remove the image, simply click on the image and then click on the ‘X’ icon. The image will disappear immediately from the post editor, but would still be available on the media library.

However, you can also do some minor editing and adjustment on the image within the post editor too. For instance:

– Add link to image: To do this, click on the image and click on the link icon on the post editor menu at the top. A box will pop-up where you can paste the URL of the link. You can check the small box below it to open link in a new tab or leave it unchecked to open link in same tab when clicked.
– Resize image: Sometime, it can be difficult to set an image to the exact width and height you want. Even when you click on the image within the post editor and then drag a side to adjust the size, you’ll discover that the whole body will adjust according to the pre-set default.

To by-pass this effect, you’ll need to click the ‘Text’ mode beside the ‘Visual’ mode at the top right of the post editor. You need to be familiar with HTML code. Locate the html of the image and find the width and height pixel. Change these values to the size you want. And that’s all. Click the visual mode and you’ll see that the image has adjusted accordingly.

You may now preview your post and see how the image aligns with content. Remember, you can add as many images as possible on a blog post to illustrate a point just the way I did on this post.

Below is a video you can watch for more understanding

Conclusion: Image they say worth more than a thousand words. The importance of image cannot be over-emphasized. You need it for attention grabbing amongst other reasons. That’s why I took you through the nitty-gritty of how to add image to your blog post the proper way.