By default, Blogger provide a menu / tool to add images in our post. However, the resulting image is sometimes blurry and not big enough (unlike the original image). It will cause the messages of the image not to be delivered successfully / completely. Here is a trick to put bigger and clearer image in our Blogger posts by using non-default tools.Principally, we put our image in an external image hosting service (not Blogger’s), then we call for the image in our posts (using certain codes). For details, here is the systematic guide:
First, prepare the image you are going to use, .jpg type is recommended for its broad support. Then upload it in an image hosting service provider, like the free PhotoBucket. Then copy the direct link of the hosted image for further usage.
Second, add these bold codes in your posts (not in “compose” but “edit HTML”).
Your post texts
<div style="text-align: center;">
<img style="width: 500px; height: 200px;" src="the direct URL of your image" alt="alternative text" border="0">
</div>
Your post texts
Third, publish your post, and the image shall be there. Visit your post to check the changes.
Options:
The <div> tag is only used to set the image align. You can change the “center” with left or right depending on your need.
You can edit the width and height codes to adapt with your circumstances (in pixels). You can make it larger or smaller, but be careful with the aspect ratio (width : height), otherwise your image might look funny.
Use the code alt=”” to define the texts that are seen by your visitors only when they opt not to view images in their browsers. For example: alt=”This is an example image”
border=”0” means the image will not have any border. Use border=”1” to enable the border. However, the tag <div> is sometimes automatically bordered in some templates.
Do you find any problem in applying this method? Let me know if you need any help.
