One of my blogging pet peeves is wonky images in Blogger; the images that don’t use up the whole post area, the ones that hang off the side of the post area or get cut off because blogger crops them to fit the post area or the ones where the resolution has been stretched so that the pixels are blurry.
Well, don’t fret! Today I am going to show you how to get perfect images with every post.
Here we have a basic post in blogger:
The resolution looks good and the picture is centered, but it doesn’t take up the whole width of the blog post. In my opinion, one of the keys to a great post is images that use the whole post width.
To achieve this, we need to switch our screen from Compose mode to HTML mode. (Don’t panic. Everything is going to be great)!
This is the same post in HTML mode:
There is a lot of code there – but you will see the areas that need to be worked on highlighted in pink.
The three areas are picture width, picture height and resolution.
When you purchase a template or theme from Designer Blogs, the blog post width is listed for you. Using that information, I know that the width of blog posts on the Hattie theme is 650 pixels wide. This means that I want all of my images to be 650 pixels wide. You can see that in the above image that the current width of my image is 400 pixels wide and is 312 pixels in height.
I will highlight the number that I want to change and edit it. This means that instead of 400 pixels, I will enter in the number 650. For height, I COULD do a bit of long division to determine what the corresponding height should be so that my image is not distorted. But really, ain’t nobody got time for that. So I set the height to say auto.
Note: only change the wording / numbers within the quotes. If you eliminate the quotes you will break the coding and will need to upload the image again and start over.
Ok – so now that we have switched those two numbers we will get an image that looks like this:
Great! The image is now the width of the post AND the width and height coordinate.
BUT – in making the image the right size we lost a bit of resolution. We don’t want that! You want crisp pin-worthy images that your readers love.
So – if we go back the same HTML screen and look at the code again:
You will see a third area highlighted. This is a number within the image code that starts with an s. In this case, s400 – meaning that the images is compressed to look good at the original width that I uploaded the picture at – 400 pixels. If you change that number to read s1600 – you will get each and every pixel that you uploaded and will have a beautiful, crisp image.
This is what the image looks like at 650 pixels wide and a resolution of 1600.
Voila! Perfect images every time.