How to Change Image Size in Blogger Posts

In this Blogger Tutorial I show you how to change image size in Blogger posts depending on how you would like the image to look. Resizing images to fit in with the look and feel of your blog will enhance the overall look of your blog and so it is worth changing images to the optimal size. This tutorial is suitable for all Blogspot bloggers wanting to learn more about image size for Blogger posts but is written with beginners in mind.

Level of Difficulty: Easy

Suitable for: Beginners

How to Change Image Size Blogger

Blogger displays uploaded images using 5 different pre-set image sizes:

• small - 200 px
• medium - 320 px
• large - 400 px
• extra large - 640 px
• original size - actual dimensions of the image (should not be wider than the width of your blog post area)

By default images are uploaded as medium size which means they are displayed at a width of 320px. You can make the image larger or smaller depending on the look of your blog and its theme. To set your own custom dimensions instead check out: How to Set Custom Image Dimensions in Blogger

I suggest that early on you settle on an image size you like and then consistently use the same image size to keep all images a uniform size across your blog posts. Also try to resize your images before you upload them so that you are not using large files that may slow down loading times of your blog. For more information on resizing images check out 8 Tips for Uploading Images to Blogger.

• Decide on a default image size for all your post images and use the same size.


• Resize large images prior to upload to speed up page loading time

Steps to Resize an Image in a Blogger Post

1. Login in to your Blogger blog


2. From the Dashboard select Posts from the left-hand menu to modify an image in an existing post
   or
   Select the New Post button to create a new post with images.


3. Check you are in the Compose View (click the down arrow of the first icon of the tools menu.


4. Find the image you want to resize.


5. Click on the image once to highlight the picture.





6. Click on the gear icon (little wheel) that appears in the menu bar below the image


7. Select the size of the image that best suits the look of your particular blog (Note: do not make your image larger than the width of your posts (an extra large setting displays at 640 width).





8. Click Preview to check the look of your image as it will appear in your blog post


9. Make an changes to the image size if necessary by clicking on the gear icon again


10. If satisfied with the size of the image go ahead and save by either clicking save under Preview if creating a new post or if you are ready for your blog post to go live click Publish


11. Click on the eye preview icon in the listing of your blog posts to see your image resized in your live blog post.

In this article you have learned how to change image size in Blogger. Image sizes can be changed to any of the default sizes in the Compose View in Blogger: small, medium, large, extra large and original size. It is helpful for the overall look of your blog to ensure that Blogger Post images sizes are the same size across your blog.

If you want to learn how to override the default image settings in Blogger then check out my other post which teaches you how to set your own custom image dimensions.

Related Articles

How to Add a Welcome Message to a Blogger Homepage
How to Change the Color of the Blogger Navbar
How to Choose a Great Topic for a Blogger Blog in 2020
How to Resize Images in Blogger to User Defined Dimensions
How to Schedule Blog Posts for a Specific Future Date in Blogger

How to Resize Images in a Blogspot Blog Post to Custom Dimensions

In this Blogger tutorial about resizing images you will learn how to increase or decrease the displayed size of images in your Blogspot posts by changing the height and width of the picture to your own user defined dimensions. Making changes to images in your blog posts is a very easy trick requiring no change to your Blogger template. This Blogger tutorial is suitable for any blogger level from beginner to advanced users. (Updated 17 March 2022)

Blogger Default Image Sizes

By default Blogger has five image settings: small, medium, large and extra large and original size. When you upload an image to a Blogger post the image by default is displayed at medium (320 px width) unless you change it to another size from the popup window that appears at upload. For instance if you choose large Blogger will automatically make the image bigger by scaling it to fit 400 pixels in width by 300 pixels in height and display it at the next size up.

Here are the different width sizes for uploaded images that Blogger offers:

• Small = 200px width
• Medium = 320px width
• Large = 400px width
• Extra Large = 640 width

By giving bloggers on Blogspot the choice of four preset images sizes or the original image size Blogger takes the headache out of bloggers knowing what size to set an image at. It also means that despite the varying original sizes of uploaded images Blogger is able to display them all uniformly.

Resize Blogger Images Prior to Upload and Then Change to Original Size

There are, however, times when you might want to change the image size to your own user defined specifications rather than sticking with the Blogger defaults. One way to override the preset image sizes in Blogger is to change the settings to display the image at the original size. This works well if you have resized the image prior to upload and you want the image to display at the width and height you have already preselected. To get help resizing an image prior to upload you could try a free online image resizing service like resizeimage.net.

Change Blogger Image Defaults to User Defined Dimensions

If you don't want to go for the hassle of resizing all your images before uploading and you only have a few images that you want to display at different sizes then the method described below is likely to work best. One thing to keep in mind though is that you want to make sure that when you put in your own dimensions that you do not distort the image. To get help to keep the same image proportions you could try a free online image resize calculator like red-route.org which will calculate the dimensions to enter.

Steps to Make Uploaded Images Larger/Smaller in Blogger

1. Log in to Blogger if not already logged in.

2. Go to Posts >> New Post or if you want to edit an image already posted go to Posts >> Edit Post

3. Upload your chosen image or if you are editing your post identify the image you want to change

4. Switch from the Compose View to Edit HTML View which will allow you to see the HTML code of your post

5. Find the code block for the image you wish to change. Look for the code that begins <img style> For example for the following image:

img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://3.bp.blogspot.com/_vLeiVavkV_M/SjMKOjXnmYI/XXXXXXXXX/Ra0BizPIDsc/s400/twitter123.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5346628427747662210" />

This code will display the image in a Blogger post at the large size - 400x300.

6. To change the 400x300 dimensions it is simply a matter of changing the values to whatever you wish. Make sure you keep the proportions of the image otherwise it will not display correctly (stretched and distorted). For example to increase the image size displayed by 25% you would change the dimensions to 500x375:

img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 375px;" src="https://3.bp.blogspot.com/_vLeiVavkV_M/SjMKOjXnmYI/XXXXXXXXX/Ra0BizPIDsc/s400/twitter123.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5346628427747662210" />

This code will display the image in a Blogger post to the custom dimensions of 500x375.


7. Click the Preview button and you will be able to check your image before publishing

8. Once you are satisfied click on the Publish post button

9. Click View Blog to see your image displayed with your user defined proportions

Summary

At sometime you may want to display an image in your Blogger post that is different from the Blogspot default image size presets of small, medium, large, extra large. It is possible to make an image smaller or larger than these presets by overridging the Blogspot default image sizes and entering your own custom dimensions. This tutorial has shown you how to change the height and width values of an image in order to make it bigger or smaller depending on need.

Related Articles

How to Add a Welcome Message to a Blogger  Homepage
How to Change the Color of the Blogger Nav Bar
How to Put a Twitter Follow Icon on Blogger Next to Post Title
How to Change Image Sizes in Blogger Posts
How to Schedule Blog Posts in Blogger in 2022
How to Add an Atom Sitemap to Google Search Console from a Blogger Blog in 2022