MYP Design Digital Image Editing and Optimisation Notes

Resolution Is a Pixel Count, Not a Quality Setting

1. A digital photo is a grid of coloured squares called pixels, and its resolution is how many there are, written width by height, such as 1920 by 1080.
2. That grid is the whole story on a screen, so a 1920 by 1080 image holds 2.07 million pixels of detail whatever number sits in its dpi field.
3. Pixels per inch only matters for print, where it decides how large each pixel lands on the paper.
4. Printing wants about 300 ppi, so a full A4 page needs roughly 2480 by 3508 pixels to print cleanly.
5. Changing a file from 72 to 300 ppi without resampling adds no detail at all, it just relabels the same pixels.
6. A megapixel is a million pixels, so a 12MP phone camera produces around 4000 by 3000.

Match the Pixel Dimensions to the Space It Fills

1. An image shown in a 600px wide column needs about 600 pixels of width, not 4000.
2. Pushing a 4000px photo into a 600px slot makes the visitor download roughly 40 times more data than they can actually see.
3. High density screens pack two device pixels into each CSS pixel, so export 1200px for that 600px column and let the browser display it at 600.
4. Scaling an image down throws pixels away and stays sharp, while scaling up invents pixels by averaging neighbours and goes soft.
5. Always work from the largest original you have and export smaller copies from it.
6. Measure the element in browser developer tools first, then export to that number rather than guessing.

Crop Hard, but Keep the Original Untouched

1. Cropping cuts pixels off the edges, which tightens the composition and shrinks the file in one move.
2. Crop to the aspect ratio the layout needs, 16:9 for a banner or 1:1 for a profile thumbnail, so the browser never has to squash it.
3. Non-destructive editing means every change stays reversible because the original pixels are still sitting there underneath.
4. Keep the master in a layered format, .psd in Photoshop, .xcf in GIMP or .afphoto in Affinity, and export flat copies from it.
5. Switch off "delete cropped pixels" so you can loosen the crop a week later when the layout changes.
6. Save numbered versions, hero-v1 and hero-v2, so your design folder shows the steps you took rather than one finished file that appeared from nowhere.

Layers and Masks: Edit Without Erasing

1. A layer is a transparent sheet stacked over the image, and anything you paint or paste lands on its own sheet.
2. Stacking order decides what you see, because a layer covers everything below it wherever it is opaque.
3. Opacity fades a whole layer, while blend modes such as Multiply change how its colours mix with what is underneath.
4. An adjustment layer applies a change like brightness to everything below it without touching a single original pixel.
5. A layer mask hides parts of a layer rather than deleting them: paint black to hide, white to bring back, grey for a partial fade.
6. Masking a sky out is reversible in two clicks, whereas rubbing it away with the eraser is gone once you close the file.

Levels and Colour Fix What the Camera Got Wrong

1. The histogram is a bar chart of how many pixels sit at each brightness, darkest on the left and brightest on the right.
2. A photo bunched against the left is underexposed, and a spike jammed against the right means blown highlights with no detail left to recover.
3. The Levels tool gives you three handles: a black point, a white point and a midtone slider.
4. Drag the black and white points inwards until they meet the ends of the data and a flat grey photo snaps into contrast.
5. The middle handle lifts or drops the midtones without moving pure black or pure white.
6. White balance rescues an orange indoor shot or a blue shade shot by telling the software which part of the picture should be neutral grey.
7. Saturation lifts every colour equally and turns garish quickly, so make small moves and toggle the layer off to compare.

Exporting for Web Is a Trade, Not a Setting

1. Saving keeps your layered master, while exporting writes a flattened copy in a web format.
2. A JPG quality slider at 100 produces a huge file, and 70 to 80 is normally impossible to tell apart at real viewing size.
3. Every save of a JPG compresses it again, so editing the same JPG five times stacks up artefacts, the blocky halos you see around hard edges.
4. Set a budget before you export, say under 200KB for a content photo and under 500KB for a full width banner.
5. Compare two exports side by side at 100% zoom and look at the hardest areas first: edges of text, smooth skies and flat blocks of colour.
6. Strip metadata on export, because the GPS coordinates a phone writes into a photo should not go on a public site.

Choosing the Format: JPG, PNG, WebP or SVG

1. JPG uses lossy compression designed for photographs, handles millions of colours, and cannot do transparency.
2. PNG is lossless and supports transparency, which makes it right for logos, screenshots and anything containing sharp text.
3. WebP does both jobs at roughly 25 to 35% smaller than the equivalent JPG or PNG, and every current browser reads it.
4. SVG stores shapes as maths rather than pixels, so it stays razor sharp at any size and often weighs only a few KB.
5. Use SVG for logos, icons and flat diagrams, and never for a photograph, which would need thousands of shapes.
6. GIF survives only for short silent loops and is capped at 256 colours, so a short MP4 or an animated WebP beats it on both quality and size.