How to Add Image to WordPress post

Share

Image showing MOZ research on posts with videos and imagesKnowing 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.

Image showing where to check if image is freeImage showing the feature for advanced search

 

 

 

 

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.

Image showing types of usage for Google images

 

 

 

 

 

In the case of my ‘thinker’ I found one picture which shows me the following text regarding licensing:

Image showing example of licence with no conditions

 

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

Pixabay widget tab in my editorPixabay has a huge library of images, mainly free even for commercial use. It may be very convenient to use the 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).”

Image showing tabs for image attributes.Image showing file size numbers

 

 

 

 

 

 

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:

Image explaining pencil sign in image attributes.

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:

Image showing the complete menu open for images.

6. In the picture above you see Advanced Options. When you scroll down you will see the following:

Image showing advanced options in image settings.

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 :

Image demonstrating the effect of hovering.

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.

Practical steps:

Image showing tabs for gallery.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.

Image showing gallery features.d) When you click onto the gallery it will show you something similar to  what you see in the picture on the right. This is one of the galleries I used in the item 1 above.

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

Details about Snipping Tool.There are some useful tools for screen shots which you will surely need. I regularly use Snipping Tool which comes in Accessories in MS Windows.

The other useful tool is ScreenHunter 6 (see below); it has a free option which has been good enough for me so far.

Image showing screen hunter tabs.


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.

If you want to learn about online business please read my another posts, one about Wealthy Affiliate, and yet another post on how I started building my sites.

You can join me at WA through this link here.


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:

 


Share

48 comments

  1. Hi Jovo, I learned a lot from reading this post. I use Pixabay a lot myself but didn’t know there was an own plugin for WordPress. I didn’t actually know that it is possible to filter out images on Google with free licence either.

    And your resource list over all the sites with free images is really nice.

    Thanks for a thorough and well-written post with lots of useful information. I learned a lot today.

    Andreas

    1. Hi Andreas, great to hear from you. The plugin for WordPress is really convenient and I use it every day. I am happy to hear that my text was useful to you. Many thanks

  2. Hello Jovo.
    Got here through your article on Website Image Optimization.
    I very much enjoyed reading this while listening to Bach’s The Well Tempered Clavier,BookII -Prelude and Fugue No.12 in F Minor.

  3. You have a great deal of good data here! I think of it as’ a colossal help for newbie why ought to be giving the figure a shot how to handle pictures in their posts authentically.

  4. Thanks a lot for this wealth of helpful sources and tools to find and edit images!

    And you really give a great detailed guidline on how to prepare images to add them in WordPress, I think it’s of big help for newbies who are trying to figure out how to handle pictures in their posts properly. Just like you say, making good use of images can help your ranking!

    1. Hi, I am afraid I cannot say much, I have never touched Mac. But I assume once you are in the editor, the procedure on adding image to WordPress post should be the same, it should not matter what kind of operating system or computer you have.

  5. Hi Jovo. Thanks so much for the link through WA. Today I managed to spend a bit of time looking through your site and picked up quite a few tips on inserting pics. I cannot wait to get into it and will do so later today or tonight. Well done. A great service to the WA community. Regards Ken

  6. Hi Jovo,

    Thank you for this amazing post. It’s more informative than anything and it will save me quite some time. You see, I’ve been struggling with finding non-copyrighted images for my blog for quite a while now. So lucky i bumped to your site 🙂

    I will bookmark your site for future reference. Keep up the awesome work!

    1. Hi George it is a great pleasure to read your comment. I am happy that my text helped. Let me know if you have any problem related to the issue of images in posts, I shall be happy to help. Best luck.

  7. Hello Jovo, thank you for this very useful article. I will bookmark it. The information is easy to understand for someone that does not have any clue about posting pictures and images in his/her website. I have a question, how can I post either a picture or image in my website and surround it by the text. The theme of my website is TwentyTwelve.
    Congratulations,

    1. Hi Martha, many thanks for the comment. As for the text around the picture here is what you can do. The width of the page is usually narrow so putting text on both side of a picture would not make sense, it would simply look bad. But you can easily put text on one side of the picture. See this reply, if I put cursor on the beginning of it, in front of the first letter in ‘Hi Martha’ and then go to ‘add picture’ I can choose to put picture on the RIGHT, and then the text will be on the left side and picture on the right, you can see examples in my posts. You can put picture on the LEFT of course, but it is usually advised not to, because of interrupted text structure, just visual effect.

  8. Very nice page. Direct and concise, good use of words and graphics. I also liked the option to watch the videos to get additional information. I learned a few tips and tricks on this page and that makes me happy. I like to make good use of my time and I am sure your other visitors will appreciate it as well.
    I really do not have any criticisms. I believe the page accomplishes the purpose without any wasted space. Good Job!

    1. Thank you Mark, I am grateful for your time and for commenting on my page. I have passed through all this when I started building my sites, so the described steps are what I myself used in practice. Glad to see that you find it useful.

  9. You have a lot of good information here! The list of photo sites are very helpful. I use pixabay all the time because its free and open to the public domain,so you don’t have to worry. Thanks for sharing how to set up a gallery. I haven’t done that yet. I like the plugin attachment pages redirect as well. Thanks!

  10. Thanks Jovo

    I really enjoyed this post and learned so much!! thanks for the tips on where to find images and especially thank you for the section on image optimization( I will be getting straight on my posts and updating them all tomorrow)

    Genuinely made up with this post

    Thanks Tim

    1. Hi Tim, great to read your comment. I am happy that you find my text useful. Dealing with images is of great importance. Using them legally from the Internet is a must to avoid troubles. There are also important issues about their role in SEO, one must know how to use them in the best way.

  11. This is by far the most intelligent web site I have seen on WA. Just my thinking is actually just MY thinking. It has stuff projected at me based on what I have been searching for. I am not sure if this is intentional, but your thinking is my thinking lol. Very good! I have bee looking for an altimeter casio watch and also been researching coffee pots. They are all on your first page. How do you do that? Please drop me an email….!

  12. Hi Jovo,

    Thank you for explaining how to add pictures to websites so well, and where to get additional free ones.
    We learned a couple of new things, Thank you.

    As you will have seen in our website, we have quite a lot of pictures, but it is only recently that we’ve thought of adding text to them.
    We want to update all our pictures but we have encountered a problem here.

    1. When we type in the caption, the text obliterates half the picture, unlike those in your “another site” which appear ‘under’ the picture.
    2. We’ve also found that if we type in the “alt text” box, the picture doesn’t load into the post, and then if we remove the text in “alt text” the picture will load.

    Is there something we’re doing wrong?
    Cheers, geoff-n-jane.

    1. Hi Geoff-n-Jane.
      Thank you for visiting my site. I see that you have real issues with pictures. I always provide picture caption as you have seen in my site about mountains. And I always add text in ‘Alt Text’ box, without having any problem with it. From what you write I think you are doing it correctly. The only thing that comes to my mind is that this is theme issue. I had a look into your site and I see that your pictures are always small, perhaps try with bigger one to see the outcome. Jovo

  13. Hi,

    Great article and thanks for the suggestions on where to get free pics’s – I was using Shutterstock for a while but its damn expensive! I found a site called death to the stock photo that you can register with and they email you with some beautiful free images every month that are great to use in blog’s etc – all free too!

  14. So much useful information about adding images to a post! I learned a lot that I can implement. Thanks for this post and all the helpful links to various tools.

  15. Hi Jovo this is very helpful I bookmarked it so I can go back to it every now and then as my guide. You simplified it so it is easy to understand. I have to read it slowly and make sure I get it. I am not very good with technology so it takes time for me to grasp it and a non-English speaker as well so I really need to comprehend.

  16. Very useful information given here. I learned something on finding images which is great. I would love to recommend you in my articles sometime soon as I am a website owner and I find this useful. Thanks!

  17. Tons of awesome information for adding images to wordpress Jovo!
    I wish to find this earlier, because I was using Google images blindly without changing the proper setting.
    As the result, I had to go back and changed over 100 pictures within my wordpress site.
    Your article will certainly prevent my mistakes to others and help them correctly add images to their wordpress.
    Well done!

    Cheers,
    Edy

Leave a Reply

Your email address will not be published. Required fields are marked *