Today I want to share with you a fun little trick for automatically resizing your Blogger photos to fill the full width of your post area. Blogger offers several tools for resizing post images easily. I’ll get to my little trick in a second, but first I want to explain how to use the Blogger tools for uploading and resizing your photos for those that don’t already know.
To use the Blogger resizing options, simply create a new post, add a photo, and then click on your uploaded photo to open the sizing and positioning options.
You can set the photo size to small, medium, large, x-large, or to its original size. You can also set the justification to left, center, or right. I recommend centering your photos and using the x-large setting (if you don’t use the trick below) so your photos can be seen in all their glory. The only draw back to using this option is that the x-large size sizes images to 640px, which means if you have a post area that is wider than 640px, the photo will still look a little small. That is where my fancy little trick comes into play, so let’s get to it!
RELATED POST: The 4 Best Places to Find Free Photos for Your Blog
STEP 1: RESIZE YOUR PHOTO
Resizing your blog photos is an important step regardless of whether or not you plan to use this photo sizing trick. This tutorial will still work on photos uploaded in their original size but because uploading original sized photos slows your site WAY DOWN, it is not recommended. The larger the image size, the slower it will load on your site…so trust me, just don’t do it!
Most blogs have a post area width somewhere between 600px-750px, so sizing your photos to 800px wide should work well on most blogs. You’ll want your image to be sized a little larger than your post width with this tutorial because it’s easier to bring an image down in size than it is to bring a small image up in size. Enlarging a small image will cause it to become pixelated and the quality will be low. So to keep things looking good, I recommend sizing your images to around 800px wide with this tutorial.
I use Photoshop to resize my images, but if you don’t have Photoshop, Pixlr is a free service you can use to do this. Here’s how to easily resize a photo using Pixlr:
1) Hop over to Pixlr, scroll down and click “Launch Web App” under the Pixlr Editor option.
2) Click “Open Image from Computer” and find the image you want to use from your computer.
3) Your image will appear and will be ready to be edited. At the bottom of the image you’ll see the current image size. My sample image is currently 4000px wide, which is WAY too large to be uploaded to a blog. So let’s change it to the recommended 800px wide. In the top navigation bar, click “Image” and then “Image size…”
4) Change the image width to 800 pixels. The height of the image will automatically adjust to keep the proper proportions. Click “OK.”
5) Now you just need to save the resized image, so go to “File” and then “Save.” Rename the file (if needed) and then click “OK.” Find the folder on your computer where you’d like to save the image and click “Save.” You’re now ready for the next step.
RELATED POST: 10 Ways to Make Your Blogger Blog Load Faster
STEP 2: ADD A LITTLE CSS
Now that your image is sized correctly you’ll need to add a little coding to achieve the automatic re-sizing. Don’t worry, you don’t need any coding experience for this.
1) First open up your Blogger dashboard and go to “Theme” and then “Customize.”
2) Click “Advanced” and then scroll down and click on “Add CSS” and copy/paste the following code into the white box:
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
It should look like this:
Note: the above code will only change the images you have set to “Original Size.” If you want ALL of your images to be sized to the full post width regardless of the Blogger re-sizing options you have them set to, add this CSS instead:
.post-body img {
width:100%;
height:100%;
display: block;
}
Now click “Apply to Blog” to save your changes.
RELATED POST: How to Achieve Pixel Perfect Images in Blogger
STEP 3: ADD A PHOTO TO A POST
Now just add a photo to a post like described in the beginning of this tutorial and make sure the photo is set to “Original Size” and your photo will now nicely fill the full width of your post area once you hit “Publish.” This trick will also apply to all previously posted photos as long as the photos are set to “Original Size.” If not, then you’ll want to use the second code option above.
Oh so big and pretty!
Please leave any questions you may have in the comments and I’ll do my best to answer them. Otherwise, enjoy your lovely automatically resized photos!
RELATED POST: SEO Quick Tip: How to Title and Size Images for SEO
