If you are a new blogger or are struggling with a blogging issue, I might be able to help you.
Please send details of your problem to kpnd@indiantopblogs.com. Pl do not make generic queries (e.g. how can I start a blog or why am I not getting traffic on my blog). Please do not spam with many queries.

Images on websites [and blogs]: editing basics

Updated in September 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 image concepts. The present one deals with major properties of pictures and image/ photo-editing basics. The next one is on matters relating to best practices in the use of images on the web.

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

Let us start with the main properties of digital images:

What determines the quality of a picture?

A picture, especially a photograph, looks good or bad depending upon dozens of factors. We’ll talk here of some of them. 

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 to 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.

photos for websites and blogs
London Wheel:
good contrast.
Images for websites
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 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.

How to put images on websites and blogs
Vibrant colors, details, contrast.

Image on blog
Poor saturation:
grey-shaded, dull colours.

Photography and blogging

This post cannot teach photography, but let us discuss some aspects of photography that you should keep in mind if you take photos for your website or blog (or Facebook, Instagram, etc). 

Some people keep shooting without caring for the basics in the belief that at least some will come out well. Some think that photo editing can remove all blemishes in photographs. I will advise that you should try to shoot photos as perfectly as you can, taking care of the following: 

  • 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 and 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.
  • 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). The least you should do is to keep the main object in a 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 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 only rarely.
  • Unusualness - While natural shots are credible, shots taken with unusual moods can be highly6 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 your photos like a professional blogger?

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 image editors. 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. In addition, images can have dark shadows and distracting objects. Photos taken by hobby photographers or non-photographers also tend to have a lot of clutter: too many objects competing for attention. Sometimes you also need to put some special effects, add text or combine 2 or more photos.

So, in most cases, photos and scans etc need a re-look before they are put on websites or blogs. With the help of photo editors, you can touch up or re-frame photos. Sometimes checking the photo on a photo editor shows that the photo is unusable (e.g. a very low resolution picture cannot be used as background image as it will pixelate, or a photo of patterns is not good as background behind text as it hurts readability).

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. It will improve the overall quality of your website/ blog.

Free image editors

     

Photo editor available with the camera

All digital cameras, including those on smart phones, 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, improve 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.

Image editor and photo enhancer apps on mobile phones

Mobile phones come with an in-built image editor/ enhancer, and you can download one from the app store if you have a smart phone. 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 some editing features

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 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 put that on any social media or web entity. 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.

Free highly-professional image editors and drawing software

You must have heard about Photoshop. This is 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 very easy to master.

RawTherapy is an enormous piece of free photo touching software, but is difficult to master, like GIMP and Photoshop.

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. but is difficult to master.

Common image editing actions: getting the best out of them

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

Cropping: This is one of the most important and very simple tool in image processing. What cropping means is keeping a portion of the original photo and discarding the rest. If you want to get rid of the distracting background in a photo to extract a portrait, you need to 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 in how you can crop the image.

 
Quick image editing tips
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 you have 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 that you can fit in a sidebar of the blog, 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 text in it 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 reduce the file size by opening a file on any image editor and saving it with less quality. Some image viewers also have this option. 

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 tips for bloggers
Irfanview's menus
for common editing tasks.

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.

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. Graphic design software (3 free ones listed above) do the job of text overlay even better and quicker.

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 and do not apply effects indiscriminately to all images that you put on your website or blog. 

Creating computer graphics: You can use an existing image or create one from scratch using brushes in an image editing program. 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…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 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.

Photo editing tips for blog
Eyes!
Created with GIMP.
 Don't forget to visit other ITB posts on use of images on websites and blogs