perfectly clean images at all sizes for blogspot
A small but highly annoying problem comes along when you upload images from your computer to your blogspot blog. Linking images from other sites will not do this by the way, with that you don't have to worry at all. However when you upload directly from your computer, the code will look like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE74yKYHYgp96ENLr4E2862eZ4QwjF1YF46i5aLFa8kud0t8yzdlucjBEV84BazAk7N7URgiVx7MoeufivRlkEJAXbj7eSqBFSLO2A_4pYoyUdjdm_d6rZHwguHC4U8Cms9aimZbBF00e/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE74yKYHYgp96ENLr4E2862eZ4QwjF1YF46i5aLFa8kud0t8yzdlucjBEV84BazAk7N7URgiVx7MoeufivRlkEJAXbj7eSqBFSLO2A_4pYoyUdjdm_d6rZHwguHC4U8Cms9aimZbBF00e/s320/faststone.jpg" width="320" /></a></div>
Your image will be 320 pixels wide. The height can change depending upon your image aspect ratio, but the width is always 320 - no matter what, even if the width of your post is 1000 pixels! This is the default state and should be fixed, of course. Which needs to be done by hand in the Edit HTML tab of your post editor:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE74yKYHYgp96ENLr4E2862eZ4QwjF1YF46i5aLFa8kud0t8yzdlucjBEV84BazAk7N7URgiVx7MoeufivRlkEJAXbj7eSqBFSLO2A_4pYoyUdjdm_d6rZHwguHC4U8Cms9aimZbBF00e/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE74yKYHYgp96ENLr4E2862eZ4QwjF1YF46i5aLFa8kud0t8yzdlucjBEV84BazAk7N7URgiVx7MoeufivRlkEJAXbj7eSqBFSLO2A_4pYoyUdjdm_d6rZHwguHC4U8Cms9aimZbBF00e/s1600/faststone.jpg" width="500" /></a></div>
The bits you need to tackle are highlighted in black in the above code snippets. You obviously change the height and width. However, there is another little thing you need to change also and unless you take care of it your images will look really bad and blurry. This is the s320, which needs to get changed to s1600. Don't ask me why, this is how you get it to work.
(Tip: Need to know how to get the correct measurements when you resize your images? You can of course do it in photoshop by going to Image > Image size and pretend that you are resizing the image from the pixel values on the top. And then you can also install the opensourced Faststone Image Viewer (greatest app in the universe - please make a donation!), right click on the image, and... )
.................................................................................................................................
