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:
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.
- Small = 200px width
- Medium = 320px width
- Large = 400px width
- Extra Large = 640 width
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 HomepageHow 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
dats ok but when i actually look at the post images they get automatically cropped
ReplyDeletejust have a look http://spooky-designer.blogspot.com/2009/07/21-stunning-photoshoped-photographs-of.html
Here I increased the image size to about 500X300 while writing tha post but the images were automatically scaled to 400X238 px which is the default size
Nice tutorial you have provided. It is quite comfortable for making size changes form the coding. Very nice consideration for appling Image to HTML. Keep writing tutorial like this.
ReplyDeletePexels is a free stock photography website.
ReplyDeleteIt wasn’t until last year that I learned about this site (thanks to a reader), and I’m so glad I did.
I absolutely love Pexels. It’s the only website I use when I need free stock images for my blog posts.
I think this could actually be one of the most useful websites for bloggers. Especially in a time where visuals are a must for your blog content.
Images on Pexels are free for personal and commercial use. They can be modified, distributed, and do not require attribution.
If you’re looking for more websites that offer free images, check out my post Where to Find Free Images for Your Blog.