Picture attributes and image editing tips for web design and blogging

Updated in May 2017
This post is second in the 3-part series on use of images in blogs. The first post dealt with some technical aspects of imaging. The present one deals with major attributes of pictures and simple image editing. The next one is on matters relating to image placement etc inside a blog.

5.  Image attributes 

London Wheel:
good contrast
Image quality depends on dozens of factors. We’ll talk here of some important attributes of quality of an image. 

 1. Brightness. When an image is not bright enough, shadows and poorly-lit areas look too dark. In too bright images, shiny objects lose details and turn white. Manually increasing brightness in an image makes it look whitewashed unless some other attributes are adjusted. Proper lighting during taking the photo is therefore very important; improving brightness using software may not bring the desired results.

2. Contrast. In images with proper contrast, you can distinctly make out one object from the other and see details. but in an image with poor contrast, objects and their details mix up. Photos taken in low light, say at dusk, tend to have low contrast.
London Wheel
in poor contrast

3. Resolution. In digital imaging, resolution refers to the size of the image in pixels. Thus a 10 MP [=megapixel] photo will have around 10 million pixels. If the length x breadth ratio of the photo is 4:3, the 10 MP picture would be around 3400 pixels wide and 2600 pixels in height. Since blog images are generally for viewing on screen and not for printing, images in high resolution don’t add to the visual quality but make the blog slow. 
Vibrant colors, details, contrast

4. Hue. It refers to the underlying color of the image. If a photo is not ‘color balanced’, it will have a tinge that seems to spread over objects whether they are of that color or not. Photos taken at night using ordinary digital cameras often have yellow-orange hue.

Poor saturation:
grey-shaded, dull colours
5. Saturation. High saturation means you will see bright colors as in daylight. A fully un-saturated image is gray-black. Under-exposed photos tend to be un-saturated.

6. Photography and blog images

This post cannot even try to teach basics of photography, but we must say just as a reminder that if you intend to put photographs taken by you in your blog, take care to properly shoot the photo rather than shooting arbitrarily and thinking that you would improve the photo later on. Point-and-shoot digital cameras and mobile phone cameras give you the leeway to shoot as many photos as you can and without much regard to adjustment of various values, but it does not mean that you should not take care of basics of photography. In all cases, you should keep these very basics in mind: 
  • composition of the photo – position of the main object, distribution of objects, framing, including or excluding objects, the main object versus the surroundings, direction of action, placing of imaginary lines that separate main elements such as sea and sky, …
  • focus and zoom - keeping the main object in sharp focus, using zoom to blur background, adjusting camera for moving objects, depth of field [i.e. whether distant and near objects all need to be in focus], …
  • light – abundance of ambient light, time of the day, light direction, lighting of main object versus the surroundings, use of flash, …
  • resolution – Take photos in good resolution so that you can crop them if needed.
  • naturalness - people’s natural facial expressions, caring that photos do not look artificial, …
  • unusualness - kids’ and pets’ candid shots, people in unusual expressions or acts in public places, fun photos, photos taken from unusual angles, with unusual lighting and unusual times, selfies using stick, … 

 7. Editing images  for the blog

With the help of a professional image editing program, you can improve an image’s quality but only if you have long experience with photo editing. Even then, there are chances of the edited picture looking artificial. Therefore, if you want to use photos of a family function or a picnic on your blog, do take care that the photograph is inherently of good quality, as advised above. If you want to put images of your un-mounted paintings, drawings, old letter etc,  scan rather than shoot them.

Note that if an image – mostly a photo – is of poor quality, it is often better to use a different photo rather than wasting time on improving the poor-quality photo. 

For a lay person, we'd advise making use of a free image-viewing program to tweak images before putting them on the blog. These programs have limited editing capability, but that is more than enough for customizing photos and other graphics for blogs. Some popular image-viewing programs that you can download from the web are: Irfanview, Photoscape, Picasa, Faststone, Photofiltre and XnView. Besides, there are a number of online image editors; you need to upload your photo and use the online tools to improve the image.

Before editing your image, make its copy. Do editing only on the copied image, keeping the original intact.

cropped from the image
of London street above
The most useful and easy tools that you should use for image processing are:

Cropping: This is one of the most important and very simple tool in image processing. What it means is keeping only a portion of the original photo and discarding the rest. If you want to get rid of the disturbing background in a portrait, you need to keep only the guy’s face and remove the rest. Let’s demonstrate how you can easily crop a photo in Irfanview. There is ‘crop’ option under ‘edit’ menu. When you select this option and move the mouse cursor over the image, it draws a rectangle. If you feel the rectangle is not OK, you can undo this action and again draw a rectangle or you can stretch the rectangle to suit your need. There are slight variations in other programs in how you can crop the image.

Keep these points in mind while cropping images for your blog: (i) Cropping will reduce the size of the image. So, if you have already a low resolution picture and you want to bring the cropped image’s size to the original one, you will lose quality. (ii) Crop with the final shape and size in mind so that you don’t have to resize the image later on. 

Resizing: Find the image size by either hovering the mouse cursor over the image icon in the computer or looking for ‘image information’ in these programs. The size will be given in width x length form, e.g. 500x300 px. Look for the resizing tool in the image program and resize the image to a smaller size. For small images that you can fit in a sidebar, you will need much smaller image width as compared to images that are placed in posts. For title bar, you will need very wide photos but with small height. Keep these in mind when you resize an image: (i) Resizing adds or removes pixels artificially in the image, so a drastic resizing might reduce the quality of the image. If you are forced to do so, do it in steps, doing about 20% in one go. (ii) Unless you want to distort the image deliberately, keep the width x length ratio intact [e.g. resizing a 2000 x1800 photo to fit in a 210 px sidebar, you should resize it to 200x180 px, not 200x140 or 200x300 px]. (iii) Resizing of image with text in it blurs the text outline and makes it unclean. (iv) Avoid increasing the image size, as it always results in loss of quality. If you must do so, do it only by a small percentage. (v) When resizing image to fit a column, keep the width a few pixels less than the column width so as to take care of indents and margins of that column.

Irfanview's menus
for common editing tasks
All these programs let you correct the image’s brightness, contrast, hue, saturation and other visual attributes, but use them with caution. Often, especially in these non-professional programs, when you try to improve one aspect, you might lose something else. 

These programs also give you the facility to write text over image, make collage of many images, rotate images, put border and frame around an image, make thumbnails and icons, and give numerous 'effects' to the image. While we cautioned you against experimental editing for improving an image, we’d rather encourage you to play with ‘effects’. These effects allow you to make a piece of art out of your photos in a few simple steps. In Irfanview, these effects can be found under the ‘image’ tool. Apply these effects after [not before] doing proper cropping and resizing.

8. Computer graphics for blogs

You can use an existing image, take an ordinary photo of people or objects, or create one from scratch using brushes in a program such as Paint [in MS Office] to create wonderful computer graphics. You need not be a professional image editor and you need not use professional programs; the ‘effects’ and some editing tools such as ‘rotate’ and ‘hue’ in the photo viewing programs mentioned above will bring out the artist hidden in you. You can convert a bright hillscape into a somber evening scene to go well with your poem… scribble graffiti over a fun photo…twist your own face to show how angry you are with corruption in the society…turn your walking photo by 90 degrees to look like walking on the wall…

Take care that you do not manipulate people’s or national symbols’ photos to the extent that it invites criticism and legal action.

9. Saving images for the web

Save images for the web in web-friendly formats (mentioned in the first post on using images in blogs), and not in other formats. Please note that when you save images in these formats after editing again and again, their inherent quality goes down.

Next one: image placement, etc in the blog
All posts relating to pictures, including editing tools, image sizes for social media and text on images.