FILE FORMATS
What if choosing the wrong file format for an image is like trying to play a vinyl record on a CD player — the content is fine, but the format doesn’t fit?
CORE CONCEPT
IMPORTANCE OF FILE FORMATS
KEY KNOWLEDGE
1
JPEG (.jpg): best for photographs. Uses lossy compression (reduces quality slightly to save file size). No transparency support
REAL WORLD EXAMPLE
Almost every photo on your phone is a JPEG. Why? Because JPEG is brilliant at making photo files small enough to send over WhatsApp without taking forever. The trick is that JPEG quietly throws away tiny details your eye would never notice — that is what 'lossy' means. It is like packing a suitcase by leaving behind a few socks each time. Most days you do not notice. But save a JPEG, then save it again, then save it again — and slowly your photo turns into a faded ghost of itself. JPEG is fast and friendly, but it never gives back what it takes.
2
PNG (.png): best for graphics with transparency or when quality must be preserved. Larger files than JPEG
REAL WORLD EXAMPLE
Ever downloaded a sticker for your school project that just had the picture, no white box behind it? That is the magic of PNG. Unlike JPEG, PNG can have see-through parts, so you can lay one picture on top of another and they blend cleanly. PNG also keeps every pixel exactly as the designer made it — no quiet quality loss. The trade-off? Files are bigger. So PNG is the format for graphics, logos, and stickers — anything where the quality and the transparent background actually matter.
3
GIF (.gif): supports simple animation and transparency. Limited to 256 colours — not suitable for photographs
REAL WORLD EXAMPLE
Every funny dancing sticker your aunty forwards on WhatsApp is probably a GIF. GIFs can move — they are tiny animations made of a few frames looping forever. But they are stuck in the past in one way: they can only show 256 colours. That is why GIFs of cartoons, memes, and reactions look great, but a GIF of a sunset photo would look like a poster from the 1980s — flat and patchy. GIF is built for fun, not for beauty.
4
SVG (.svg): vector format for the web. Scalable, tiny file size for shapes and icons. Not for photos
REAL WORLD EXAMPLE
When you visit a clean website on your phone, every little icon — the menu lines, the search magnifier, the shopping bag — is probably an SVG. They load in a flash because the file is just instructions, not pixels. They look razor sharp on every screen. And designers love them because they can change colours and sizes with one line of code. SVG is the secret behind why modern websites feel so smooth, light, and crisp. Once you know it exists, you will spot SVGs everywhere — they are the quiet workhorse of the web.
5
PDF (.pdf): universal document format. Can contain text, vectors, and images. Looks the same on every device
REAL WORLD EXAMPLE
When the school sends you the exam timetable, it always comes as a PDF. Why? Because the school knows you might open it on an iPhone, an Android, an old laptop, your father's office computer, or print it at the local stationery shop — and the PDF will look EXACTLY the same in every single one of those places. PDFs are like a sealed envelope: whatever the designer put inside arrives unchanged. That is why every official document — admit cards, marksheets, government forms, restaurant menus — uses PDF. Reliability, not beauty, is the superpower.
6
WebP: a newer format that combines good compression with transparency support — increasingly used on the web
REAL WORLD EXAMPLE
Have you ever tried to save an image from Google and noticed it ended in .webp instead of .jpg? That is Google's newer format. WebP is like the upgraded version of JPEG and PNG combined — smaller files, transparency support, and good quality. The reason websites are starting to use it everywhere is simple: smaller files load faster, and faster websites keep visitors happy. WebP is what is quietly happening behind the scenes to make the modern internet feel quicker on slow networks.
7
The 'right' format depends on: what the image is (photo vs graphic), where it'll be used (web vs print vs social), and what features you need (transparency? animation? scalability?).
REAL WORLD EXAMPLE
There is no 'best' format — only the right one for the job. Photo of your dog for Instagram? JPEG. Logo for the school fair poster? PNG or SVG. Animated sticker for the class WhatsApp group? GIF. Final report to email to teachers? PDF. Choosing the format is like choosing what to wear — you would not wear a wedding sherwani to play cricket. Match the format to the task, and everything works smoothly. Get it wrong, and you will spend hours wondering why your image looks bad.
8
What if the reason your image looks wrong when you upload it is that you saved it in the wrong format?
REAL WORLD EXAMPLE
Picture this: you make a beautiful logo for your school project, save it as JPEG, and put it on the poster. Suddenly there is a giant ugly white box around your logo. You think it is broken. It is not — JPEG just cannot hold transparent backgrounds. One wrong file format choice has ruined an hour of work. The frustration of 'why does this look so bad' is, nine times out of ten, a file format problem in disguise. Once you know that, you stop fighting your tools and start choosing them.
Pro Connection
Designers specify formats in their exports: “JPEG for the photo, PNG for the logo, SVG for the icon.” Web developers choose formats based on file size and browser support. When someone says “can you send the PNG?” they need the transparent version.
PROFESSIONAL TERMINOLOGY
CLICK TO REVEAL and CLICK TO COVER
The type of digital file an image is saved as — each format has different strengths and best uses
What is
FILE FORMAT
The most common photo format — good compression, slight quality loss, no transparency
What is
JPEG
A format supporting transparency and lossless quality — larger files, perfect for graphics
What is
PNG
A format supporting simple animation — limited colours, small file sizes
What is
GIF
Reducing file size — lossy compression loses some quality; lossless compression preserves it
What is
COMPRESSION
When part of an image has no background — you can see through it. Supported by PNG, GIF, SVG, and WebP
What is
TRANSPARENCY
THE PIXEL ZOOM
Your favourite photo is lying to you — it's not one image, it's millions of tiny coloured lies, all perfectly arranged.
what TO DO
Take any photo on your phone.
Zoom ALL the way in until you can see individual squares of colour — those are pixels!
Screenshot the zoomed view, then screenshot the normal (full) view of the same photo.
Now send the same photo to yourself via a messaging app (e.g. WhatsApp or Instagram DM).
Download the received version and zoom into it at the same level.
Compare both zoomed versions side by side — do you notice a quality difference?
what TO SUBMIT
2 Screenshots | The zoomed pixel view AND the normal (full) view of your original photo — labelled clearly |
1 Screenshot | The zoomed view of the messaging-app (compressed) version |
Text | One sentence comparing the two zoomed versions: "The compressed version looks [more/less] pixelated because [reason]." |
CHALLENGE
DISCOVERY
You can use these SOFTWARES for this Discovery Challenge
FREE SOFTWARE : File Manager, Google Keep, Chrome Browser, Apple Notes / Samsung Notes
PAID SOFTWARE : GoodNotes 6, Notion