Improve Image Quality in Blogger Post

Everybody wants to keep high quality image in their Blog/Site. But sometimes we couldn't find appropriate image for our Post. In order to Remove such dissatisfaction today i am going to tell you some simple tricks, which will increase quality of image without use of any software.

When you upload any image inside post you will find 5 different size (small, Medium, Large, X-large & Original) but these sizes may not be appropriate for you. You can manually set the height and width of image this will also increase the quality of your image. 

• Upload an image inside a blog Post. 
• Switch Post Editor View in HTML
• You will find such codes as below  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdNZSXpEqHWVjIfG0Nyae4346717G_ZNEIpOofcZODavWQK8UgSq0pItD9ZWK-q0iUH2lKqlQOQAtJSDd9aoPHhyCPMYsq6JX4FTn5t7dby-rHm-kdY8tB2uCweZHXUx4vByBlOocv-1VM/s1600/macedonia-library-csc-psd7.jpg" height="120" width="320" /> 

You can Change the size by replacing value inside  height & width with your needs. In order to increase quality just remove the Value shown in red colour. i.e s1600/  the number right side of alphabet 's' may be different. Just remove this part. You will get high quality images as compared to before. So the final code will be

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdNZSXpEqHWVjIfG0Nyae4346717G_ZNEIpOofcZODavWQK8UgSq0pItD9ZWK-q0iUH2lKqlQOQAtJSDd9aoPHhyCPMYsq6JX4FTn5t7dby-rHm-kdY8tB2uCweZHXUx4vByBlOocv-1VM/" height="120" width="320" /> 

Remove Border in Images. 

Images are seen ugly due to boarder. You can remove border from the image. Just add little piece of Css code style="border-style:none;" after <img code. See the instruction below.

<img style="border-style:none;"border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdNZSXpEqHWVjIfG0Nyae4346717G_ZNEIpOofcZODavWQK8UgSq0pItD9ZWK-q0iUH2lKqlQOQAtJSDd9aoPHhyCPMYsq6JX4FTn5t7dby-rHm-kdY8tB2uCweZHXUx4vByBlOocv-1VM/" height="120" width="320" />

Show Image only in Homepage/ Hide inside Post.

Log in to you Dashboard >> Template >> Edit HTML>> Click on <b:skin> showing with arrow sign.

Find this code (Use CTRL+F)

 ]]></b:skin>

Add Below CSS code Just After ]]></b:skin>

 <b:if cond='data:blog.pageType != "index"'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>

Save your Template.

When you need to show image only in homepage. Then add Image of your post at the top. Switch your post editor view in HTML. You will find the code this like.

<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdNZSXpEqHWVjIfG0Nyae4346717G_ZNEIpOofcZODavWQK8UgSq0pItD9ZWK-q0iUH2lKqlQOQAtJSDd9aoPHhyCPMYsq6JX4FTn5t7dby-rHm-kdY8tB2uCweZHXUx4vByBlOocv-1VM/s1600/macedonia-library-csc-psd7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdNZSXpEqHWVjIfG0Nyae4346717G_ZNEIpOofcZODavWQK8UgSq0pItD9ZWK-q0iUH2lKqlQOQAtJSDd9aoPHhyCPMYsq6JX4FTn5t7dby-rHm-kdY8tB2uCweZHXUx4vByBlOocv-1VM/s1600/macedonia-library-csc-psd7.jpg" /></a></div> 

Replace separator with hidepic

You are done. Check the Updates.

MUST READ

 8 Places to keep Google Adsense in Blog Unique