Images editing basics and tools

Updated in November 2020

This post is second in the 3-part series on the use of images on websites and blogs. The first post dealt with basic considerations in the use of images on the web. The present one deals with image/ photo editing basics. The next one covers the best practices in the use of images on the web.

Let's go!

As a blogger or website content creator, you must know how to edit your photos like a professional blogger. That does not need a high level of expertise, but knowing the photo editing concepts helps a lot. 

Quality of blog images

Quality of images used on websites and blogs depends on a number of parameters taken together. I will talk here of the most important quality factors. 

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 light when taking the photo is very important. Improving brightness through software may not bring the desired results.

Contrast. In images with proper contrast, there is good gradation of shades between total black and total white. Poor quality cameras and older mobile phones cannot capture a range of shades. 

Lighting also has a role in creating the right contrast. Photos taken in low light, e.g. after sunset or in dimly-lit rooms tend to have low contrast.

good picture quality example
London Wheel:
good contrast.
picture quality tip
London Wheel:
poor contrast.

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. For example, photos taken at night using ordinary digital cameras often have yellow-orange hue and those taken with snow all around look bluish.

Saturation. High saturation means you will see bright colors as you see in bright daylight. A fully un-saturated image is gray-black. When the light at the time of shooting a photograph is dim, colors look faded or un-saturated.

Resolution. In digital imaging, resolution refers to the pixel count of the image. Thus, a 10 MP [=megapixel] photo will have around 10 million pixels. If the length : breadth ratio of the photo is 4:3, the 10 MP picture would be around 3400 pixels wide and 2600 pixels in height. 

Since web images are for viewing on screen rather than printing, images in high resolution don’t add to visual quality but make the website slow.

Please also remember that high resolution in terms of MP does not mean high quality. A photo of 50 KB with good brightness, contrast and color rendition can look much better than one of 10 MB if it lacks contrast, brightness and colors.

picture quality parameters
Vibrant colors, details, contrast.

quality of picture depends on many factors
Poor saturation:
grey-shaded, dull colours.

Photography tips for bloggers

This post cannot teach photography, but let us discuss some aspects of photography that bloggers should keep in mind. These small tips will help you understand what to watch when clicking photos for your website or blog (or Facebook, Instagram, etc). 

Some bloggers keep shooting randomly in the belief that at least some photos will come out well. Some think that with photo editing apps available on smartphones, one can remove all blemishes in photographs. However, any good photographer will tell you that taking some simple steps while shooting is much better than trying to improve photographs later, and it may not always be possible to improve photographs using image editors. 

Let's look at the most important points you should keep in mind while clicking a photo: 

  • Composition of photo – This refers to the distribution of different objects in the photo frame. The positioning of the main object is of utmost importance. Try to not include distracting objects. Keep the surroundings clean and not cluttered. If the main object or most objects are looking or moving in one direction, keep some margin towards that direction. Do not keep the main dividing lines (e.g. horizon or roof or a tall pillar) in the middle but place them to a side. Most important, focus on the main object, even in a wide scenery.
  • Focus - However good other things may be, if the photo is out-of-focus, it cannot be improved. Most mobile phones and pocket cameras come with autofocus setting, which takes care of focus as well as lighting etc. However, they cannot help if you have a shaky hand or you move while taking photo or the object is moving fast. So, learn to hold the camera properly and keep your hand steady. Fast-moving objects need a very high shutter-speed and corresponding adjustments. if your hand is shaky or light is not good or you need to use slow shutter speed, use a tripod for holding the camera.  
  • Zoom - Pocket cameras come with some optical zoom but mobile phones usually have no 'optical' zoom. Don't be fooled by the 'digital zoom' available in most mobile phones. What the digital zoom does is to enlarge the image digitally, without adding details. So, generally speaking, digital zoom is of little value. Use it just to exclude distracting objects from the frame while shooting. If optical zoom is available, you can use it for keeping the main object in sharp focus while blurring the surroundings. With low zoom (=wide angle), you can include a large scene in the photo while with high zoom (=telephoto), you can bring out details, especially of distant objects. Expensive cameras now come with multiple lenses with varying degree of focal length (zoom capacity); make use of the correct lens for getting the right amount of zoom. 
  • Light – Nothing is as important for photography as light. You should adjust your camera's settings to the light available. In autofocus mode, which is the default mode in most cameras, the camera adjusts to the average light falling on all objects in the frame, but that can result in washed-out sky or overall dull and unsaturated photo. You can change that to the light falling on the main object, using the camera settings. All mobile phones and pocket cameras come with a number of adjustments, e.g. night light, cloudy day, bright sunlight. Light can also be used creatively for special effects (e.g. color-coated sea or clouds at sunset). If lighting is not good, the least you should do is to keep the main object in proper light. If you cannot help that (e.g. you reached a monument late in the afternoon), adjust the camera's settings; and if even that does not help, take multiple photographs with varying light and exposure adjustments.
  • Resolution – You do not need photos bigger than 0.5MP for most web needs. However, take photos in a higher resolution so that you can crop them to remove distracting objects and improve composition. High-resolution images also give good results when you edit them or apply filters. 
  • Naturalness - Photos should not look artificial, except when you want effects with a purpose. It is better to shoot people with their natural facial expressions and children behaving child-like, not posing for the photo. Do not apply effects unless they have a purpose; even then, apply effects in moderation.
  • Unusualness - While natural shots are credible, shots taken with unusual moods can be highly impactful. Some examples are kids’ and pets’ candid shots, people giving unusual expressions or acting funny in public places, photos taken from unusual angles, photos with unusual lighting and unusual times, and selfies taken from a tangent angle. 

How to edit photos like a professional 

You can use any of the following ways to edit your photos and other types of images (scans, digital graphics, screenshots, web photos, etc). I will explain them one by one. I will also share some good free picture editing software and apps. Before that one small para on why to edit images before putting them on websites, blogs and social networks.

Image editing for the web: why is it important?

As we discussed above, all photos/ other types of images do not have the right amount of light, hue, contrast etc. Image editing can correct such issues. In addition, images can have dark shadows and distracting objects that spoil the composition. Photos taken by hobby photographers or non-photographers also tend to have a lot of clutter: too many objects competing for attention. These undesirable objects can be removed or wiped using image editors. Scans of old photo prints and photographs on newspaper can have ugly-looking grains or spots. Such defects can be removed or minimised with minor effects.  Sometimes you also need to put some special effects, add text or combine 2 or more photos.

Most of the times, just a bit of photo editing helps in a big way in improving the overall quality of images. With the help of photo editors, you can touch up or re-frame photos. When you check the image on an image viewer/ editor before publishing it on the web, you discover defects that you did not realize were there.

Blogging platforms, website builders and social networking / image sharing platforms sometimes have in-built image editors. But usually these have severe limitations and do not do the touching up or editing job properly.

That is why I strongly advise that you check the photo on a wide screen (computer/ laptop/ tablet) before you publish it on your web properties. Next, think how you can make the image better. If you can edit the picture without spending too much time, do that.

Free picture editing software 

     

Photo editor app in the camera

All digital cameras, including those on smartphones, come with image editing software. The better the camera, the more sophisticated the software. In the least, the accompanying software can resize the photo, improve color rendering, correct lighting and so on. Sometimes, the camera can add a smiley or a funny character or text over the photo. 

However, I advise that you use an image editing software and don't do the editing on the camera itself. Of course, you should use the special settings of the camera software while shooting because they are optimized for different lighting conditions, distances, etc.

Image editor and photo enhancer apps on mobile phones

Smartphones come with image editor/ enhancer apps, and you can download one from the app store. Some of them are only for effects, some focused on face touch-up and selfies, a few for text overlay only, and still others for make up (especially suited for ladies' portraits). 

There also are some apps that do almost professional-quality job on the mobile, and I will not hesitate in recommending Snapseed, which is developed by Google labs.

Image viewers with image editor functions

Some popular image-viewing programs that you can download from the web are: Irfanview, Photoscape, Faststone and XnView. All of them do some photo-editing jobs easily and quite satisfactorily: re-sizing, converting for the web, improving light/ contrast/ color, adding text/ border, stitching photos together, and some effects. 

Personally, I use Irfanview for quick photo viewing and basic editing (cropping, resizing, converting to other formats, converting for the web).

Free online image editors

You can do image editing online also, using the online image editors. Paint.net is a powerful image editor with numerous custom features and effects. Fotor is another popular, feature-rich, online image editor.

Free online graphic design software

With these type of software, you can quickly create designs with the use of images, shapes and text. For example, if you have to quote a great personality, you can put his/ her quote over a photo in a creative way and use that on the blog or social networking accounts. CanvaDesignCap and Photojet are some great free pieces of graphic designing suites, with thousands of free images and backgrounds, text styles and shapes. These are freemium products but their free versions have good enough features.

I strongly recommend that if you need to quickly create images in which text message is important, use these free graphic design software rather than going for more advanced image editors: the results will be fast and sometimes even better than the top image editors such as Photoshop.

Free professional image editors, photo enhancers and drawing software

You must have heard about Photoshop. This is the iconic industry-standard image editor, and very difficult to master. It is not free, but an equally powerful free image editor, GIMP is also available. In 2020, a new software Glimpse has been forked from GIMP, which promises to be equally powerful but slightly less difficult to learn.

Krita is an outstanding image software if you want to create digital drawings and paintings. It has numerous features, but it is also not easy to master.

RawTherapy is an enormous piece of free photo editing software, and is especially good for touching and enhancing photographs. Like other professional photo editors, it also is difficult to master.

Paint.net is an online photo editor of professional quality but is less difficult than GIMP and Photoshop. 

Inkscape is a free program of professional standard for creating illustrations, drawings, logos etc. (images in vector format). Also difficult to master.

Image editing basics

Let me give a brief on some useful and easy editing actions:

Cropping: This is one of the most important tools, and a very simple one once you understand its logic. What cropping means is keeping a portion of the original photo and discarding the rest. When you crop an image, you remove some part of it - in a straight line- from one edge.

For example, if you want to get rid of the distracting background in a photo to extract a portrait, you can crop the photo to keep only the person'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 of this tool in other programs.

 
cropping image example
Cropped from the image
of London street above.

Keep these points in mind while cropping images for your blog:

  • Cropping will reduce the size of the image. So, if your image is already a low-resolution picture and you want to bring the cropped image’s dimensions to the original one, you will lose quality.
  • Crop with the final shape and size in mind so that you don’t have to resize the image later on. 

Please visit the linked article if you want to learn details about cropping a picture.

Changing dimensions: You can find the image dimensions by hovering the mouse cursor over the image icon in the desktop/ laptop. You can also find it on Files/ Gallery folder on your mobile phone or windows explorer on the desktop. You can also find dimensions (and other information) of an image by opening it on an image editor or viewer, and then looking for ‘image information’ option in these programs. The dimensions 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, so that you can fit in a sidebar of the blog or make a thumbnail, you will need much smaller width as compared to images that are placed in a wide column. For title bar, you will need very wide photos but with a small height. 

Keep these in mind when you resize an image:

  • Resizing adds or removes pixels artificially in the image, so a drastic resizing might reduce the quality of the image. Avoid increasing the image dimensions, as it always results in loss of quality. If you must do so, do it only by a small percentage.
  • 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].
  • Resizing of images with embedded text blurs the text outline and makes it unclean.
  • When resizing an image to fit a column, keep the width a few pixels less than the column width to take care of indents and margins of that column .

File size reduction: Cropping and reducing image dimensions leads to a reduction in the file size as many pixels are removed from the image. You can also reduce the file size without cutting anything out of it. In that case, the pixels in the picture are artificially 'resampled'- and the resulting picture's quality deteriorates. 

You can reduce the file size by opening a file on any image editor and saving it with lower quality. Image viewers also have this option. 

The file size also depends on the degree of compression of data inside the image. Different image formats have different degrees of compression. A file downloaded from camera is usually very large in size but when you open that in any image editor and save it in .jpg format with 90% quality, you will find a huge reduction in its size but the quality will be as good as the original image.

On Irfanview, there is an option to save for the web. There is a slider to show you how much size reduction has been achieved and what is the resultant quality of the image. 

image editing tools on Irfanview
Irfanview's menus
for common editing tasks.

Image enhancement and corrections: All image editing programs let you correct the image’s brightness, contrast, hue, saturation and other visual attributes but use them with caution. Often, especially in non-professional programs, when you try to improve one aspect, you might lose something else. 

On smartphones, apps do the job of image enhancement even quicker and easier than that on computer software or online software. But, as said above, be sure that the image quality remains good in all aspects.

Do photo touch up or enhancements in moderation.

Value addition in images: Most image editing and viewing 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 so on. As said above, graphic design software do the job of text overlay even better and quicker than professional image editors.

Effects: All image editing programs and apps offer numerous 'effects' that you can apply to the image. 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.

I advise that you do not spoil good images with unnecessary effects. 

Creating computer graphics: You can use an existing image or create one from scratch using brushes in an image editing software. Krita and Inkscape, mentioned above, are outstanding programs for creating wonderful computer graphics.

If you do not want to learn professional programs like Krita, you can use some effects and editing tools (e.g. ‘rotate’ and ‘hue’ in the photo viewing programs) to unleash the artist hidden in you. You can convert a bright hillscape into a thoughtful evening scene so as to put it next to your poem on the blog… scribble graffiti over a fun photo using a free design software …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… Play and experiment but only when that goes with the mood of the blog, specific post, website, or discussion on social networks.

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

Apply effects, enhancements and value addition after [not before] doing proper cropping and resizing.

art using free picture editing software
Eyes!
Created with GIMP.
 Don't forget to visit other ITB posts on use of images on websites and blogs

Comments

Popular posts

Detailed observations on Indian blogging in English

Top literary blogs list: India's best literature blogs 2023 [also other great book resources]

Indian top blog directory 2023 to be released on June 1