BEGIN How I add pictures in Blogger | Corina's Corner

How I add pictures in Blogger


This is a question I get quite frequently, and since I know how dang frustrating Blogger can be, especially with the location and size of pictures, I thought I'd show you how I insert pictures on my blog. Here we go!

First of all, I always add my pictures first and then add text later. The biggest reason why I do this is because it makes working with the HTML much easier. So blog post step one: Photos.

I upload my pictures like usual (using the little insert image button along the top menu bar).

After they have all finished uploading I make sure they are all selected...

...and add them to the post (by clicking the add selected button).

Once they are all added, I click on them and make them the original size.

(Some people like to size their pictures before uploading them to their blog. I don't do this because I like to use my blog as a place to store pictures, so I want the highest quality photo stored.) Selecting Original Size makes them huge, and the highest quality possible.

Once they are all big, I go to the HTML section (by clicking the HTML button which is located next to the Compose button along the top menu bar), which looks like this:

Once in the HTML section, I carefully delete all of the information I don't need (A few things I don't need: a link to the photo, <a href......</a>, I don't need this because I don't like for my images to be clickable, aka they don't get bigger on your screen when you click on them. I get rid of the top and bottom div tags, but they just always automatically come back, and I get rid of the <br> break tag in between each picture because I don't like how it spaces my photos out. Some people think this part takes a long time, but it's actually pretty fast.)

When I'm finished it looks like this:

Then I go in and add the widths I want to the end of the code for each picture, before the /> at the end. (Like I mentioned before Blogger automatically re-adds the <div.....> to the beginning, and </div> to the end of your post whenever you delete them. It just means that your blog post is it's own section on your blog.)

Picture sizing on my blog is kind of wonky. When I have two pictures I want side by side, I use 311px for each image. Whenever I want it the full width, I use 625px. For most other blogs it will be 640px for the full width, and 318px for side by side. (The side by side number is almost half of the full width number, minus a bit to make room for padding between the images. (You could also put them side by side in photoshop and save the image and upload and insert that way if you wanted to. Again, I prefer not to do this because sometimes after the post is published I want one of those images alone and can't get it without additional work, like if I'm not at home with my regular editing tools).

At first it takes a while, but it is definitely worth it (to me at least) to have a blog that looks good. After the images are the widths you want you can go back into the Compose section and add text where ever you want. (Just a warning though, making text center justified, or formatting the text at all, like changing fonts or colors really makes your HTML code messy. You can do it if you want to, but I prefer to keep my code clean so I can easily read it and edit it if I need to.)

I've been inserting my pictures through HTML for a few years now and I'm really fast at it. I've even gone back and updated a lot of my old posts, so they look good too.

Oh yeah, one more thing, so when you insert an image in blogger, it automatically uploads to a picasa web album, which gives the images a source code that looks something like this:

Near the end, there is a little part that says s800... if you have photos on your blog that are the full width and are portrait (rather than landscape) they might look a little pixelated. I HATE pixelated photos on blogs. I think it looks super unprofessional. If it says s800, you want to change that to s1600, it will make your photo bigger (not in the post, but the link will be a bigger photo) which will make the photo clearer. (You can make it even bigger than 1600, but 1600 is plenty big)

(Click on both links for an example of the size.)

To get to your photos after they are uploaded, you can go to your picasa web albums. I like using Picasa because I have noticed that I have a large amount of storage (and it continually is increasing, as I keep blogging. I have over 6700 pictures on there and most of them are huge files), as compared to Photobucket or Flickr. I don't want to pay for my storage so picasa has been great for me.

That about sums it up. I do that for every single blog post. I know there are like a million ways to do this blogging thing, including how to add pictures to your blog, but this is how I do it. Thanks for reading along! Please let me know if you have any questions!


  1. SO HELPFUL!! Thanks for this! I always struggle with Blogger.

  2. You are an angel for posting this, and for teaching me this when you did :) now if only I blogged enough anymore to put it to good use...

  3. Thank you, Thank you! I have needed this post!

  4. I have been blogging for so many years and had no idea that you could do this. (Here I am wasting my time in photoshop!). Best tutorial I have seen in a long time! Thanks for sharing your knowledge.

  5. Such great information and tips! Thanks for sharing!

  6. i have always struggled with how to do this directly in blogger. i'm usually resizing in picmonkey and it always ends up way pixilated. i'm excited to try this. thanks!! xo


Powered by Blogger.
Related Posts Plugin for WordPress, Blogger...
Back to Top