Information and Communication Technology (0417) | Place and edit an image

Welcome to Section 12: Placing and Editing Images!

Images are essential in almost every ICT solution, from websites to presentations and documents. If you don't know how to place and edit them correctly, your work will look messy or unprofessional.

In this chapter, we will master the practical skills needed to integrate pictures seamlessly, ensuring they look perfect and don't take up too much file space!

Quick Review: Why Image Editing Skills Matter

Precision and efficiency are key. In your practical exams (Papers 2 and 3), you must demonstrate that you can modify images exactly as specified, often down to the exact pixel size, and ensure your final files are optimised (small file size).

1. Placing and Resizing Images

When you work with images, the first step is placing them correctly and ensuring they are the right size.

1.1 Placing an Image with Precision

Placing an image with precision means putting it in the exact location required, often relative to other elements like margins, paragraphs, or other objects.

• In web authoring (HTML/CSS), precision is achieved using size attributes (like height and width) and layout properties (like float or padding).
• In document production (Word Processing), precision involves setting the image's wrap style (e.g., Square, Tight, Above/Below) and anchor point.

1.2 Resizing and Aspect Ratio

When you resize an image, you change its dimensions (width and height). The biggest mistake students make is distorting the image!

The Aspect Ratio is the proportional relationship between an image's width and its height. For example, a 4:3 image means the width is 4 units for every 3 units of height.

The Golden Rule of Resizing:
Always maintain the aspect ratio unless you are specifically told to change it.

Analogy: Imagine an image of your face. If you only increase the width (without maintaining the ratio), your face looks stretched out and unnatural. To maintain the ratio, you must resize both the width and height proportionally.

In most software, you maintain the aspect ratio by holding down the Shift key while dragging a corner handle, or by selecting the 'Lock Aspect Ratio' option in the image formatting menu.

Key Takeaway for Placing & Resizing:

Always aim for the precise position and dimensions, and protect the image's aspect ratio to prevent distortion.

2. Essential Geometric Edits

These tools help you adjust the shape or orientation of the image without changing its size fundamentally.

2.1 Cropping an Image

Cropping is the process of removing unwanted outer parts of an image.

Example Use: If you take a picture of a friend but the background is distracting, you can crop the image to focus only on your friend. This reduces the visual noise and sometimes improves the composition.

2.2 Rotating an Image

Rotating means turning the image around a central point. Common rotations are 90 degrees clockwise, 90 degrees anti-clockwise, or 180 degrees (upside down).

2.3 Reflecting (Flipping) an Image

Reflecting or Flipping creates a mirror image of the original. You can reflect an image in two ways:

• Reflect Horizontally: Flips the image across a vertical line (like looking in a mirror). Left becomes right.
• Reflect Vertically: Flips the image across a horizontal line (like viewing a reflection in water). Top becomes bottom.

Common Mistake: Students often confuse rotation and reflection. If an image needs to face the other direction (e.g., a person walking left now needs to walk right), you reflect horizontally, not rotate.

Key Takeaway for Geometric Edits:

Cropping removes excess content; Rotation changes the orientation; Reflection creates a mirror image.

3. Adjusting Appearance and Colour

You can modify the visual quality of an image using basic colour and light controls.

3.1 Adjusting Brightness

Brightness refers to the overall lightness or darkness of the image. Increasing brightness makes the whole image lighter; decreasing it makes the image darker.

When to use it: If an image was taken in poor light and looks too dark.

3.2 Adjusting Contrast

Contrast is the difference in colour and light intensity between the brightest parts and the darkest parts of the image.

• High Contrast: Large differences between light and dark (colours appear vivid and sharp).
• Low Contrast: Small differences between light and dark (the image looks dull or washed out).

When to use it: If your image looks dull, increasing the contrast will make the blacks blacker and the whites whiter, adding punch to the colours.

4. Working with Layers and Grouping

In complex documents or presentations where objects overlap, you need to manage how they interact.

4.1 Layering (Moving to the Front or Back)

Imagine you are stacking physical photos on top of each other. The order in which they are stacked is the layering order (or Z-order).

When you have overlapping images or shapes:

• Move to the Front: Brings the selected object to the very top layer, covering everything else.
• Move to the Back: Sends the selected object to the very bottom layer, being covered by everything else.

4.2 Grouping and Ungrouping

Grouping allows you to select several individual objects (like an image, a text box, and an arrow) and treat them as a single unit.

Example: If you create a logo using text and two images, you should group them together. Now, when you move or resize the group, all three items move and resize simultaneously, maintaining their relative positions.

Ungrouping reverses this process, allowing you to edit the individual components again.

Key Takeaway for Layers:

Layering controls visibility when objects overlap. Grouping makes multiple objects behave like one object for movement and resizing.

5. Reducing Image File Size (Optimisation)

This section covers theoretical knowledge, often tested in Paper 1, about how to make images smaller for storage or transmission (e.g., loading quickly on a website).

To reduce the file size of an image, you must reduce the amount of data it stores. The two main ways to do this are by changing the Resolution or the Colour Depth.

Important Note: Reducing the file size in these ways usually results in a reduction of image quality.

5.1 Reducing Image Resolution

Resolution is the number of pixels (tiny coloured dots) used to display the image, measured in DPI (Dots Per Inch) or PPI (Pixels Per Inch).

• High Resolution: Lots of pixels (e.g., 300 DPI). Good for printing; very large file size.
• Low Resolution: Fewer pixels (e.g., 72 DPI). Good for websites/screens; small file size, but looks blocky if enlarged.

How it reduces file size: If you halve the number of pixels, the file size becomes much smaller because the computer has less data to store for the image.

Did you know? Most computer monitors only display images at around 72 DPI, so saving an image at 300 DPI for a website is a waste of file size!

5.2 Reducing Colour Depth

Colour Depth is the number of bits (1s and 0s) used to store the colour information for a single pixel. More bits mean more possible colours.

• 24-bit True Colour: Stores over 16 million colours (realistic photos).
• 8-bit Colour: Stores 256 colours (good for simple graphics).
• 1-bit Colour: Stores only 2 colours (black and white).

How it reduces file size: If you reduce the colour depth (e.g., changing a 24-bit image to an 8-bit image), you drastically reduce the number of bits needed for *each* pixel, making the overall file size smaller. This can lead to visible colour banding or posterisation if the image is complex.

Key Takeaway for Optimisation:

To reduce file size, you must reduce the number of pixels (Resolution) or the number of available colours (Colour Depth). Both trade quality for size.