Be able to group and layer images including grouping and ungrouping, moving to the front or back

Topic 12 – Working with Images

Learning Objectives

• Insert, resize, crop, rotate, flip/reflect and adjust basic image properties (brightness, contrast, colour, transparency).
• Reduce image file size by changing resolution, colour depth or using compression.
• Group and ungroup images, lock and unlock objects, and use the Selection Pane/Object Manager.
• Control the layering (Z‑order) of overlapping images – bring to front, send to back, bring forward, send backward.
• Export images in the appropriate file format and understand the difference between embedding and linking (especially for web pages).
• Add alternative text (alt‑text) to images for accessibility.
• Apply these skills in documents, presentations, spreadsheets and web pages – as required by the Cambridge IGCSE ICT (0417) syllabus.

1. Images in ICT – What You Need to Know

An image is a drawing object that can be placed in a document, slide, spreadsheet cell or web page. Once inserted it can be selected, moved, resized and layered with other objects. The core tools are the same across Microsoft Word/PowerPoint, Google Docs/Slides, LibreOffice, etc.; only menu names and shortcuts differ.

2. Inserting and Basic Editing of Images

2.1 Inserting an Image

1. Choose Insert → Picture → From File (or Insert → Image in Google apps).
2. Navigate to the required file, select it and click Insert.

2.2 Resizing

• Drag a corner handle while holding Shift to keep the aspect ratio.
• For exact dimensions open the Size dialog (e.g., Format → Size).

2.3 Cropping

1. Select the image.
2. Click Crop on the Picture Tools/Format ribbon.
3. Drag the black cropping handles to hide unwanted parts, then press Enter or click outside the image.

2.4 Rotating and Flipping (Reflecting)

Action	Menu / Toolbar	Shortcut (Word/PowerPoint)
Rotate 90° clockwise	Picture Tools → Rotate → Rotate Right 90°	Alt > H > G > R
Rotate 90° anticlockwise	Picture Tools → Rotate → Rotate Left 90°	Alt > H > G > L
Flip horizontally (mirror)	Picture Tools → Rotate → Flip Horizontal	Alt > H > G > H
Flip vertically	Picture Tools → Rotate → Flip Vertical	Alt > H > G > V

Google Slides uses Format → Rotate with similar options; shortcuts are not universal, so always check the programme you will be examined on.

2.5 Adjusting Image Properties

• Brightness / Contrast: Picture Tools → Corrections – choose a preset or click Picture Options for custom values.
• Colour / Saturation: Picture Tools → Color – apply colour washes, recolour, or set a transparent colour.
• Transparency (Opacity): In the Format Picture pane, move the Transparency slider (0 % = opaque, 100 % = invisible).

3. Reducing Image File Size

3.1 Resolution (DPI / PPI)

• Screen‑based work: 72 – 96 dpi is sufficient.
• Print work: 300 dpi (or higher) is recommended.
• Microsoft Office: Picture → Compress Pictures → uncheck “Apply only to this picture” → choose the required resolution.

3.2 Colour Depth

• 24‑bit colour (true colour) – high quality, larger file.
• 8‑bit colour (256 colours) – useful for simple graphics, reduces size.
• How to change colour depth (when the Office suite does not expose the option):
  1. Right‑click the image and choose Save as Picture….
  2. Open the saved file in a free editor such as GIMP or Paint.NET.
  3. In GIMP: Image → Mode → Indexed…. Choose “Maximum number of colors: 256” and click Convert.
  4. Save the image (preferably as PNG) and re‑insert it into the document.

3.3 Compression Formats

Format	Typical Use	Compression Type	Best For
JPEG (.jpg)	Photographs, web	Lossy	Complex images where slight quality loss is acceptable.
PNG (.png)	Logos, screenshots, transparent backgrounds	Lossless	Sharp edges or transparency required.
GIF (.gif)	Simple animations, limited‑colour graphics	Lossless (≤256 colours)	Small, simple graphics.
SVG (.svg)	Vector graphics for web	Lossless (vector)	Scalable icons, diagrams.

3.4 Exporting / Saving an Image with Reduced Size

1. Right‑click the image and choose Save as Picture….
2. Select the required format (e.g., JPEG).
3. If the dialog offers a quality/compression slider, set it to the desired level (e.g., “Medium” for a balance of quality and size).
4. Click Save.

4. Grouping, Ungrouping and Locking Objects

4.1 Grouping

1. Click the first image.
2. Hold Shift and click each additional image (or drag a selection box around them).
3. Choose Group → Group (Word/PowerPoint) or click the Group icon on the toolbar.

All selected objects now behave as a single unit – moving, resizing or rotating one part affects the whole group.

4.2 Ungrouping

1. Select the grouped object.
2. Choose Group → Ungroup or click the Ungroup button.

4.3 Locking / Unlocking Objects

• PowerPoint: Home → Arrange → Lock (or right‑click → Lock).
• Word: Open the Selection Pane, then click the lock icon next to the object’s name.
• Locked objects cannot be moved, resized or layered until they are unlocked.

5. Managing Objects with the Selection Pane / Object Manager

• Open the pane: Home → Select → Selection Pane (Word/PowerPoint) or Arrange → Selection Pane (Google Slides).
• Features:
  • Lists every object on the page/slide.
  • Eye icon toggles visibility.
  • Drag items up or down to change Z‑order without using the menu.
  • Rename objects for easier reference (e.g., “Tree‑Img”).
  • Lock/unlock directly from the pane.

6. Layering (Z‑order) – Controlling Which Image Appears on Top

6.1 Terminology

The Z‑order is the stack order of overlapping objects. Objects with a higher Z‑order sit “in front” of those with a lower Z‑order.

6.2 Commands

Command	Effect	Typical Shortcut (Word/PowerPoint)
Bring to Front	Moves the selected object to the topmost layer.	Ctrl + Shift + F
Send to Back	Moves the selected object to the bottommost layer.	Ctrl + Shift + B
Bring Forward	Raises the object one layer.	Ctrl + F
Send Backward	Lowers the object one layer.	Ctrl + B

Shortcut keys vary between programmes; always verify the correct combination for the software you will use in the exam.

6.3 Visual Example (ASCII Diagram)

Before any layering command               After “Bring to Front”

   ▲ Sun                                    ▲ Sun
  / \                                      / \
 ◼─□─◼   (Sun behind house)   →   ◼─□─◼   (Sun now in front)
   │                                        │
   ▼ Tree                                   ▼ Tree

Key:
▲ = Sun (circle)
□ = House (square)
◼ = Tree (triangle)

The same diagram can be used to illustrate “Send to Back”, “Bring Forward” and “Send Backward” by moving the symbols up or down one level.

7. Exporting Images and Choosing the Right File Format

• Export from a document or slide: File → Export → Change File Type (Word) or File → Download → PNG/JPEG (Google Slides).
• When to use each format (see Table 3.3 above):
  • Use .jpg for photographs on the web where file size matters.
  • Use .png for images that need transparency or crisp edges.
  • Use .gif only for simple animated graphics.
  • Use .svg for scalable vector graphics on websites.

8. Embedding vs. Linking Images (Web Authoring)

• Embedding: Image data is stored inside the document/web page file. The image always displays, but the file size increases.
• Linking: The document contains a path/URL to an external image file. The page loads faster, but the image disappears if the external file is moved or deleted.
• HTML example (linking):

  <img src="photo.jpg" alt="A sunrise over a hill">

• True embedding in HTML (rarely needed) uses a data‑URI:

  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="...">

9. Accessibility – Adding Alternative Text (Alt‑text)

1. Select the image.
2. Right‑click and choose Format Picture → Alt Text (or Picture → Alt Text in Google Slides).
3. Enter a concise description (e.g., “A red‑and‑yellow sunrise behind a silhouette of a tree”).

Alt‑text is essential for e‑safety, inclusive design and is part of the IGCSE assessment criteria.

10. Relevance to Different ICT Applications

• Word processors: Insert images into reports, add captions, and control layering for text wrap.
• Presentation software: Use grouping and layering to build complex slide graphics.
• Spreadsheets: Insert charts as images, resize to fit cells, and lock them to prevent accidental movement.
• Web authoring tools (HTML editors, Google Sites): Embed or link images, set alt‑text, and optimise file size for faster page loading.

11. Practical Activity – Consolidating All Skills

1. Open a new blank document (Word) or slide (PowerPoint).
2. Insert three pictures: a tree, a house and a sun.
3. Resize each picture to about 5 cm × 5 cm and position them so they overlap.
4. Crop the sun to remove excess background.
5. Rotate the house 15° clockwise.
6. Adjust the tree’s brightness to make it slightly lighter.
7. Group the tree and house. Use the Selection Pane to rename the group “Tree‑House”.
8. Bring the sun to front so it appears above the grouped tree‑house.
9. Lock the sun, then send the house backward within the group so the tree now overlaps the house.
10. Unlock the sun, select it and reduce its transparency to 30 %.
11. Compress all pictures to 150 dpi, choose JPEG format with medium quality, and save the file as Landscape.jpg.
12. Add appropriate alt‑text to each image (e.g., “Sun with rays shining over a house”).
13. Export the slide as a PNG file for web use and note the final file size.

12. Tips, Common Mistakes & Troubleshooting

• Select the correct objects before applying grouping, layering or locking – the Selection Pane makes verification easy.
• If an object does not move, it is probably locked or part of a group. Unlock or ungroup first.
• When reducing file size, always keep a copy of the original high‑resolution image in case you need to re‑export at higher quality.
• Remember that grouping does not merge images; they remain separate files inside the document.
• Use the Compress Pictures dialog to remove cropped areas and to set a uniform target DPI for all images in a file.
• For colour‑depth changes, use a free editor (GIMP, Paint.NET) before inserting the image.
• Check alt‑text for clarity and brevity – it should convey the same information a sighted user would get from looking at the image.