Uploading images to Blogger in better way

Preface

There are two ways to upload images to Blogger: 1) simple one when we need to click Image icon in inbuilt Blogger html editor and 2) is more complicated one when we need to upload an image to the server. Which one is better? Second one, definitely. In spite of the fact that it is more complicated way and requires more time and labour to spend. So, why then it is so good?

What does happen when we use inbuilt editor and upload (or type URL address) into Blogger blog post? We click image icon and get this window:

Here we can align the image to the left, to the right, to centre it etc. Another option is to choose the size–small, medium, large. The result is below:

In spite of the chosen Large option, our image stays small. Figure tag formatting stays as defined–100% wide (100% relatively to blog post width) while the picture catches just a part of the box. Moreover, we added figure tag afterwards, having wrapped the uploaded image. We could ignore use of figure tag but thus we would lose the formatting and see our post format with the image without figure tag this way:

Nice side of automatic uploading method is that Blogger converts the image to anchor immediately and enables the light box. It is comfortable way but downsides of this method are already obvious. Text sticks to the image, no space between image and share buttons, image is small. And it is not all. Let's take a look at its default code:

As you see the code is dirty, cluttered and very long, URLs are long and meaningless, alt tag is absent, width is fixed, inline css is injected. Let's see now how the code would look like if we were to upload the image manually to our hosting:

As you see it not only has short meaningful, SEOO friendly URL, code itself is short and accurate, it contains alt tag as well. Well, let's go through the clean manually inserted code. Compare the length of URLs:

and

First of all, Blogger creates two URLs (though the image used is just one): 1) http://4.bp.blogspot.com/-7GF4ZYuYgfE/UHreKnqZ8hI/AAAAAAAAAgg/_F0OGsKrAjU/s1600/good-formatting.jpg 2) http://4.bp.blogspot.com/-7GF4ZYuYgfE/UHreKnqZ8hI/AAAAAAAAAgg/_F0OGsKrAjU/s400/good-formatting.jpg. Manual code in my templates, thanks to max-width rule has only one URL: http://yourdomain/good-formatting.jpg.

Consider the absence of alt tag. This tag describes your image and is very important for SEO purposes. Internet does not know what your photo depicts but it knows to read text. And if the image is described (description inserted into alt tag) Google or any other searching engine will find your image in obligatory way.

Image uploaded via Blogger has fixed dimensions, in the example above it has width of 400px and height of 209px. And what if your Blogger template is responsive? Responsive means fits all screen resolutions and images, boxes, elements in such type of templates behave accordingly, they become resizable. It means that you will need each time to delete the dimensions from the code if you wish to get an image which covers the box like the image below:

If you love your blog spend a few extra minutes and make your post looking better uploading manually flexible, well-aligned and visible to searching engines images.