Edit images by cropping and resizing, choose suitable file formats, and compress images so they load quickly while still looking clear

What this dot point is asking

This outcome is about preparing images for the web so they look good but do not slow the page. You should be able to crop and resize an image, choose a suitable file format (such as JPEG, PNG or GIF), and compress images to keep file sizes small. The key idea is the balance between quality and file size. In the written paper you explain cropping versus resizing, file formats and why large images slow a page.

The answer

Cropping and resizing

These two are different:

• Cropping cuts away part of an image to keep only the part you want. It changes what is shown, for example removing a distracting background to focus on the subject.
• Resizing changes the overall size (the dimensions) of the whole image without removing any part. Resize from a corner so the proportions stay correct and the image is not stretched.

You usually crop to improve what is in the picture, then resize so it is no larger than it needs to be on the page.

Why large images slow a page

An image is a file, and the browser must download the whole file before it can show the image. A very large image is a large file, so it takes longer to download, and the page loads slowly, especially on a slow connection. Making images no bigger than needed keeps pages fast.

Choosing a file format

Different formats suit different images:

• JPEG suits photographs. It compresses well, giving small files, which is ideal for photos on the web.
• PNG suits images that need sharp edges or a transparent background, such as a logo. Files can be larger than JPEG.
• GIF suits simple graphics with few colours and supports simple animation.

Choosing the right format helps keep the file small while it still looks clear.

Compressing images

Compression reduces a file's size. For photos, saving as a JPEG at a sensible quality removes detail the eye barely notices, so the file is much smaller but still looks clear. Always check the result: too much compression makes a photo look blocky, so aim for the balance between small size and good quality.

Examples in context

Example 1. A gallery page. A student building a photo gallery crops each photo to its subject, resizes them all to the same display width, and saves them as JPEGs at a sensible quality. The gallery looks sharp and loads quickly because every file is small.

Example 2. A transparent logo. For the club logo with a see-through background, the student saves a PNG rather than a JPEG, because PNG keeps the transparency and the sharp edges, whereas JPEG would add a white box and blur the edges.

Try this

• Cue. Explain the difference between cropping and resizing. (Cropping removes part of the image to keep only what you want; resizing changes the dimensions of the whole image without removing any part.)

• Cue. State which file format suits a photograph and why. (JPEG, because it compresses photos well into small files that load quickly while still looking clear.)

• Cue. Explain why a very large image makes a web page load slowly. (The image is a large file that the browser must download fully before showing it, so a big file takes longer, especially on a slow connection.)