Image width and alignment in long-form content: Best practices?

Question

The website in question is for long-form blog content. The body will include images that users input when they create their blog/content entries, hence the number of images in post is not controllable.

The question is about best practices and the trade-off between aesthetics and readability (readability is the top criterion for us) on what options to offer to end users.

A. Image layout

1. Left-aligned image with text on its right. (The image is 30-50% of blog form width.)
2. Right-aligned image with text on its left. (The image is 30-50% of blog form width.)
3. Center-aligned image with no text is on either side. (The image is 60%-80% of blog form width.)

B. Spacing. What works better?

• 0, 1 or 2 line spaces before above such image blocks?

C. Text formatting

• Some sites now format text in a different size or color when it's on the left or right of an image, for image placement like options 1 and 2, above. Should we do this?

Thanks.

Answer 1

Sounds like you need to sketch this out with pencil and paper, or paper cutouts, or whiteboard. As far as images being place left/right/center - we can't say one is better than another. It depends many factors and I suspect aesthetics might be the driving one.

Note that the location of the images will be harder to change later on, while all the spacing and text styling is fairly simple to fine tune at any point.

Note that technically (implementation wise), the easiest, safest (works in most cases) image location is centered. That will be simpler to scale down to narrower screens, and it's fairly easy to achieve an aesthetically pleasing layout by adjusting the whitespace.