How to add picture in Blogger properly

Adding image or picture in Blogspot or Blogger is very simple as simple as flipping your hand. It is very easy to add picture in Blogger. However people are very often not paying attention on the image setting and image properties. These image properties are very important for Google search. How to add picture in Blogger?

In this post i want to share how to add image in Blogger and how to properly adjust the image setting and properties.

How To Add Image in Blogger Properly

Before adding an image in Blogger

The image should give more information to the reader and also to the Google machine. The image also should have optimum size so it can be see clearly without make the page load slow. We have to select the image type properly before uploading the image. The file also need to be rename properly to provide informative description. The name 'niagara-water-fall.jpg' is much better than file name DCIM-20161204

Choose the right image format. Blogger allowed 3 images format ; JPG, GIF and PNG. The short information below can give you some hints what and when to use the right image format.

• JPG or JPEG stand for Joint Photographic Expert Groups, it is a group who created the JPEG format. Use this format for Photograph and still image; no animation for this image format. It support better color depth. JPG has lossy image compression.
• GIF stands for Graphic Interchange Format. It support animation and transparent color but has limited color. Only 256 color that can be displayed in this format. That's why this format is not suitable for photograph. GIF image has lossless image compression, in contrary with JPG image format. GIF also has interlacing image feature. It can displayed partially when the download has not been completed.
• PNG stands for Portable Network Graphics. It was made to improve GIF image format. PNG support lossless compression, transparency, and large range of color dept.

Despite of the technical items behind the pictures format file, all we need is a clear image with lower file size. Just compare the three image format to get this objective. From my experience JPG has lower size compare to PNG for the same image quality.

How to add images in Blogger?

Below is the step by step of adding a picture or image in Blogger. 

Step 1 : Create a post in Blogger

First, we need to create a post. The image will be inserted into post body. If you are new to Blogger you can read my previous article about creating a post on Blogger.

Read : How To Create A Post in Blogger

Step 2 : Insert Image In Blogger Post Editor

On Blogger post editor click the insert image logo. We will be prompted with 6 option of image sources that can be select.

Insert Image In Blogger Post Editor

Step 3 : Choose the image source 

Technically, image are not inserted to the page like what we saw in Microsoft Word. In a blog post the <img> tag actually linked to HTML page that contain an image. The image will be displayed in a post. There are 6 options for image source that we can used.

Image sources in Blogger Post Editor

 Choose the image source that we want to use.

1. Upload and choose files. We can upload images to Blogger with JPG, GIF and PNG format files. Before uploading the image pay attention on the image size. The images will be uploaded to Google Album Archive.
2. From this blog. We can choose the image from this blog. The images that has been uploaded into this blog will be available on this area.
3. From Google Album Archive. This is the place where all the image that related with Google account hold. We can find the image from any Google Blog that we run, we also can find any images that we uploaded into Google + , Google Photos and also Google Post.
4. From your phone.  We will have some images in this area if we used Google Photos application in our smartphone. It is coming handy, we can store picture and screen shoot of our smartphone using Google Photos application and directly use it in our Blog.
5. From your webcam. The webcam can be one of Blogger image source. We need to install Flash Player 10.1 first if we want to use this feature.
6. From a URL. Last but not least, we can use an URL of an image from any open source in Internet. All we need is the URL or the link of the image.

Add image in Blogger from Google Album Archive

Add image from a URL or Link

Step 4 : Click Add Selected

Choose one or more images. The images that is being selected will be highlighted in blue box. The 'add selected' button on the bottom will active after we select at least one image. For example we can see on the pictures below. To add the selected image to blog post, click 'Add Selected' button.

Choose the image and click Add selected

After adding images in Blogger

Once the image has been selected we should choose the image size, image alignment, image caption, image title description and alternative text for more informative blog post content.

People say that picture speak a thousands word. But still we need to provide the additionally information of the picture or image that we have upload so Google machine can hear the image speak.

Click the image on Blogger post editor. There will be some link in blue text color to set the image properties in the post. There are 5 basic image option that are available when we click the image. The image size, image alignment, caption and image properties. There are two image properties that we need to put. The title description and the alternative text. Those image properties is very important for Google search.

Image properties in Blogger post

Image size setting
Blogger provide 5 option for image size setting in the post. The small, medium, large, X-large and original size. The X-large option will fulfill the body post area. If the image size exceed the body area you can add custom CSS to correct it. You can read my previous article on How To Correct the Blogger image that exceed the body area.

Read : How to fix image exceed the body in Blogger Post


Image alignment setting
It is very obvious. The alignment setting define the image location on the Blogger post. There are three alignment option; left, center and right. My preference is the center alignment.

Image Caption
Image caption will be showed together with the image. The image caption add more information to the image. We can put some words that make the image message become stronger and highlighted the part of the image that we want to be see by the reader.


Image properties - title text
Title text will be showed as a hint on the blogger image when we move the mouse over the image. This properties help us to provide more information about the image on mouse over.

Image properties in Blogger Post : title text and alt text

Image properties - Alternate text (alt tag)

The alt is  properties of an image HTML element. The content of an alt tag will be showed as alternative information that will be showed when the image can not be loaded as it should.

Summary how to add image in Blogger properly

As summary of this article, we can easily add images to Blogger post from local source or an URL. To make the image more informative to the reader and also Google machine, don't forget to put image caption, image title description and also alternative text properties. 

I think this article has already covered the basic item for properly adding images into Blogger post. Share your though on the comment section below. If you find this article helpful please share.