4.2.1
Image files
There is no best image format, only a format that suits the job. Work out what the image contains, whether it needs to scale, whether it needs transparency and where it is going — and the answer picks itself.
On this page8 sectionsHide
What you need to know
- Explain pixel dimensions, and what PPI and DPI actually mean.
- Compare bitmap and vector images.
- Choose a compressed or uncompressed format for a stated use.
Start here
Two ways to store a picture
A bitmap — also called a raster — is a grid of pixels, each one storing a colour. Photographs have complex tone and detail, which is exactly what a grid of pixels is good at. The catch is that the grid is finite: blow it up past the detail it holds and you start seeing the pixels themselves, or blurred edges.
A vector describes objects instead — lines, curves, shapes, held as mathematical information. The software redraws them at whatever size you ask for, so they never pixelate. That is why a logo lives as vector artwork: the same file works on a badge and on a shop-front sign. Embed a photograph inside a vector file, though, and the photograph still has its original limited detail.
| Bitmap / raster | Vector |
|---|---|
| A grid of coloured pixels | Lines, curves and shapes described mathematically |
| Suits photographs and painted texture | Suits logos, icons and diagrams |
| Enlarging reveals the pixel grid | Stays sharp at any size |
| JPEG, PNG, BMP, TIFF | SVG |
How it works
Pixel dimensions, PPI and DPI
Pixel dimensions are how many pixels across and down — 1800 × 1200, for example. More pixels can hold more detail, if the detail was there when the photo was taken. They also take more storage. Adding pixels after capture does not invent detail that was never recorded.
PPI is pixels per inch — the density of image pixels at a given physical size. DPI is dots per inch — the density of printed dots. Related, and not the same thing. In a print job, use the resolution and dimensions the printer asked for rather than a number you half-remember.
Worth doing the sum once
An 1800-pixel-wide image printed 6 inches wide is 300 PPI. Print the same pixels 12 inches wide and it is 150 PPI. Nothing about the file changed — only how far the pixels were spread. Changing the PPI label on its own adds no detail at all.
Learn the list
The formats, and what each is for
Uncompressed means the data was never reduced. Compressed does not mean damaged — lossless compression preserves the image data exactly. And some of these formats support several storage options, so avoid saying every TIFF or every BMP behaves one fixed way.
| Format | What it gives you | What to watch |
|---|---|---|
| JPEG / JPG | Lossy compression, supported everywhere, compact photographs. | Re-saving repeatedly damages it, and it has no transparency. Good for web photographs. |
| PNG | Lossless compression and transparency support. | A photograph will usually be bigger than the JPEG equivalent. Good for screen graphics and transparent assets. |
| SVG | Vector shapes that stay sharp at any size. | Check the receiving application supports it. It is not a replacement for a photograph. |
| BMP | Often stores bitmap data with no compression. | Files get large. Use where an uncompressed bitmap is specifically required. |
| TIFF | Can preserve high-quality data, including with lossless compression. | Often large, and not a normal browser format. Common in print and editing workflows. |
Try it
Which format for this job?
Seven jobs. Each one names the property that decides it — transparency, scaling, download size, print quality.
In the exam
A café logo and a food photograph
Worked answer
4 marks
A café needs its logo on menus and a large window sign, and a photograph of its food on the website. Recommend a file format for each and justify your choice.
Tempting, but this does not score
Use PNG for both because PNG is the best quality format and it will make the logo and the photo look really sharp.
“Best quality” is not a property of a format — it depends what you need preserved. PNG also would not stop the logo pixelating on a large sign, which is the actual problem here.
Worth writing
The logo should be vector artwork, supplied as SVG, because its shapes are redrawn at whatever size is needed — so the same file stays sharp on a menu and blown up on a window sign. The food photograph should be JPEG, because its lossy compression brings the file size down so the page loads quickly for visitors, and a photograph tolerates that compression far better than flat colour and text would. I would check the exported JPEG for visible blocks around the food, and keep the full-quality original as the master for future edits.
Where the marks come from
- Names the property that matters for the logo — scaling — not a general quality claim.
- Ties the JPEG choice to page load time, which is the website’s actual constraint.
- Explains why a photograph tolerates lossy compression when a graphic would not.
- Adds the check and the master, which is what a real workflow does.
The “best format” trap
A format is suitable for a purpose, never best outright. Say what has to be preserved, whether transparency matters, and whether the size suits the delivery route.
Key takeaways
- Bitmaps store pixels. Vectors describe shapes with maths, so they scale without pixelating.
- Pixel dimensions and printed size together give you pixel density.
- Relabelling an image 300 PPI adds no detail. Detail has to be captured.
- JPEG is compact for photographs. PNG is lossless and does transparency. SVG scales.
- “Better quality” is never the whole answer — say what has to be preserved and why.
Glossary
- Pixel
- One picture element in a bitmap image.
- Pixel dimensions
- The width and height of an image in pixels.
- PPI
- Pixels per inch — pixel density at a given physical size.
- DPI
- Dots per inch — printed dot density.
- Vector
- Graphics described mathematically as shapes rather than stored as pixels.
- Transparency
- Areas of an image with no background, so what is behind shows through.
Test yourself
5 questions
Why does a vector logo suit both a badge and a large sign?
The shapes are redrawn at any size, so the edges stay sharp at both.
Does relabelling an image from 72 PPI to 300 PPI create more detail?
No. Without changing the pixels it only changes the relationship to physical size — and resampling cannot recreate detail that was never captured.
Which common bitmap format supports transparency and lossless compression?
PNG.
Give a reason to export a web photograph as JPEG.
Lossy compression makes it small and it is supported everywhere, so the page loads faster — as long as the remaining quality still suits the use.
Is every compressed image lower quality?
No. Lossless compression rebuilds exactly the same image data. Only lossy discards anything.
Common questions
Will saving as a vector format fix a blurry photograph?
No. Vector shapes scale cleanly, but a photograph embedded in a vector file still has its original detail and no more.
Should I always use the largest image I have?
No. Match the pixel dimensions to the display or print size. An oversized image on a web page costs load time and gains nothing visible.