How To Position Blog Images On Posts

It’s critical to include multiple images within blog posts. Images draw readers’ eyes and lead them further down the page, as well as help illustrate whatever your points you’re making far better than pure text can.

As a result, blog posts with multiple images tend to keep reader attention and result in higher overall consumption rates. People read more of your post!

And when people read more of your post, they have a far greater chance of getting all the way to the end which where we typically land our most important points, our call to action, and those lovely share buttons which, now that the reader is there and has understood your point, they’re more likely to use.

So more images = more happy readers and more shares.

But what can we do besides just inserting images? What are the options WordPress gives us?

First, a basic image insertion.

Depending on your version/install of WordPress (or other blog platform), clicking on the image should reveal Image Block Settings in the right sidebar of your composer that include:

1. Style (default or rounded)
2. ALT Text (descriptive text for accessibility)
3. Image Size (using your site’s preset sizes)
4. Image Dimensions (allowing you to adjust the size more granularly)
5. Advanced Settings (such as anchor or title attributes)

Those settings will allow you to adjust the basic size and other elements, but how do you actually position the image? Choose the size you wish, and then while you have the image still selected, look to the toolbar above your editing screen. It looks like this on the current version of WordPress:

That icon the arrow is pointing at with three bars is your alignment setting. With your image selected, you can choose and adjust your alignment accordingly. How each appears within your post may vary somewhat depending on what your theme allows.

Here’s “Full Width” for me:

As you can see, my particular theme isn’t designed to be used with this size image AND a sidebar. It works, but it doesn’t look good.

Here’s “Wide Width” for me:

And here’s what it looks like when I align right, after reducing the size of the image a bit.

Once I set the alignment to “Align right” I was able to click to the left of the image and start adding this text!

If you click on an image you’ve already added and aligned left or right, to the left of the alignment button is a button with up and down arrows – this will move your image up or down your document, one block at a time. You can also click and drag.

Once you have sufficient text, it will wrap around your image depending on how large or small it is, and how much text you have!

As you think about what images you might add to a blog post, also consider how you can vary the positioning of your images throughout. Will they all be centered and full width, or perhaps vary left then right then left for a nice eye pattern.

Just make sure that before you even upload the image, you use an image compression tool like TinyPNG.

As you can see in the above examples and virtually every other post within this Blogging Brute website, the images I’m using are photographs I’ve taken myself! I now have a vast library of “stock” images that I own, can use anywhere, and no one else is using. Read, “How To Create Awesome Pictures For Your Blog” next.