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.
Why not to set all post images to max-width 100% and user select Original size as the image size?No need to edit HTML and no need to edit each image.
Hi Ana,
Good point!I don't like to automatically change the width of each image to 100% because then when users try to lay a pin-it image over the top it automatically resizes that image as well which requires a second piece of coding.If you are well versed in coding and know how to do that, that's great.I would recommend this approach for those not as sure with coding.
Hi Emily, for some reason the html on my posts doesn't have the width and height code you mention.It goes straight from img border ="0″ to src.Also it doesn't have the s400 code mentioned above in the name of the file.Could this be because I am using PNG files?
Thanks!
Hi Sandra –
As I recall, the post image size doesn't show if you set the image to its' original size.When I have used this method I have to change the image size to extra large before I switch to html mode and swap out the numbers.See if that works for you.
Hi Emily, I'm not sure you saw my earlier comment about how I can't find the code which refers to the size of the images?Instead it goes straight to the source?I am not sure where it disappeared to so I am posting it again.If it goes away once more I'll take the hint
Any chance you can suggest how to resize the images in such a situation?
Thank you
Sandra
Hi Emily.I really appreciate these tutorials.I just started on Blogger and I am working on a post now about haircuts.I have updated my picture to be 800 wide and when I look at the HTML I can see that the image code that starts with an s is already at 1600 but the picture still looks grainy.What am I doing wrong?
Hello,
I'm facing a problem with images in Blogger.I upload the images in medium size into my albums, which is perfect for me.But when I open the album and click on an image to open, it does not open in its original resolution!rather it has a fixed height of 512 px and the width varies from image to image.Even though the image is a bit larger than the medium size when clicked, but I want the images to open in their original resolution when clicked on them.I'm currently using Opera Browser.I also tried using Google Chrome and Firefox but to no avail.I'm having the same problem in every browser.Any help will be greatly appreciated.
Can you please send a link to such image or to a post in which this problem occurs?