Change Image Attributes of a Image on Blgger | How to change Image properties using HTML

There are few options available in Compose mode to change the attributes of an image on your blog post. But there are more options available on Edit html mode. In this page let's discuss about image settings on blogger post. you can read about inserting images and working with picasa web albums by the previous post. Read How to Insert images to blogger posts if you are new to blogging. After you have inserted an image to your post you can see image options by clicking on that image. Basic settings are image size, Image alignment and to Add a caption. Those are the only settings you can change on the Compose mode. Rest is available on Edit html mode. 

Image properties on Compose mode.

When you clicked on inserted image you will see the basic image size and position attributes. There are five premade sizes available on that menu. also you can change the alignment of the picture. you can select right or left to Type something on a side with the picture like the first paragraph of this page. "Add a caption" will allow you to add a simple note below the image. I often use it to type "Click to zoom" on my posts.

Image settings on Edit Html.

When you change something in compose mode blogger will automatically create the html code for it. When you insert an image blogger will add the following html code for your post. this is the basic code to insert an image to a web page using HTML.


<a href="Target link"><img src="Direct link to the image" /></a>


Black color part is the code we use to link our image to a link. when you insert an image blogger will automatically add image location as Target link. so when someone click on the image, it will open the image on that window. if you change it and add another blog post link or another website link with http:// it will open that link in the same tab when you click on the image. Thats how we use an image as a Hyperlink. Red color code shows the direct link to the image. Now you are going to learn the basic html tags we use to change image attributes.

How to Change image size.

You can set the exact size to images using HTML code. you can use Height and Width options in <img> tag. Change Blue color values on html mode to change the size.  If you can't see height and Width options in <img> tag, manually add it to the code.


<img height="180" src="Direct link to image" width="180" />


Now go to Compose mode and check your image size. you can learn more about image tag code by changing image settings on Compose mode and check the code again. you will see the changes added to the code. study them and try them with different posts and images.

How to Add Images to Blog posts

How to upload images to blogger, How to insert images from other URLs , How to place images on blog posts, How to align and re size images, How to add captions, How to Link images to load in new tab, How to use a Image as a Hyper link. I'll show you how we can do those tasks from this page. When we upload images to our blog, blogger will store those photos in a Picasa web album. Picasa is a free service given by Google. Blogger will automatically create a Picasa web album using your E-mail to store your images. You can manage uploaded photos by login in to Picasa Web Albums Ok lets start adding photos and customize them in our blogger post.

First go to your Blogger dashboard and click on create a new post button or open a saved blog post. Now click on Insert image button on Blogger tool bar. now it will open a simple window with few options to insert an image. look at this Screen shot.

There are 4 options to insert an image to your blog.

1. Upload image directly to blogger from your computer .


This is the default option in insert image window. Click "Choose" button and browse for pictures. Always remember to upload low size files. use Jpeg and PNG file formats for your uploads. they load faster and take very low file size. it can help your site to load faster. Select image and click open button. after your image uploaded to picasa albums, it will show on insert image window. now select that uploaded image and click "Add selected" button. now you will see that uploaded image on your blog post. 


2. Use Already uploaded images that used in your blog .


After you upload images to your blog they will appear on this page. you Don't have to re-upload them or find uploaded image link. this section will allow you to see all photos from the beginning to the last uploaded photo. select the image and click "Add selected" button. now you will see that image on your blog post. 

3. Images from Picasa Web albums .


When you upload first image to blogger, Google will automatically create a picasa web album for you. when you upload images blogger will save them in your Picasa web album. If you have few blogs, there will be different folders for each blog. you can add images and remove unwanted images from your Picasa account by login in to your Picasa web Album.

4. Images from a URL .


You can directly specify an image URL from an external source. if you have any image hosing account, you can use this feature. go to "From a Url" link and enter the direct link to the image. you can get the direct link to a image by Right clicking an image file and selecting "Copy image location" option. 

Read Image Customization Article to learn how to change attributes of an image using Compose and Edit Html views. also you can learn how to use an image as a Hyperlink by reading that page.