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.
You might be interested in:
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:
Having Fun With Images In Your Blogger Posts
Help us grow.
Follow us by one of the following options and stay linked.
