Properly Size Images to Compliment Your Blog’s Design
To properly incorporate images into your blog’s design, you need to consider such restraints as load time, column size, word flow, and design elements. You need images to add visual appeal, but you don’t want them to appear so large they cover the very information a visitor was hoping to find.
Size images to fit your column design
Before you even insert images into your blog post, edit the image size in your photo-editing software so that the image fits within the column of your blog post. If your column width is 600 pixels (px) but your original image is 800 px, the image stretches into another column, like you see here.
As a fix, you could resize large images within your blog post − but, you affect your blog’s loading time because you still uploaded the original size. Only make small sizing adjustments within your blog. You should adjust image sizes outside your blog using photo-editing software.
As a starting point, size photos to the width of the blog post. Then resize as needed, such as for portrait-oriented photos. For example, if the shorter side of a portrait-oriented photo runs the entire blog width, the photo would be gigantic. So always resize those.
On the other end of the spectrum, bloggers often makes the mistake of using teeny-tiny images in their blog posts, which detract from your overall blog design and decrease the image’s ability to make a statement. Your readers actually want to see your images, so make them large enough to see!
Decide whether to wrap text around images
Some bloggers prefer to wrap text around their images. This comes in handy if you want to show a smaller image like a headshot as part of a bio or an icon that should accompany a piece of text. Whether you do that for your other images is really just a matter of preference.
In most blogging platforms, wrapping text simply involves selecting an available wrapping style when placing an image into a post. You (or your designer) can adjust how much space to use between the image border and the text by making adjustments within your cascading style sheet (CSS).
Don’t cram too many images together
Avoid wrapping text around images in a way that produces a jarring effect. For example, when two images in close proximity wrap on different sides of your blog post, content can become cramped between the images, making your blog post hard to read.
Keep images within your post further apart to fix this type of problem, or align images to a certain side. Check your blog post layout in preview mode before you publish to ensure that your images don’t hinder readability.