Pictures can make or mar a blog: use them creatively for best impact

Updated in May 2017
On websites/ blogs/ social media accounts, we use pictures in various forms - photos, sketches, paintings, computer graphics, backgrounds and just background colors. We believe that images make the website beautiful and add value to it.  But, do we ask what, which, how many, why, how and where before putting images or we just put a photo there because a photo is better than no photo?  

Let's focus this discussion on blogs. If we use a picture on the blog with due consideration to various factors, the picture will definitely give great value to the blog; otherwise, it might even make the blog unattractive, add clutter or reduce the readability of blog. 

In this 3-part series, Indian Top Blogs discusses the subject from different angles and gives you tips to intelligently put images on your blog. The first post is  on technical aspects of images, the second on quality aspects and image processing for blogging, and the last one on matters relating to image placement etc inside a blog.

This post is devoted to technical aspects of images in layman’s terms.

Picture, image and graphic have been used interchangeably in this series of posts.

1. Which image?

The first thing to consider while using an image is whether we have the authority to use it. Bloggers often use photographs taken by them on their travels, on growing kids etc, but some also copy photographs from the web and routinely paste them in their blogs. We tend to use photos from the web, on news-events, celebrities and products, without caring to find whether these pictures are copyright protected. Even if the suspicion comes to our mind, we shrug it off thinking that the photos on the web are of generic nature and it cannot be proved that the photo [e.g. of a demonstration] was taken by us or not. We even use graphics that have been prepared by someone with effort and are not of generic nature. 

Please remember that for copyright protected images, we need to seek permission of the owner and pay royalty to him/ her before using them. This is why we have put this as the first point for consideration before using a picture.

2. Image types, formats and file sizes

the letter 'O'-
made of pixels

Digital images are of two main types. The first one is structured the way you see letters in a Word file.  You scale an alphabet 100 fold and it still looks as clear. Such images are called vector images. Others are the normal types, which are made up of small dots called pixels. If you scale these images beyond a point, they look pixelated – made up of tiny colored squares. We’ll talk of this type of images here, technically called raster images

Digital images come in different file formats such as .bmp, .raw, .tif, .jpg, .png and .gif. Cameras usually store photos in .tif, .raw and .jpg formats; .png, .jpg and .gif are the most common formats of web images. 

File-size is the space an image takes on the computer or website. Files used by professional photographers and photo editors are much bigger in file-size because they contain extra information that does not add significant value to images in their display on computer / mobile screen. On the other hand, web images need to be small in file-size so that they load fast on the browser. It is possible to convert a camera photo of 10 megabytes into a medium-quality .png or .jpg file of 100 kilobytes [100th in file-size!]. On a slow internet connection, the 10 mb photo would make your website hang for ever [no blogging platform as of now allows posting a photo of this size], while the 100 kb photo will open without much problem.
100x75 px
1.85 kb
100x75 px
1.23 kb

So, for uploading on the web, save images in .png or .jpg formats if they have a lot of color mixing, such as photographs. For simple sketches, cartoons and drawings with a few distinct colors, go for .gif format. Keep the image's file-size as low as possible by cropping (=cutting from sides) and re-sizing the image and saving it at a low but acceptable quality. We have put here five pictures that look almost the same in quality and visual size, ie. 100x75 pixels. Notice, their file-sizes range from 1.23 kb to 13.83 kb.

100x75 px
13.83 kb
100x75 px
11.89 kb
100x75 px
6.18 kb

3. Image sizes

The visual size of the image is measured in pixels, not bytes. A square picture of 1000x1000 pixel size is 100 times as large as a picture of 100x100 pixels at the same screen resolution of the computer monitor. To check the size of an image on a website, right click on it and you will find 'image information' option. If your browser does not permit that, save the picture in your computer and find it by hovering mouse cursor over the picture's icon or right clicking the icon.

Re-size images using an image viewing program [or if you are comfortable with that, an image editing program] and not leave it to the blog platform to do it for you. You will have much more control on editing if you do it on your computer rather than on the blog. [Some blog platforms now allow you to use an online picture editing tool, and it is good enough for blogging purposes.] As we'll tell you later, these simple edits can improve the quality of pictures and reduce their file-sizes remarkably.

4. Image shapes

Coming to shapes, different web spaces demand images in different shapes. 3x2, 4x3 and 5x4 rectangles are the commonly used image shapes but the final shape would depend upon the dimensions of the space in which you are placing the image, isn't it? A big background image covering the screen may need to be much wider than tall. The photo for the blog title background will need to be a thin strip, about 1000 px wide but only 80-200 px high.

Next: main image attributes and image editing

All image related posts on ITB including image editors, social media image sizes, alt attribution for SEO, and use of text in images