There’s something about a blog that has their photos figured out-something wonderful. When I visit a blog the first thing that draws me in are their photos. If they have large clear photos lined up beautifully in the post I’m much more likely to click their little follow/subscribe button. Even before I read through a lot of posts-it’s just a fact that we live in a very visual society, and I am a visual person. This is why I feel like the sizing & positioning of photos is a very important thing to think about.
I’m not saying I wont read a blog that doesn’t have good photos, there are plenty that I follow, I’m just less likely to check in as often, and I’m less likely to follow new blogs that have bad photos or poorly composed posts.
Understanding Your Post Space
First thing is first, you must understand the space you’re working with. It’s kind of like how you can’t really buy blinds for your window without first knowing how big your window is-what if your blinds are too small or too big? Man that would look funny.
Most blog editors are going to allow you to customize the size of your posts a little by altering the width in your template design. With blogger (unless you’ve purchased your template somewhere else and it’s preconfigured) you can easily alter it by going to Settings > Template > Customize. Once you’re in the Blogger Template Designer you can click on Adjust widths from the left hand menu and adjust your sliders there. The post size is going to be a combination of how large you set the Entire Blog vs. how large you set the sidebar sliders.
If you feel comfortable enough, this can also be adjusted in the actual HTML-which may be the only way if you’re using a pre-configured template. For help doing so, I recommend checking out this post. Warning: Not all templates will be the same-it may be best not to alter this if you aren’t 100% sure what you are doing-and ALWAYS back up your template before altering the HTML. I have a tutorial for that HERE.
If you’re happy with your blog widths, you can play with the size of your photos in your blog posts to see about what sizes happen to work for you, it will probably differ for other people, but the best tip I have for you is fill the space width-wise as best as you can. For example, I currently use a 750px width as my widest photo in order to best utilize the space in my blog posts. I try to make all photos total up to that size so they line up nicely. I’ll show you how to change that in a moment.
Choosing Photos For Your Post
Adding Photos to Your Post
For blogger simply click on the little picture icon in the editor bar along the top of your post:
For WordPress, click on the Add Media button that typically shows between your title and post:
You can also use your HTML to add the photos. Instead of using the tool that is given to you in your editor, you can use some very simple HTML codes. The first thing you’ll want to do is go into your HTML section (instead of the Compose section) and in the spot you want to put your photos in you can use some of these very basic codes:
If you want to insert an image that is not clickable, either to go anywhere or to show larger, use this code:
Changing the Size of Your Photos
Some blogging editors have a default sizes in pixels for width on horizontal photos or the height on vertical photos, for example the default sizes for Blogger are as follows:
- Extra Large: 640px
- Large: 400px
- Medium: 320px
- Small: 200px
That would mean for horizontal photos setting it to extra large means it would be 640px wide, but a vertical photo would be 640px tall. Same for Large, horizontal would be 400px wide, but vertical would be 400px tall, etc.
To change the photo size, simply click on the photo and from the pop up below it will give you the options to choose from.
Here’s an example of what it looks like. I’ve uploaded this horizontal photo four times. The actual photo is the same size all four times (I made these non-clickable), but using the selection method above I’ve changed it to each different size:
Most of the time the blogger defaults are going to work great for you, and typically the extra large size is going to work great for filling your space. However if your posts are slightly smaller, or slightly larger than the defaults you may need to manually edit the coding. Personally, I upload the photo first, select extra large, then I go in and alter the coding in the HTML section.Here’s the code as it shows normally for my first photo selected at Extra Large:
Since my optimal sizing is 700px wide, I go in and change the width to “750” and adjust the height accordingly. Make sure you change the height too or the photo may look weird and stretched out. I can eyeball it, but sometimes putting it into a photo editor and re-sizing the width there will show you what the height should be, and then you can input the most accurate number. Here’s what my code and photo look like now:
Another great trick, and often a better one if you are concerned with storage space on your photo hosting service is to simply set the photo to the correct size you need before uploading, then tell blogger to just show it at it’s Original Size when selecting the sizing. The only downfall to this is that it wont be able to be seen larger if it’s clicked on.
Positioning Photos
Now you’ve got the sizing down, it’s time to look into positioning photos. The first thing is your alignment. Clicking on the photo (see the example above in changing the size) will also give you the alignment options such as Left, Center, and Right. I typically think that left-aligned text with centered photos look best, but that’s just my personal opinion.
You can also set the alignment with HTML too by using simple Center tags like this:
Or a more complex tag like this:
There are so many ways to position your photos, and it’s super easy to do with wide photos when you just want them to fill the space, but then when it comes to vertical/square photos and putting them next to each other, it can get a bit tricky as you try to keep the widths lined up properly.
For example, when it comes to vertical photos do you want the width to fill like the wide ones do? Or do you want two vertical photos to show side by side? If you want it to fill, both the simple upload method and the HTML upload method work great-all you have to do is go in and alter the width of the vertical photo to match in the coding.
For example, if you simply upload it and set it to extra large it’s not going to fill properly and may look kind of weird like this:
Here’s what that code looks like:
If you want to put two photos side by side then typically the simple uploader is not going to allow them to sit right next to each other. But you can use that uploader and then grab the code from what it uploads to put into your own code, or host the photos somewhere else and just use the code. In this case, you’ll want to break it down by sizing and whether your photos have spaces or not.
For this blog I don’t have any spaces in between photos (my template doesn’t even allow it) so I can simply take my 750px and divide to see how wide my photos need to be. For example, I know two photos next to each other have to be 375px wide each, or three next to each other have to be roughly 250px each to fit right. If you have spacing you’ll want to accommodate your sizing to include those spaces. You can play with widths too-maybe one photo needs to be 370px and the next 380px just on how it fits, as long as they total up to match it’s great!
Here’s an example of what mine looks like with two next to each other:
Here’s the code for that:
You can always play with sizing and setting things next to each other too. Sometimes I want a tall photo next to a short photo (tricky, but possible) like this:
So in this case, my code looks like this:
Are you on your way to better looking photos?
The Better Your Blog Series is a series of posts written by myself, Angie of My So-Called Chaos, from my own personal experience as a long-time blogger, small-business owner, and as someone who’s worked with technology and customer service for many many years. They are written with the intent of sharing the knowledge I’ve acquired through years of practice and education (both self-taught and school-taught) with others in the blogging community.
In this collection of posts you’ll not only find tips for maintaining your blog, but also for anything that goes along with being a blogger and/or small business owner-like design tips and tutorials, social media, tools, and more.
The posts in this series are constantly being updated to make sure they stay current, and the series is constantly being added to. Please contact me if there’s something you’d like to learn.
