Probably one of my biggest pet-peeves with bloggers now-a-days is when their images do not match up to the width of the post text (unless, of course, the image is integrated into the copy of the post). Now, this is not to say that we have never done this in our early blogging days (*shudders*), but we have since mended our ways! ;) I have a feeling the main reason why this design no-no is so prominent in the blogosphere, could be because bloggers simply don't know how to make their images the same width as their text, which is why I am here to show you how :)
When you are writing up your post in Blogger, click on the image you have uploaded into your post. A little blue box will appear at the bottom of the image, where you will see items such as the size of the image (small, medium, large, extra large, original size), the placement (left, center, right), and other options. The size options are what is going to help you in getting your photo width to be the same, or pretty close to the width of your post text. Just experiment around to find the perfect size, as it can vary from image to image.
The main things to keep in mind is when constructing a post, is to try as hard as you can to make the image the same (or close to the) width of your post. I understand that some images sourced from places like pinterest can have incredibly variant widths, and typically are smaller than most blog post widths. If you run into such a problem, try and get creative. Maybe you can integrate it into a collage, or a fun post graphic. Get creative! And most importantly, have fun :)
**UPDATE**
I got quite a few responses about blogging from mobile devices and the inflexibility of the blogger app and website. You know, if you are devoted enough to be blogging from such a device: good for you! Don't stress so much about design and such, as you are limited, and there is nothing worse than stressing over a blog post (trust me, I know!)
One thing that might help both sides of the party is to ditch the blogger image uploader all together, and go through Flickr. We started using that image hosting site after we came across difficulties with Picasa's (the blogger image hosting site) storage limit. Flickr is free, you get a terabyte of space (people, that's A LOT!), and you have way more flexibility with image sizing. When you select one of your photos and click on the share button, you have the option to choose from a huge variety of sizes. Copy the HTML code (NOT the embed code!) created specifically for the size you want, and paste that into your post. When you do paste it into your post, just place the code wherever you want the image to appear, then select the HTML tab in the upper left corner of the post editor. Click back to Compose mode, and your images should appear! You can control where your images are positioned (center, left, right) in the same way that you would if you were to upload the image through the blogger uploader.
I hope this all makes sense! Thanks so much for your support and advice on this post series! I truly appreciate it :)
Happy Blogging,
-Charlotte
the blog designer + photographer
Small images in blog posts are definitely a pet peeve of mine! Unfortunately, if you have a very wide width on your posts, the x-large image doesn't really match up. If you want to tinker with HTML, however, you can go to template designer > HTML/CSS and add:
ReplyDelete.post-body img {
width: 100%;
height: auto;
}
This automatically makes every single photo in your posts the width of the blog post. Although it may add some hiccups in the padding/margins. :)
Bethany, thank you so much for this!
Deletecharmant
This comment has been removed by the author.
DeleteThis is a really interesting post, Charlotte. I personally struggle with this, as sometimes if I make the image as large as I can to match the width of the text (I agree, this is optimal), I usually have to change the placement (from center, perhaps, to left). But sometimes that results in an "overage", with the image spilling past the text. So then I go back to the next smaller size (e.g large rather than extra large), which is soooo much smaller. I find that limitation frustrating. Also, I was recently away from home and was using my tablet to post to my blog, and realized that the device (phone vs. tablet vs. laptop/pc) makes a difference too! I feel like I cannot win in the "correct size for the device" battle. Have you experienced this? Thanks for a great post!
ReplyDeleteI love theses posts! I'm definitely going to come back and utilize them once I have a laptop. Unfortunately I am a blogger guilty of putting up pictures that aren't as wide as my text. I was lucky enough to acquire an iPad when my old laptop crashed, which has been a blessing, but the blogger app doesn't give the options for picture placement and blogger.com is not very user friendly from a mobile device. :/
ReplyDelete-Jill
www.thewizardofoddsandends.blogspot.com
Oh my! I literally almost requested that you do the next post about this last time! SO helpful!
ReplyDeleteThis specific topic has really been bothering me over on our blog too. While we have already learned so much already this year obviously there is always more to learn!
I have really been considering swopping over to Flickr- and like I said I really wanted your thoughts on that! Since I am our main designer/researcher it is always a help to hear your thoughts- they are always well said!
Thank you so much dear! :)
Cassie
I have such a hard time getting them the right size as well. Typically my horizontal shots can end up being the correct width, but my vertical ones are impossible to make larger. The Xlarge size doesn't even come close to filling the page. Maybe I will try this HTML thing that someone else posted in the comments. I hear this a lot, but it is really a difficult thing to master. -Alexandra
ReplyDeleteSimply Alexandra: My Favorite Things
Hello! I'm a new reader here. I love your blog! I (*blush*) am guilty of sometimes not lining up my pictures with my text. Most of the time I do it, but occasionally the picture refuses to line up, even with adjusted size/position. I know several bloggers who like and use Flickr. I might have to switch over.
ReplyDeleteThanks for the tips! I'm a new blogger, and I'm afraid the pictures never come out right for the posts. I'm not tech-savvy in the slightest sense, so hopefully I will be able to figure it out soon.
ReplyDeletehttp//:knoxmysox.blogspot.com
Thanks for this blog post, Charlotte! It's very helpful. I unfortunately can't do this right now because my camera has horrible quality, but hopefully someday when I get a new camera I can!
ReplyDeletecharmant
Oh, by the way, Charlotte, what are the widths for this blog? Because of my camera's poor quality, I'm using an 800px right now, but would far rather it was up to around 1000. What do you use?
ReplyDeletecharmant
Hi Hannah,
DeleteOur blog's width is 1080px wide, and our posts are 640px wide.
Thanks for commenting!
-Charlotte
the blog designer + photographer
Thank you, Charlotte!
Deletecharmant
Hmm. I, too, am bothered by overly small photos in blog posts, but I've taken to doing just that as I've been using more pictures with portrait orientation.... and if there's one thing that bothers me more than photos that are narrower than the text, it's outfit photos where I need to scroll up and down to see the subject's head and feet! So for the moment, I've been using narrower photos. What do you ladies suggest?
ReplyDeleteGreat tips! I definitely agree that (whenever possible of course) images that match the text width give a better appearance :) I'm loving this series of yours & I think it is great to share your tips with others so that they can improve their blogs!
ReplyDelete