August 29, 2011

Pictures can make or mar a blog: I - technical aspects

We use pictures in various forms - photos, sketches, paintings, computer graphics, backgrounds and just background colors - on our blog. We believe that they make the blog 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 it looks good?  

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 and unreadable. In a three-part series, Indian Top Blogs discusses the subject from different angles and gives you tips to intelligently put images on your blog. There are three posts in this series; the first one on technical aspects of images, the second one on quality aspects and image processing for blogging, and the last one on matters relating to images 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 not taken by us. 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 coloured 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 colour mixing such as photographs. For simple sketches, cartoons and drawings with a few distinct colours, go for .gif format. Keep the image's file-size as low as possible by cropping 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.

[We elaborate file-size vs. image's visual size below and discuss the tricks of the trade in the next post.]

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. [The present title image in the Indian Top Blog is of 1138x82 px dimension.]

Next: main image attributes and image editing