6/16/11

Enlarge your photos in Blogger

Crop it like it's hot

As I've gotten better about blogging and the design of my blog, I've gotten pickier. One thing I'm super picky about is the size of my photos on my blog! The popular blogs that I love today usually have one thing in common, outstanding LARGE photos. I know that when you upload to Blogger, you have a Large and Extra Large option to upload your photos, but this doesn't work for me. I have to still size my photos for my blog. Yeah, it takes a little extra time, but the design payoff is worth it to me!

Here's how you can size your photos to fit your blog!

Note: It helps if you have some very basic knowledge of HTML. I personally work only in the Edit Html tab rather than the compose tab. I've come to understand Html over the 10 years or so I've been blogging. The more you practice with it, the more you will get the hang of it. Just remember to always preview your post rather than immediately saving if you are nervous about making changes and not knowing how to fix it.

I also find it easier to write my post, then upload each picture one at a time. After I upload each picture and make my sizing corrections, I'll copy and paste it into place. When several photos are uploaded one after another in the Edit Html code format, it is very confusing to navigate through and you can make mistakes a lot easier. One at a time is much more manageable.

1) Figure out the width of the column that you are posting your photo too. I'm going to focus on the column where the blog post/body fits into. In my blog, I've configured this width to be 500 pixels wide. So what this means is that photos that photos will look best (and flush with my body copy) if they are sized to 500 pixels.



2) Download/configure your photo. If you are working in Photoshop, you can usually size your photos exactly to size that you want them to appear on your blog. Size them down to 72 dpi (resolution) to make them smaller and easier to upload. If you notice it gives me the exact width and height of my pixels. I usually will write these down if I do size my photo in Photoshop. I'll refer to these numbers after I upload the photo (I'll explain in the next steps).



3) Upload your photo like you normally do. I don't pick a layout, it's not necessary if you are resizing.



4) Find the code highlighted as seen above. Normally when you upload to Blogger, it says /s400, but change this to /s800 as I did above. This should work for most people on their blogs. I could get into the nitty gritty details of what this does, but it's kinda convoluted. Trust me, this will work for you.



5) Now find the width code highlighted above in your html. If you notice in the above graphic, I changed it to 500px to be the width of my column.



6) If you know the dimensions of your photo (for example, if you resized it in Photoshop and have the exact dimensions), type that height in. If you don't know the exact dimensions, this is what I do (it can be a bit tricky until you get the hang of it). I personally will always make the width of my image 500 regardless if it is vertical or horizontal. I will guesstimate the height and then click the preview button and see how the photo looks in the blog post. If it looks a little squished or stretched, I'll change the height till it looks like the original photo. For example,the photo above you see in the preview was a bit too long, so I shaved off 10px in the height and it worked perfectly.

So there you have it! That's pretty much what you have to do to size your photos!

Lastly, I want to share with you an issue that you may encounter. If you notice, each day, I post "Swell Inspirations of the Day". I scour the internet and find images that will work. These images must be 500px wide though. Here is an example of what happens when you enlarge a photo that is small and enlarge it to fit.

Here's a photo of my friend Kathy I took at it's actual size:



This is what happens when I enlarge a photo that size to fit the width of my column...



As you can see, it enlarges to look very pixelated and blurry.
Be forewarned that smaller pics don't enlarge to look as nicely as one that has the correct dimensions.

Hope these tips help. Let me know if you have any questions!


Until next time Swellions!
Alexa

2 comments:

caz said...

Thanks for the tip!

I'm most often lazy, so just use the blogger defaults, because I couldn't be bothered figuring out how to change it.. but this has made it much easier! Will try to be less lazy and do this in future!!

Two Thirty FIve Designs said...

I have ALWAYS changed the size of my pics, double it both directions and double the quality of the pics. Thats why I have always stayed with a white back ground for my blog, but just changed up the design side blog, and its the only thing I hate. I am drawn to the larger pictures and want mine big!

Glad there is someone else who writes posts in edit html... friends always ask why I do.. for a while it would mess up if I tried to posts in the other, and I just like changing things up on that side ;)

#Attribution1 { display:none; }
Web Statistics