How and where to put images in website or blog for best results

Updated in May 2017
This is the last post in a 3-part series on use of images in blogs. The first post dealt with technical aspects of imaging and the second one was on image properties and editing for blogging purposes. The present one deals with aspects relating to pictures especially from blogging angle.


10. Purpose of picture elements in blogs

Images and other visual elements are used in blogs in these major ways:

1. Photographs, other graphics and videos are put in posts to supplement text. In photo-blogs or posts in the form of photo-features, images are the dominant content and text is used to supplement it.

2. Images are used to enhance overall blog appearance: template/ theme; background; title background; icons, titles, blogger’s portrait and badge/ logo; pictorial headers and footers; animations; flash introductions and navigation schemes; favicon; etc.

3. Images also land up in blogs when they are part of external code: widgets and photo-widgets; advertisements, honors and awards; linked photos; etc.

4. Besides images and videos, colors and patterns are used variously in blogs to create visual variety.

11. Relevance of the image

nice template, but is
the text easy to read?
One of the foremost things to  keep in mind is whether an image will add value or reduce it. Is the image relevant? Does it not reduce readability? Does it match the overall color scheme of the blog? Does it go with the overall personality of the blog?

The question of relevance is especially important for images in the blog’s title bar and background. The image in the title area can increase the appeal and overall value of the blog many times. The image in the background gives a sense of continuity by weaving together various elements, and complements the personality/ mood of the blog.
colorful template, but does it
suit a literature blog?
You will find on the web very fancy templates/ themes that cover the title area and the background. Some of them are really very imaginative. Some websites and blogs have impressive graphics that seem to add great value to the website/ blog. 

However, before applying a background to your blog, test it on the parameters we have mentioned in this post. Please keep two more points in mind: 
  • Only because an image or a theme looks great on someone’s blog does not mean it would look as good on yours. 
  • Your own images and designs give the uniqueness to your blog that generic images and themes cannot.
snapshot of 4 templates
suitable for different types of blogs

12. How many and how big images can your blog take?

An important consideration is the number of images in a blog. As said above, images should not be put there without a good purpose. The ideal number of images in a blog/ individual post depends primarily on the overall personality of the blog. 

The number of images in posts and sidebar also depends on the blog layout and design. A 3-column blog with two narrow sidebars is inherently cluttered; it would look worse if you put many photos in between. Beauty and functionality of many blogs is destroyed by numerous badges and icons stuffed in the sidebar. When the blog has a brightly colored and lively background, there should be fewer images in posts and the images should also go with the overall color theme.

Posts should generally have images, but not too many. If your blog is a fun blog with only small bits of text, you can have a large number of images. In personal blogs, you should sometimes have a photo-feature with a number of photos on a theme [e.g. child, home, a trip, a ceremony, flowers in your garden, party]. Have the photos in good size [500x400 px or so] in a series, tweak or slightly edit one or two, use smart text to integrate them into the theme – and your photo-feature is ready! 

File size is important too. As explained in the second post in this series, convert big images into images of small file size. Even then, big images [say, 600x700 px] will generally be of big file size and if there are many such images on a page, the page might take long in opening in the browser.

Keep image width a few [about 10] pixels less than the width of the column in which you intend to put the image, to allow for indents and margins set for that column.

Unless you have a purpose like the photo-feature mentioned above, do not have too many big images in posts. They unduly elongate posts and make the text look disjointed.  There are many situations when you indeed need big pictures (besides those in photo-features): individual big photos of some memorable occasion; a scenic panorama; a painting that excels in detail; pictorial presentation of a process such as cooking, making  a handicraft or repairing an artifact; fashion and portfolio... If you must put big photos in posts,  keep a very small number of posts in one page.


13.  Use of slide shows and animations

You can use slide shows when you have a large number of photos to show [e.g. after a lovely trip]. 

Do put slide shows and animations after due consideration. Moving images are a big distraction and can irritate and confuse. They also slow down the blog. Use of funky images / animations such as a moving bird or falling leaves make the blog look interesting, but they also distract; their freshness also wears out when people visit the blog many times, and chances are that these elements start annoying after a while. 

We’d recommend that moving elements are reserved for special occasions. For example, you can put a fluttering flag for a few days during the national day; twinkling stars / glowing lamp flame / color balloons bursting all over the blog around festivals or birthdays; and a slide show of wedding photos after your [if you are too old, your daughter's] marriage. 

14. Image in the title bar

It is no-brainer that title bar is one of the most important spaces in a website. A graphic, however simple it may be is often better than no graphic. 

Do keep these points in mind: 

  • Generally, you should place the title image behind the title text [and description too if it can be accommodated] and not above or below the title text. In addition to looking good, this scheme saves precious space.
  • Avoid including title text as part of the title image, as the text clarity may suffer and changing the image would require again including the text in the new image.
  • For making title image, use the cropping tool profusely instead of stretching an image to fit in the unusual dimensions of the title space. 
  • Since you need to use text, see that there is exceptionally high contrast between the text color and the background behind it. 
  • Do not use a picture with varying dark and light areas if you want to place text upon it. 
  • Avoid putting animations and slide show in the title area. 
  • Though some popular themes, especially in Wordpress platform, have a search box in the right corner of the title area, we’d rather recommend keeping the title clutter free; the exception for a simple search box can be made for plain titles with monochrome or white background. 

15. Image(s) in the blog background

As we discussed above and in the second post in this series, size and resolution of the background image are very important. A single image for the background will need to be big and of high resolution. It will need to have dark and light portions such that they are not in conflict with other elements such as text and images in the post and widgets. On the other hand, a supporting image inside the post has to be of small size and can have low resolution. 

For background, blogging platforms usually allow you either to place a single large image or a tile made of repeated occurrences of a small image as a montage. They also allow you the liberty to keep the text column without the background image in it. [Do see this post on how to put a background image on a Blogspot/Blogger blog.]
text readability in different background shades

For putting a single image in the blog background, the free images provided by Blogspot and Wordpress are usually nice enough. However, if you want to use your own image, take a big image [Blogger presently recommends an image of at least 1800x1600 px dimension but less than 300 kb in file size]. See that it does not have too much variation in brightness and contrast. Also make sure that the text you use for posts, titles and links looks clear enough. In the background shown here, there is light sky and dark hill, and the words – especially link headings - are not properly visible.
a bad tiled-background can be a disaster

You can use repeating images in the background, making a beautiful montage behind other elements such as posts and widgets. Since the small image is repeated in a tiled background, it loads faster as compared to a single image of big file size. 

Please note that unless you choose the image with care, a tiled background may mar readability and visual appeal of the blog - the blog might look cluttered and confusing. Choose an image with (i) muted colors and contrast, (ii) no sharp light or dark objects near the edges, and (iii) objects that would look fine when repeated. In the background of repeated figurine shown here, the black and white corners make each tile different and do not allow smooth transition. If you like to have ‘white text on dark background’, a dark tiled background may suit you well. 

16. Placement of images in posts and sidebars

In many blogs that we review, we find images going out of the column. We have discussed the size aspect in the previous post and above and we’d only re-emphasize here that images intruding into other columns render the look of the blog unprofessional. 

Awards and recognitions serve a purpose in blogs, but these are often reciprocation of your appreciation of others’ blogs. Then there are icons for hit counters, copyright, and so on. Not only going by their value, but as visual elements too, such badges should be kept low in the sidebar. If they happen to be too many, they should be brought down to the blog footer or dumped into a separate page [not the homepage]. 

Alignment of pictures within a post is very important. Images can be aligned left, right or center. Your post editor gives you that facility. 

Generally align images left and right, but keep them in the middle when they are big or you want to give them special importance. A range of photos in terms of size and effects can be used to bring in variety. For example, you can rotate a photo by 30 degrees, frame a photo, differently align them… 

Placing of pictures in the top 10” of a blog needs special consideration. We have dealt with this matter in an exclusive post earlier and have discussed images in the title area in a section above. We’d like to repeat that the selection of image(s), their placing, size, shape and quality are much more important for the top 10” of the blog than other spaces. This area is very important and avoid filling it with a big slide show or a video here, unless that serves a special purpose.

17. Giving caption to the image

Unless you want to deliberately avoid caption [e.g. when the image’s content is obvious or when it has been amply described in the accompanying text], you should caption the image. It is a good idea to change font, size, color or slant of text to make it distinct from the body text. Search engines are also supposed to be giving importance to captions.

18. Proper attribution  to the source

You must give proper credit to the source of the image, as mentioned in the beginning of the first post in this series on images, unless you are the rightful owner of the image. We thought, we must end the discussion with this very advice.

Best of blogging! Click here for all image related posts.

                            If you liked the post, you can share it on Twitter: