Advanced Image Editing Options Using HTML

Hi friends. In our previous sections, we discussed how to add images to your Blogger posts as well as how to control images by Blogger delivered functions. Blogger provides pretty straight forward ways to perform both these different kinds of tasks. But how does an advanced user benefit from all that Blogger has to offer? Simple. If you know HTML, you can do lots and lots of cool things with your images. The best part is, HTML is a very friendly, easy to understand language which you can learn quickly with little effort.

In this post, we will discuss how to use HTML into having more control over how to display images in your posts. This post assumes you are familiar with the very basics of HTML and jumps directly to HTML for optimizing images in Blogger posts.

1. Linking Your Images To URLs

Often it is a good idea to link your images to a certain (usually external) URLs. This is easily done by the using the following tag.

<a href = "target URL here"> <img src = "image source link" /> </a>

2. Title Attribute

This attribute is good from SEO point of view. Enter a title for this image. The title should be such that it helps search engines easily know what your image is about.

<img src = "image source link" title="tulip-flowers" />

3. Alternative Attribute

This attribute further defines the Title attribute. You can think of this as a more descriptive image title. For example, the blog post discusses how to plant tulips can have the image titled "tulip-flowers", and its alternative attribute can be as follows:
<img src = "image source link" title="tulip-flowers" alt="Tips on how to plant fresh and vibrant tulips" />

4. Defining Your Own Image Width and Height

Blogger provides four standard sizes for images, Small, Medium, Large and X-Large, each with predefined width and height. Using the width and height attributes, you can define your own image size. See the following tag.

<img src = "image source link" width="width in pixels" height="height in pixels"  />

5. Using Image Spacing

Image spacing is more effective when your text is wrapped around an image. It gives a cleaner, neater look which is a good practice especially when you want a professional look.

<img src="image source link" vspace="5" hspace="10" />

The vspace and hspace attributes take values in pixels. This example shows that the vertical spacing should be 5 pixels and horizontal spacing should be about 10 pixels.

6. Adding Borders To Images

Add a border to your images for a more finished look by using the border attribute in your image tag.

<img src="image source link" border="1" />

This adds a 1-pixel border to your image. A border value of 0 (zero) results in no border at all. However, if there is no border specified or border=0 , and the image is attached to a hyperlink (see "Linking Your Images" above), then a 1-pixel border is attached to the image automatically.

7. Adding Color To Image Borders

If we want to have a border of certain color for your image, we need to use CSS. Using a CSS command on global level will make all images of the same specified border color. An easier way to achieve this is to write this CSS command inside our img tag. See the following HTML:

<img src="image source link" style="border: 3px black solid;" />OR<img src="image source link" border="3" style="black solid;" />

This tells our blog to put a 3-pixel solid line border of black color.

Width in style attribute can be in pixels, ems (e.g. 3ems) and percentage. Apart from "solid", other line styles can be solid, dotted, dashed, double, ridge, inset and outset.

These are just some of the ways you can play around with your images in Blogger posts. Play around with all these and combinations of commands to achieve high end blog posts. Needless to say, after mastering these basics, you can always go up to advanced image HTML.

Related Posts:

How To Insert Images Blogger
Having Fun With Images In Your Blogger Posts

Hi, comments are important feedback for us. Please let us know what you think about the article you just read and if it was useful to you in any way. Needless to say, please feel free to leave a message if you feel some area needs correction or update. Thank you for your time.

Read More

Having Fun With Images In Your Blogger Posts

In the previous section, we learnt how to insert images in a Blogger post. Blogger offers us a neat variety of ways by which to add images to our posts to make them look more professional. Some of them, besides uploading are, inserting from Web, phone and webcam.

In this section, we will review some basic features offered by Blogger to make use of the images we have just added in our post. These are very simple to learn and help users gain some control over the look and feel of their posts despite the fact that they must be beginners. For more control (advanced topics), we will discuss in later sections.

Image Controls In Blogger

To start using different controls that Blogger has provided for images, all you need to do is click on the image. This will highlight the image and open a set of controls. See below for illustration.

TYPE	FEATURE	DESCRIPTION
Image Size	Small	Reduces image to the smallest size available where height is 150px and width is 200px.
	Medium	This is the default size into which an image is loaded when it is inserted into the post editor. Medium size has a height of 240px and width of 320px.
	Large	A Large image has height of height of 300px and width of 400px
	X-Large	X-Large image has height of 480px and width of 640px
	Original Size	Restores the image back to its original size. This may or may not fit the post editor window as well as when blog is rendered.
Image Alignment	Left	Left aligns the image in the post editor
	Center	Center aligns the image in the post editor
	Right	Right aligns the image in the post editor
Image Properties	Add Caption	Enables the user to add a caption to an image. Captions are good for better understanding of what the image is about as well as for useful SEO purposes.
	Properties	This contains two major image properties that are also basic to image SEO. 1. Title text: Properly naming an image file can help search engines find it easily on the web. An image file name should be to the point and concise with words separated preferrably by use of dash '-'. 2. Alt text: The alternate text property further aids the 'title' property. Using this feature, you can further define what your image is about. For example, an image containing tulips can have Title property as "how-to-grow-tulips-tutorial.jpg" and the Alternate text that explains this more can be "Step by step guide to planting bright tulips in your backyard".
	Remove	Removes image from the post editor but does not remove it from Picasa Web album.

These image controls are pretty straight forward and simple, yet they give an adequate control over to the user. More image control is acquired by the use of HTML. This HTML code is easily written in the 'HTML' tab of the post editor. We will discuss HTML for beginners in the coming sections; quite much can be acquired even with a basic knowledge of HTML.

Enjoy using images in Blogger and plan around more to get the hang of it. You will love it!

Hi, comments are important feedback for us. Please let us know what you think about the article you just read and if it was useful to you in any way. Needless to say, please feel free to leave a message if you feel some area needs correction or update. Thank you for your time.

Read More