Image Manipulation

This post is intended to enable the reader to successfully manipulate digital images for use on web sites and in email messages. After reading, you should understand the terms aspect ratio, portrait, landscape, resolution, resizing and cropping. You should also be able to use Microsoft Photos to crop and resize images, and to change resolution.

The text uses the imperial measures of length feet and inches, because inches are still used as the industry standard, in relation to computer displays. You should know that there are twelve inches in a foot, and an inch is equivalent to 2.54 centimetres. A foot is roughly 30 cm, and a metre is about three feet.

File Formats

Digital images can be represented in a wide variety of file formats such as BMP, TIFF, JPG, PNG etc. Only some of these formats will be compatible with the computer software - such as a browser - designed to render images for viewing.

The file type is expressed in the last few characters of the file name, such as the ".jpg" in "picture.jpg". These last few characters are called the file extension. File extensions are not visible by default in Windows, but in the View tab of Windows File Explorer you can tick a box to reveal them.

It's a good idea to standardise on one file format which you know will work everywhere. JPG and PNG are good choices.

Resolution

Digital images are comprised of a series of dots, each representing a small area of a particular colour. These dots are also called pixels.

Each pixel requires a set of numbers to define its colour, and the more pixels there are, the more numbers are required. This means that images can require large files, depending on how many pixels they have. Large files are unwelcome on web sites and in emails, because they slow down the user's experience and fill up mailboxes. So it's important to get the number of pixels right.

Resolution is defined in pixels per inch.

How things look is determined by the angle subtended at the eye, so your perception of resolution depends on the distance from your eye to the object you are viewing.

If you are sitting at a computer, you should be about arm's length from your screen, whereas you might hold your phone much closer. When watching TV you might sit several feet away from the television. Hence this Full HD 32 inch television has a resolution of 1920 by 1080 pixels:

The 32 inches is the diagonal size of the screen, and we can use Pythagoras's theorem to work out the height and width of the screen as approximately 16 inches high by 28 wide. Dividing these by the number of pixels gives us a resolution of about 68.5 pixels per inch. Every square inch on the screen contains around 4,700 pixels.

By contrast, this Samsung phone has a screen size of 6.8 inches accommodating 3200 x 1440 pixels, with over 500 pixels per inch.

The typical resolution for a computer screen is 72 pixels per inch, whereas a laser printer will probably be set to 300 pixels per inch, since the printed page will be examined more closely. It follows that you should consider the target device when thinking about resolution. The full HD spec of 1920x1080 pixels is common for computer displays, but there are a wide variety of formats. Some of your audience may be using older devices with a lower resolution and a different aspect ratio.

Aspect Ratio

We describe the orientation of a rectangular image as either portrait or landscape, depending on whether the shorter or longer side is horizontal.

 

Whereas a computer screen is almost always in landscape mode, the phone is very often used in portrait mode to read email or browse the web, although the phone can of course be rotated into landscape mode to watch video. So when thinking about deploying images to be viewed on a phone, the width of the image should be less than the shorter side of the phone.

The relative proportions of the long and short sides is called the aspect ratio. In the 1960's television screens had an aspect ratio of 4:3 which was very different to that of a cinema screen. It meant that wide screen movies were often shown in letterbox mode, with blank areas above and below the image.

A modern TV or computer screen has an aspect ratio of 16:9 which is much more like that of a cinema screen.

When you resize an image, it is important to maintain the aspect ratio. If you change the aspect ratio, the image may appear squashed.

Resizing and Cropping

Resizing an image changes the number of pixels used in the image to make it appear larger or smaller:

Cropping selects part of the image:

You may also want to rotate an image through 90, 180 or 270 degrees, particularly if taken on a phone:

If you increase the size of an image, you are likely to degrade the quality of the image and make it look blurred, so this should usually be avoided.

And Finally

A computer or other device will usually ignore the pixels-per-inch when displaying an image, and map the pixels in the image to the pixels on the screen. Web sites using software such as Wordpress will usually set images to be responsive, meaning that the user's browser will resize images to fit on their display, but that doesn't necessarily apply to emails. And if the user's browser has to do a lot of resizing, their experience will be degraded. So it's a good idea to set the image size to be equal to, or close to, the eventual size when rendered on the user's device. Therefore:

• Images which have been captured on camera or designed for print will almost always have too many pixels to be used on a web site or in an email, and should be resized to reduce the size of the file.
• You should usually resize images to set the width at between 200 and 1000 pixels to match the likely size of the user's device.
• Do not increase the size of small images - start with a high resolution image and crop it or reduce its size.
• If your image needs to be a particular shape, crop it to that shape, do not squash it by changing the aspect ratio.
• Images can be stored in a large number of file formats, but only some of those work on most devices. Choose either JPEG or PNG and stick to that format.
• Always test your end product on a variety of devices including phones and tablets.

A Worked Example Using Photos

Microsoft Photos comes free with Windows 10 and can be used to rotate, crop and resize images. You will find it on the start menu under P.

I took this photo using my phone. Having uploaded it to my computer, in Windows File Explorer I can right-click, choose properties and select details to show the characteristics of the file. The photo is 3096 x 4128 pixels and occupies about 5 megabytes.

I wanted to make a masthead for a web page. As a masthead, the shape needs to be a wide strip across the page. I know this would be mostly viewed by PC users, so I decided to make a file 940 pixels wide by 200 high.

The first thing I did was to make a copy of the original file, and called it "masthead.jpg".

I opened this file in Photos:

I used the crop tool at the top of the page to make the image roughly the shape I want, capturing the part of the photo I want to use.

Unfortunately, the software doesn't tell you at this point how many pixels you have selected, so you have to use your skill (and maybe a ruler) to get the aspect ratio you want.

Once this cropped image was saved, I used the Resize tool (from the ... menu at the top right).

I kept the "Maintain aspect ratio" box ticked and entered 940 as the desired width. I can see that will make the height 212 pixels, which is slightly more than I want, which is OK.

I then used the crop tool again to reduce the height a bit, and used the File Information tool from the menu to show me what the file characteristics are now. The file is now 937 x 198 pixels, which is almost exactly what I want.

I then used the Resize tool again, but unticked the "Maintain aspect ratio" box so I could set the width and height precisely to 940 x 200. This produced the final image, shown below. This file is 112 kilobytes which is a reasonable size for the purpose and about 45 times smaller than the original photo.

There are better tools than Microsoft Photos and you may wish to consider The Gimp which is free software, or a commercial package such as the Adobe Creative Suite.