HOW & WHY TO SIZE PHOTOS CORRECTLY IN BLOGGER

This might seem like a bit of a dull, technical post, but I'm hoping that it will help some people nonetheless. I've had a few people ask me how I size my photos and I'd like to share with you what I think is the best method.

What I find most atheistically pleasing is to have all my photos the same width and perfectly aligned with my text. However, I want to still be able to click on the photo and see an enlarged version of it (example image here). That way you have an opportunity to see all the details, which is especially important in beauty blogging. This means that you need to be saving your photos quite large in whatever editing program you use (for example I always save mine with a width of between 1000 – 2000 pixels). There are two ways to size your photos in Blogger that I find to be effective.

1. The first is to size them under the HTML tab, rather than the compose tab, of your post (example photo here). This will ensure that when you click on your photo in your post it will enlarge to the full size that you saved it at. Now the downside of this method is that it means you have to go in and change the dimensions of every photo each time you post. It also means potentially having to do a little cross multiplication to make sure your photos are sized correctly and won't be stretched.

2. That's where the much easier option comes into play. You can size all your photos using CSS. It has the exact same effect as the above method, but you don't have to do any work or math. Simply paste this code into your CSS box and adjust the width to whatever aligns properly with your text.

/* custom – set post image size start */
.post-body img {
width: 640px;
height: auto;
}
/* custom – set post image size end */

You might be wondering what the point of this is. Who cares if your photos don't expand to a large size? You might have been saving your photos as the exact dimension that fits with your blog and sizing them that way. The main reason not to do that is that it doesn't allow for change. If you decide to switch up your template and increase the width of your body, you're always going to be stuck with the same size photos. Those photos won't align with your new text/body width. By sizing your photos with one of these two techniques it means that you can constantly change the size of the photos as you change up your template.

One last thing to note:
If you're adding large photos to your blog they can take a while to load for your readers. For that reason it's best to save your photos as JPEGs, not PNGs, as they're more compressed. But you'll need to switch off the auto-enhance settings in your Google account, otherwise your images will appear to have a grey cast. You can do that here.

P.S. If you'd like you can check out the post on How To Make Homepage Images Click Through To Post Pages.