Knowing how to add image to WordPress post is essential, and you will be adding them frequently. Having pictures in posts is helpful. People are visual by nature and pictures help delivering your message.
The importance of images you may understand also from a research done by MOZ. They checked 150 of their top posts with respect to the number of links which they attracted. The result of the search is presented in the graph shown here on the right.
You see that almost 2/3 of the top 150 posts had either videos or pictures. So by adding videos and images you considerably increase probability that your post get some backlinks. Having such links pointing to the post adds authority to your post and increases its ranking.
[ Bach – The Well Tempered Clavier – Book II- Prelude and Fugue No.12 in F Minor ]
In the present post I give details about things you need to know when you deal with images and photos and these include:
- where to find free images
- how to optimize them for search engines
- how to practically add them into posts and pages.
Where to find free images
In order to find free images, an obvious first choice is Google of course. So you may try the following way. Search for “Google images” (see picture below left) and this will lead to the window below right.
Now I can search for what I want. I may try with ‘thinker’, and this will give me a huge number of pictures relevant for this search. Now I want to check which of these are free, so I look for the symbol pointed out in the picture below. When I click on, it shows some options, see picture below right.
I click on ‘Advanced search’ and can choose some options, see below. Normally I like to choose “free to use or share, even commercially”. This narrows the amount of free images of course but you will be on a safe ground. But in spite of all this, when you choose one specific picture always check details again. Usually they are available if you check a bit.
In the case of my ‘thinker’ I found one picture which shows me the following text regarding licensing:
As you can see, it is in public domain, and it can be used for any purpose.
Another options for free images are:
Always check for any specific image you choose. Some of these sites have images which are not free. If you use them without permission you can get into serious troubles, they can contact your domain provider and your site can be shut.
Pixabay Images plugin
It finds you an image in a second while you are in the process of typing your post. When you install it, it will add a green button in the menu of your editor, and you may see it here in the picture. Clicking on it will open a window where you put a search word and it will immediately give you a selection of possibilities to choose.
This is a great tool. You can deactivate it when you do not need it.
How to Optimize images in WordPress
Before you add image to WordPress post, you need to optimize it. This is of particular importance for mobile users. Studies show that about 40 percents of people give up with sites that have more than 3 seconds load time. So, you should take care not to have your site in this group.
The first step is to reduce the size of the image. I normally keep the size below 200 kB and for this I use MS-Office Picture Manager. In my site about mountains I use a lot photos, and I also use plugin Huge IT lightbox to enlarge them on the screen, so I usually keep the width 1024 pixels. Keeping them larger is pointless, they become bigger than the screen of the notebook.
But if you do not use such a tool for viewing photos, in most cases you can reduce the picture to 640 width, or even below. This will be completely enough for a normal width of a post. This implies that the size of the picture in terms of kB can be much more reduced, in fact it can go far below 100 kB.
In other words, it is pointless having a picture of 1024 pixels or wider while in the same time your post width allows 600 or close to this number. The surplus will only slow down your site without any purpose.
After you have resized the picture, you should additionally compress it. There are some tools available online. You may try these:
With all this, you will have pictures which load faster, while for usual circumstances their quality regarding resolution is not visibly reduced at all.
How to add image to website – practical steps
1. When you are in edit mode in your post or page, below the title you see the button “Add media” (picture below). When you click on it, you will have possibility to go to Media Library (you use this if you have already uploaded an image there), or to Upload Files (shown below right).
2. You should have images or pictures prepared for upload. I already wrote about the size and compression, but the picture should have a proper name (title) as well. It should contain the keyword which you are using for the post. If you plan to add many pictures, they all can contain the keyword, but you should add some extension, otherwise you might be penalized by Google. For example, the two pictures above have the names: ‘How to add image to WordPress – add media’ and ‘How to add image to WordPress – upload files’.
3. When you add the image you will have to fill in some data about it, as you see in the picture below left: Caption, Alt Text, Description. Note, the Title will be there already, this is the name you gave to the picture in the step 2 above.
Alt Text is for search engine, so make sure that it contains the keyword. I use the same procedure as for the title. This is also for people who have problem with vision, and they have their computer read them aloud. It reads the alt tag and they know what the image is about.
So if you do not do it properly this will be what Google calls ‘a bad user experience’. Use your keyword for the alt tag at least for the first image for SEO but be descriptive with.
The caption is a text which will appear below the picture. In the present post I do not use it, but see my another site where every photo has a caption.
Description is an option which I do not use frequently. According to WordPress instructions this is an “optional description of the image that will display on the image’s attachment page (if you choose for the image to be linked to its attachment page).”
On the picture above-right you see some data about the picture. Regarding Size, you can choose several options: thumbnail, medium, large, full size. The real meaning of these terms (in pixel) is dependent on the theme you use, and such things are pre-defined elsewhere (but you can change them in the general settings for your theme).
You will also have an option for custom size, so you can choose any size that fits best into your text.
Alignment – determines where the picture will be positioned, left, center, right.
Link To – implies several possibilities:
- Media file – it opens the image in its own window and from its own location where you put it earlier in the media library.
- Attachment page – see about this a bit more below.
- Custom url – this you may use to make the image clickable, in other words to serve as a button, for example to lead your visitor to some affiliate site. Make sure that you click in the tab ‘Open link in a new window’ which is explained in the item 6 below; in this way you keep your own website window open and the visitor will not loose it when (s)he closes the linked site.
- None – this makes the picture non-clickable. This is the option I use for the images in front of you.
4. In Alt Text tab I put text containing key word plus extra text. It basically tells the keyword of the image to the search engines, so it is important not to miss it. Have a look into the YouTube video below, where Matt Cutts from Google describes the role of Alt Text tab.
5. Note that when you click on the image when you are in edit mode visual, it will open the menu which you see below, so you can make additional changes if you wish:
When you click on the pencil sign it will open the tab which you see below, so you can edit caption and make other changes:
6. In the picture above you see Advanced Options. When you scroll down you will see the following:
In the tab Image Title Attribute you will type any text which describes the picture, I usually just copy the content of Alternative Text. This is aimed at providing the information when somebody hover above your image, as you can see below. So it serves as a picture-pop-up :
Practical steps of adding images to the sidebar are described in my another post.
Attachment page: dealing with web page redirect
When you add picture to website, an image attachment page is created, and it can be indexed by search engines. The point is that they contain very little text, so for search engines they represent a low quality content, and your post will be badly ranked. There is also a possibility for an increased bounce rate, which additionally reduces ranking.
To deal with this, Yoast users should go to permalinks and activate ‘Redirect attachment url’s to parent post url’.
Those who do not use Yoast, like me, should install a plugin Attachment Pages Redirect.
In its description you will read that it “makes attachment pages redirects (301) to post parent if any. If not, redirects (302) to home page”. So install it and you will be safe.
Create gallery in WordPress
If you have a group of pictures and images you might want to add them as a gallery. This may be convenient because as a result you will have a group of pictures nicely and equally spaces. Some of examples above are included as galleries containing two images. All mentioned above regarding optimization and sources remains the same of course.
a) Go to Add media and when you choose the picture and have it uploaded to the library, you will click on Create gallery button in the left upper corner, you can see it in the picture here right.
b) When you add this picture to the gallery you can repeat the procedure with the next picture.
c) When all pictures are added you will press Insert gallery and you will have it added to the post.
When you click onto ‘pencil’ tab this will allow you to edit each of the pictures separately. You will follow the same rules used above for single pictures. Do not forget to update the gallery in the end.
Best place to put an image
It is usually advised to have an attractive image before a first fold-up. It will attract the visitor, and it will serve as an effective invitation to continue reading.
Screen shot tools
The other useful tool is ScreenHunter 6 (see below); it has a free option which has been good enough for me so far.
I hope this text is useful to you. As you realize there are a few important things to know in order to properly add image to WordPress post. Having pictures in a post is important. They may help in better ranking. You may read about this more in my recent post about page ranking.
Please leave comments below. I shall be happy to read them and to answer any question you might have.
Some extra reading about images:
Here are YouTube videos which you might like to see, the first is Matt Cutts from Google about Alt Tab: