Best practices in use of images on websites and blogs
Thoroughly updated in November 2020
Types of image elements on blogs, other websites
Images (and other visual elements such as color patterns and videos) are used on websites/ blogs for many purposes:
- Images are used as elements in web designing. They are an essential part of the theme/ template, background, title background, pictorial headers and footers, navigation schemes etc.
- They are put on posts/ articles to supplement the text. They can be featured images, normal images or thumbnails.
- In photo-blogs or photo-features, images are the dominant content of the blog.
- Images are also used for adding secondary visual elements, e.g. favicon, buttons, animations.
- Images also land up on webpages as external content. For example, widgets can show image thumbnails of different articles, slide-shows can similarly represent important posts on blogs. Advertisements, badges of honors and awards, and linked photos present images that are not stored on the website but come from other webpages.
- Colors and patterns are used on websites to create visual variety. The latest versions of web languages, HTML and CSS, can create stunning visual effects.
Website images must serve a purpose
One of the foremost things to keep in mind when choosing images/ colors/ patterns for websites is whether they really add value (if not used properly, they can even reduce appeal and navigation of the website). Also ask, is the image relevant to the subject? Will the picture not reduce readability of text? Does the picture match the overall color scheme of the website? Does it go with the overall personality of the blog?
 |
| nice theme image, but is the text easy to read? |
Usefulness and relevance are especially important for images in the blog’s title bar and background. The image in the title area can increase the appeal 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 background, but does it suit a literature or research blog? |
However, before applying a background to your blog, test it on the questions asked above. 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 stock images and generic themes cannot.
How many and how big images can your blog take?
An important consideration is the number of
images in a blog. The ideal number of images in a blog/ individual post
depends primarily on the overall personality of the blog.
 |
| snapshot of 4 themes suitable for different types of blogs |
The number of images in posts and sidebar also depends on the website's layout and design. At the least, image should not clutter the website. 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.
As said above, images should be put on a website when they would serve a good purpose. Fashion blogs need to have attractive photos of products and models; stacks of books look good on literature/ book review blogs; food blogs need many photos on posts explaining recipes; simple drawings and animations serve a great purpose on kid blogs.
As said above, images should be put on a website when they would serve a good purpose. Fashion blogs need to have attractive photos of products and models; stacks of books look good on literature/ book review blogs; food blogs need many photos on posts explaining recipes; simple drawings and animations serve a great purpose on kid blogs.
Blog posts should have at least one image, 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 but not to the extent that the quality becomes unacceptable. If there are many big-sized images on a page, the page might take a long time in opening on the internet browser. A slow opening webpage irritates visitors and therefore is not liked by search engines.
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. Otherwise, the image might bleed out of the column and look out of place.
Generally speaking, do not have too many big images on 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 on posts, keep a very small number of posts on one web page. Some themes have a feature image option on blog posts, which has to be big and must represent the topic of the post.
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. Otherwise, the image might bleed out of the column and look out of place.
Generally speaking, do not have too many big images on 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 on posts, keep a very small number of posts on one web page. Some themes have a feature image option on blog posts, which has to be big and must represent the topic of the post.
Use of slide shows and animations on websites
You can use a carousel or slide show of featured images on top of the website. You may also like to have a collage or slide show when you have a large number of photos to show on the website/ blog [e.g. after a lovely trip, or steps of a recipe].
Put animations on the website 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 such animations distract. Their freshness also wears out when people visit the website/ blog the second time, and chances are that these elements start annoying after a while.
I would recommend that moving elements are reserved for special occasions. For example, you can put a fluttering flag for a few days during your national day; twinkling stars / glowing lamp flame / color balloons bursting all over the blog around festivals, anniversaries or birthdays; and a slide show of wedding photos after your [if you are too old, your daughter's] marriage.
Image in web design - header images for blogs
It is obvious that title bar is a very important space on a website. On title bar, a graphic, however simple it may be, is usually better than no graphic.
Please keep these points in mind when deciding about the title image:
- 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. Or, you can place an image on one side and title and description on the other side. This is achieved by making one side of the image transparent or merging it with the background.
- Avoid embedding title text into the image, as the text clarity may suffer, and you will have to embed text into image when you change the title image the next time.
- For making the title image wide and thin, use the cropping tool instead of stretching or squeezing an image to fit into the dimensions of the title space.
- Since you need to use text, see that there is an 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, I would rather recommend keeping the title alone; the exception for a simple search box can be made for plain titles with monochrome or white background.
- Since many visitors use small devices (tabs, mobile phones), title images may render differently on them as compared to desktops or laptops. So, when deciding the image for the title bar, test it for mobile devices also.
Image in web design- background images for blogs
The background of a website can be of one color, an image, repeating images or patterns. CSS [a web language] is being used more and more for creating patterns and shades.
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.
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.
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.
 |
| 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 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 backgrounds shown in the picture above, the text is not properly readable because of low contrast between the background and the text or the background with varying shades of colors.
 |
| a bad tiled-background can be a disaster |
You can use repeating images in the background of the website, making a beautiful backdrop 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.
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.
When using tiles as a webpage's background, choose an image with (i) objects that would look fine when repeated, (ii) muted colors and contrast, and (iii) no sharp light or dark objects near the edges. If you like to have ‘white text on dark background’, a dark tiled background may suit you well.
In the background of repeated figurines shown in the picture above, the black and white corners make each tile different and do not allow a smooth transition.
Placement of images in posts and sidebars
In many blogs that we check for directory compilation, we find images going out of the column. I have discussed the size aspect in the previous post and above, and I will only re-emphasize here that images intruding into other columns render the look of the blog highly 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 placed 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 or sidebar].
Alignment of pictures within a blog post or website article is very important. Images can be aligned left, right or center. Your post editor gives you that facility.
Generally, align small 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… But be sure that such effects add appeal and do not look childish.
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.
Images and responsive web design
People browse websites on smartphones more than on wider devices. So, modern websites are responsive, i.e. they respond to the width of the device.
For making images responsive, web designers/ developers write some code that presents the image in a lower dimension when it finds the width of the screen narrower than the image width. In this presentation, the picture gets visually compressed and its aspect ratio (ratio between the width and height) remains the same. This goes well when the picture is of good quality but may pose issues of clarity in these situations:
- When there is text embedded on the picture, it may look very small on small devices.
- When the image has too many details, they might not be visible on small devices.
- When the image looks good on mobile phone but is of poor quality, its defects will become prominent when seen on big screens.
That concludes this series of articles on putting images on websites and blogs the best way. On this link, you can find all ITB articles on website images.
Comments
Post a Comment
We deeply appreciate comments but do not allow comments with links or spam. If your comment is valuable, we publish it and you naturally get a backlink through your profile. Pl do not comment on the same post more than once.