Blogging tips

Mind your blog pictures

8:00 AM

There is no denying it, a blog post with pictures has more chances to catch the attention of people on social medias. It can also make readers come back for more, provided the pictures are quality.

Pictures can nowadays make or break a blog and if you are lifestyle blogger, you just CAN'T afford to be picture less. Your blog posts must have catchy pictures that represent you, your brand and the topic of your blog. These pictures also need to be formatted and sized to fit your blog. The task of getting your pictures ready to be published on a blog is big and can be a bit time consuming (which is why I get angry when mine get stolen)

I put a step by step guide to get the best out of your blog picture, from picture taking, to publishing, follow my tips and tricks, and you'll never have an odd picture again.

Picture taking and choosing

There is that idea that you absolutely need a digital SLR to take good pictures for your blog. And while, true, it comes in handy for a lot of pictures, you don't have to make that investment right away. Most smartphones have decent to very good cameras these days, and you can achieve a lot with just your phone. 

My best advice is to take pictures often, and build a photo library you can work with. It doesn't matter if you need it now or not, if something strike you as picture worthy, just go snap it. 

If picture taking really isn't your thing at all, DO NOT turn to Google to find one. Because you know, at the risk of repeating myself, Goolge is NOT a free to grab and use photo database. In fact most of it is copyrighted by default, unless stated otherwise on the website it comes from. 
Rely on stock photos instead, there are plenty of free ones you can use without infringing any copyright laws. 

If you really really really like a picture another blogger has taken and really want to use it. Contact them, and ask for their permission first. Then, play nice and give them due credit. This is basic blogging etiquette 101. 

Picture editing and sizing

So, you took your picture, or found one you like in a stock photo database. Your job is far from over at this point. 

All pictures need to be edited and sized, some more than other. What you want is a picture that pops and look the part on your blog. If you have been taking pictures with your phone, they might need a bit more editing than DSLR one, but it is not impossible. The best thing is that you don't even need a pricey software to do it. There are many free apps and web based editors you can use.
I myself work in either Photoshop (not free, but not too costly either, a monthly subscription is 499 rupees), or photoshop express (free on iPad). Find one app you like and learn to use it. 

When it comes to editing, I like saving several variant of the picture using different filters. Because I could be using a picture for something in saturated colours, and a more toned down version for another post. The picture I used for this blog post was initially taken for Instagram and I saved a couple of versions of it.

Once you are done with your editing work, you will need to watermark your picture. Trust me, it reduces the instance of photo theft, so take a few second to add your logo, or your blog name to it. For years I did it in "iWatermark" on the iPad. I now do it in Photoshop using the font I used for the header. 

Now that your picture is looking pretty, don't hit "save" just yet. You want that picture to not be too large so that it loads quickly on your blog. The rule of thumb is that any picture intended for web viewing should be saved at a resolution of 72 DPI (dot per inch). All editing apps will do it by default, and Web based editing tool should either do it by default or offer you the option to do so. Photoshop usually keeps the resolution the picture had when you opened it, so you will need to go change that clicking on the Image tab > Image size. 

Before publishing

So you have your picture, it has been edited and saved and you are writing your blog post, your job is done right?
WRONG or at least partially wrong. 
You see, you need to think about a few blog design things now. And the good new is that most of it can be set once and be applied to every single blog posts you publish in the future without you having to think about it. 
The first thing you need to think about from a design point of view is how uniform your blog look is. One way to achieve it is to have the same picture width on all blog posts. 
The golden rule these days is to have a picture width that fills all or most of the text area width. 
In Blogger, this is achieved by setting the maximum width of pictures using a line of CSS to your template: 

1) Go to template
2) Click on customize > Advanced> scroll down to add CSS
3) Add this code to the CSS text window : 

.post-body img {max-width:655px; 
max-height:auto;}

4)Save your changes. 

Replace the value in red with the width that will suit your blog, on mine, the pictures are all resized to 655 pixels wide if they are wider than that to begin with. 
What you MUST be aware though, is that for this code to work, you MUST select "Original" size in Blogger's post editor when you write the blog post. Otherwise the code will not work on it. This code will apply to past and future posts without you having to do anything else. 

Another thing that can be a bit annoying in many Blogger default templates is the frame and drop shadow it adds to pictures. But there is a way to get rid of it permanently with a little coding as well: 

As you did for the other code, go to Template > Customize > Advanced > CSS and add this code in the box (beneath the other code, or any code you may have in there already) : 


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Save your changes and voila! Frame and Shadows be gone!

Other tips and tricks regarding pictures

Before I conclude on this lengthy post, here are a few other things you can do to optimise your pictures for your blog: 

-Give them a relevant name, this will help boost your SEO. As tempting it is to just leave the series of numbers and letters your camera gave the file, DON'T If someone runs an Image search for let's say a "Cupcake with pink frosting" they are more likely to land on your picture and blog, if you labeled said cupcake picture with its name rather than something as uninspired as "DC 00045"

-If you know what specific width you want for your picture on the blog, start saving all your pictures with that width in mind. Because a file that is 72 DPI in resolution will still be larger and load slower if it is 2000 pixels wide than when it is 700. Beside, you don't want to make picture thieves work too easy by uploading High-res pictures for them to use.

-Keep a certain consistency in your overall blog look by using pictures that all have the same shape. I myself decided on Square pictures, though at time I need something rectangle. This isn't an absolute must, but on a cosmetic level it looks a bit better. The point is to stick to one format and use it as much as possible. 


On these wise words, I'll leave you. If you have any questions, feel free to ask them in comments, I'll get back to you as soon as possible. 


10 comments

  1. YAY! Thank you, Cyn! That ugly drop shadow has been banished from my blog.

    Another thing on SEO I found when you add a photo & the little pop up that asks if you want left, right, center, add caption, etc. & "properties"- if you click on properties you can assign key words or labels to a photo that will make your pic come up on search engines. For instance if you assign "lemon cookies" as a property to a photo if someone image searches for lemon cookies your photo will come up.

    So how do I get a snazzy nav bar with no tacky vertical lines like your pink navbar with home, archives, about me, etc?

    ReplyDelete
    Replies
    1. Dang I forgot to mention the properties thingy in blogger, but yeah it helps SEO too, the truth is half of the time I forget to do it myself, but I found that giving a file name relevant to the content of the picture already helps tons.

      Here is the link to a tutorial to remove those ugly vertical lines in the navbar : http://icanbuildablog.com/2014/07/blogger-remove-menu-border/

      Delete
    2. I sat & read Blogger's SEO page. What a bore. They need to rewrite it in bullet points rather than some meandering vague paragraphs.

      Delete
    3. Most of the Blogger's help articles by Blogger are quite boring, you'd think they would want people to understand the potential of their blog platform quicker, but clearly whoever wrote most of these doesn't have beginners in mind.

      Delete
  2. "As tempting it is to just leave the series of numbers and letters your camera gave the file, DON'T" - this is for me :) I always have to force myself to change the name of my photos.

    ReplyDelete
    Replies
    1. I did it in the past myself, mostly because I used my iPad to do everything and iPads don't let you change names of pictures, then even if I did put a name before putting it in my Dropbox, Blogsy the app I used on the iPad would change it to a series of numbers and letters again...sigh. Now that I have an efficient laptop again, I don't do these things on iPad and always keep the original photo file intact anyway. So when I save as, I might as well give it a name

      Delete
  3. Hmmm... I wonder if this code would work in Wordpress. My newer blog seems to be in better shape, as I have applied all of this knowledge since the beginning. My older blog has a lot of work that needs to be done, to fix it up.
    This is all so helpful. ♥

    ReplyDelete
    Replies
    1. I think the code depends on how Wordpress's blog sections are labelled in the HTML code. These codes use the class names used in blogger.

      The older posts on this blog are still a lot of work in progress, as I changed the picture sizes over the year and never thought of publishing them using the oringial size, back in the days I didn't know anything about CSS and styling your blog, heck in the very begining of this blog I am pretty sure you were stuck with one of the super ugly 4-5 templates blogger had and there was no option to customise them much beyond adding widgets to the side bar.

      Delete
  4. Wow! many tips in a single post. Very useful Cynthia, will bookmark this as I want to try every tip.

    ReplyDelete
    Replies
    1. Yes, it is a guide that covers every steps of pictures taking and using for your blog all in one place. That way there is no need to read multiple blog posts to find all the basics.

      Delete

Follow me on Instagram

Blog Archive