We use pictures in various forms - photos, sketches, paintings, computer graphics and just background colours - 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 will be three posts on the subject in 15 days; the first one on some 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
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 problem.
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.]
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 will be three posts on the subject in 15 days; the first one on some 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 problem.
 |
| 100x75 px 1.85 kb |
 |
| 100x75 px 1.23 kb |
[We elaborate file-size vs. image's visual size below and discuss the tricks of the trade in the next post.]
