I have been using Blogger for so long and getting attached to it, its gonna be hard when I actually decide to use WordPress. That is if I stop being a cheapskate and decide to spend on hosting and a domain name lol!
Anyway, one of the limitations of blogger is that its hard to handle pictures uploaded on the blog itself. The picture is linked to its high resolution version by default and has a scaled down version embedded on the post itself. But what if I want a high-resolution version embedded on my post?
An image uploaded to Blogger has this format:
It has mouseover (cursor looks like a hand when you hover over the image) and link attributes automatically. If you want to remove the link attriburte first, you can do so in the WYSWYG editor. If you want a higher resolution image, you’d think you’ll just have to change the width: and height: attributes right? Wrong. You’ll just have a large-sized but low resolution version of the picture – very un-pleasant. This happens even if you upload a large resolution picture. You’ll notice that Blogger automatically scales it down to a small, embedded image wherein you can view the full resolution version if you click on the small image, kinda like a thumbnail.
So how do we embed high resolution photos to Blogger?
Simple. Remove the link attribute using the WYSWYG first (not really required but it makes things easier at this point. You can always set a link later.) Then just look for the s400 code on the image URL. This differs based on the image size you choose when you upload the image.
It should look like this:
You can edit that code. You can put either s800 or s1600 for higher resolution. Then just edit the height: and width: attributes according to the exact resolution you want. Remember, you should have a high-resolution image to start with.
SEO Tip: Before uploading your image, name it with the keyword you are targetting for your post. Use the “Alt=” attribute too. Put it your targeted keyword. No matter how long or how many keywords you put in, its ok.