Did you know that the same colourful school photograph can look excellent on a website as a JPEG or WebP file, while a tiny school logo may look sharper as an SVG? Meanwhile, turning a text-heavy diagram into a highly compressed photograph can make its labels ugly even when the uploaded file looks small. Choosing a picture is not only about appearance. The words naming its file format explain how that image is stored, displayed and reused.
Here is a practical first choice. Use JPEG as a familiar photographic format when some lossy compression is acceptable; PNG when lossless reproduction and possible transparency are valuable for a screenshot or line diagram; SVG for trusted vector artwork such as scalable icons or logos; and WebP for web images that may benefit from efficient lossy or lossless compression, including transparency where needed. There is no universally best extension. Choose for the content, requirements and software that will open it.
This vocabulary helps Primary pupils submitting multimedia projects, Secondary learners building school-club sites, and teachers preparing online resources. It also belongs to adult communication: an image can carry words, evidence and accessibility information, so the wrong representation may weaken the message even if the design looks exciting on the editing screen.
One school website, four jobs for pictures
Imagine a fictional student team preparing a website for its reading festival. The site needs a photograph of the library, a small club logo, an image of a timetable and a colourful banner. A pupil says, “Save everything as JPG because JPG means picture.” Another pupil says, “PNG is always better because it is higher quality.” Neither rule considers what each file contains or how the website will use it.
A better plan begins with function. The library photo has many colours and continuous tones. The club logo has clean shapes that may appear at several sizes. The timetable contains small letters and thin lines that must remain legible. The banner might be served as an efficiently compressed web image with an appropriate fallback. Different files can meet different needs, and quality must be judged on the actual output.
What does the file extension say?
A filename such as library.jpg has a file extension, the suffix after the last dot. It commonly signals a particular format or file type. .jpg and .jpeg are common extensions for JPEG; .png is a PNG; .svg is an SVG; and .webp identifies WebP. These names are abbreviations of technical standards, not labels such as “good”, “bad”, “professional” or “beginner”.
Changing the text from photo.jpg to photo.png does not convert the image. It merely renames the file unless a programme actually decodes and re-encodes the contents. To convert a format, use a trusted editing or conversion tool and inspect the result. This is a useful distinction between rename and convert, two verbs that can lead to very different outcomes in digital work.
The MDN Image file type and format guide explains the capabilities, browser support and trade-offs of commonly used web image formats. It does not recommend a single extension for every job. Rather, image format should be chosen according to visual content, compression, transparency and compatibility.
JPEG: efficient photographs with a trade-off
JPEG is widely used for still photographs. Its familiar form uses lossy compression, meaning that the saved representation discards some image information to reduce data size. In many natural photographs, moderate compression can look very good. The trade-off becomes more noticeable around tiny text, hard edges, diagrams and repeatedly re-saved images.
The adjective lossy is not the same as “broken”. Lossy compression can be appropriate when the resulting visual quality suits the purpose. Nor does JPEG necessarily make every file smaller than every PNG; the outcome depends on the actual image and encoding settings. A child can test two formats with the same photo and compare both file size and appearance instead of reciting a fixed ranking.
JPEG ordinarily does not support an alpha transparency channel. If a student needs a logo with transparent areas so that the website’s background shows through, JPEG is not the natural first choice. A plain rectangular photograph usually does not need transparent regions, so that limitation may be irrelevant for the library photo.
PNG: sharp screenshots and lossless representation
PNG commonly uses lossless compression. In this context, lossless means that decoding reconstructs the encoded pixel information exactly, rather than discarding some information as a conventional lossy JPEG does. PNG also supports transparency, including partial transparency with alpha information. It is often a useful choice for screenshots, text labels and simple line diagrams.
Lossless is a statement about the compression and reconstruction of the saved file, not a promise that the original source was perfect. A blurry screenshot saved as PNG remains blurry. A low-resolution icon enlarged many times remains limited by its pixel dimensions. A pupil must distinguish format, resolution and source quality rather than imagine that a three-letter extension repairs an image.
A school timetable screenshot with small letters may develop visible compression artifacts if encoded aggressively as JPEG. PNG can preserve crisp pixel boundaries better, but it may produce a larger file for a photographic scene. Students should compare legibility, clarity and file size under the conditions in which classmates will actually read the timetable.
SVG: instructions for drawing shapes, not a grid of pixels
SVG stands for Scalable Vector Graphics. Rather than relying only on a fixed grid of coloured pixels, SVG describes shapes, paths, lines and other vector elements. A simple school-club logo made of clean curves can be drawn at several display sizes without becoming blocky in the way an enlarged small bitmap may. This makes SVG useful for trusted logos, icons and diagrams whose shapes should remain sharp.
Vector refers to geometric descriptions rather than the pixel-by-pixel representation typical of raster image files. The useful comparison is not “vector is always best”; a detailed photograph contains complex texture and colour that is normally better suited to a raster image. SVG can also incorporate raster imagery, so a file having the SVG extension is not proof that every element in it is a clean vector drawing.
There is an important security distinction. An SVG is structured document content and can include features more complex than an ordinary photo. Some platforms restrict or sanitise SVG uploads. Students should only use trusted, appropriately processed files and follow their site’s upload policies; do not bypass security checks to make an SVG work. A PNG export of a verified logo may be a sensible fallback when SVG is unsupported or disallowed.
WebP: a format designed for useful web trade-offs
WebP supports both lossy and lossless compression, as well as transparency and animation in suitable files. Its flexibility makes it a useful option for web delivery. Google’s WebP format documentation describes its compression capabilities, while the web.dev image performance guide explains why efficient images can reduce transfer size and improve loading performance.
Do not interpret “WebP” as an automatic promise that every WebP file is smaller than every JPEG or PNG. The source image, encoding quality and desired visible result matter. Nor does every office application or older workflow support every modern format equally. A school sharing resources with families should verify that the chosen system displays and downloads the files reliably.
Modern browsers widely support WebP, but a website can still use compatible alternatives where its audience or software requires them. The MDN format guide discusses fallback delivery. The important word fallback means an alternative used when a preferred version cannot be used; it does not imply the original file was incorrect.
Four scenarios, four decisions
Scenario A: A student takes a photograph of the library’s bookshelves. It contains subtle lighting and many colours. JPEG or appropriately encoded WebP is worth testing. Compare real visual quality and size; no rule says a photograph must always remain JPEG.
Scenario B: A child makes an infographic containing tiny labels on an arrow diagram. Lossless PNG may preserve small text more faithfully than aggressive JPEG. If the graphic was created as clean vector artwork and the system safely supports SVG, that may be useful for scaling. A designer still needs to check text readability at a phone’s actual display size.
Scenario C: A school club has a simple logo. A trusted SVG is useful when the logo must remain sharp at many sizes. If the school platform rejects SVG uploads, an appropriately sized transparent PNG can be used without trying to bypass its restrictions.
Scenario D: A homepage displays a wide photographic banner and serves many mobile visitors. Test a WebP export against a good JPEG at similar perceived quality. Choose the one that meets the speed, display and compatibility needs of the site. The file extension alone does not tell you the actual result.
The size calculation students can perform
Suppose a fictional image export creates a 2,400 KB JPEG and a 600 KB WebP version of the same photograph at acceptable displayed quality. The difference is 1,800 KB, and the fractional reduction is 1,800 ÷ 2,400 = 0.75, or 75% smaller in that particular comparison. We have not measured a real school website, and this example is not a general compression guarantee.
Now change the starting file. Suppose an already optimised PNG diagram is 110 KB and its WebP alternative is 130 KB at the required sharpness. In this invented comparison, WebP is larger. The correct conclusion is that encoders and content matter, not that one of the official format descriptions is false. Numbers should follow evidence, not a slogan.
File size is often measured in bytes or their multiples, while internet transfer rates are commonly expressed in bits per second. A quick comparison of “600 KB” with “600 Kb” risks an eightfold unit confusion before additional conventions are considered. A student can keep the task simple by reporting file sizes in the same units and comparing exported copies. Our separate online-lesson network guide handles the independent topic of data-transfer performance.
Resolution is not the file’s format
A raster image described as 1,920 × 1,080 has a grid with those pixel dimensions. In ordinary decimal arithmetic, that is 2,073,600 pixel positions. But that count does not give the file’s compressed size in bytes, the image’s visual quality or the browser’s display dimensions. Two pictures can have the same dimensions and very different file sizes because content and encoding differ.
The word resolution is often used loosely, so a more precise explanation specifies pixel dimensions or other relevant properties. When a student uploads a tiny 150 × 150 pixel logo and stretches it to cover a large banner, changing it to PNG does not manufacture new original detail. A higher-resolution original, properly exported vector artwork or a different layout may be needed.
Transparency and the missing background
Transparency means that an image can carry areas through which a background is visible, fully or partially. PNG, SVG and WebP can support it; ordinary JPEG does not supply an alpha transparency channel. A parent might see a logo with a white rectangle behind it on a blue webpage and ask why. The answer may be that the logo was exported with a white background rather than with transparent areas.
The adjective transparent has several English meanings—clear, open, or allowing sight through—but in an image file it refers to how displayed pixels combine with the background. That context explains why “a transparent organisation” and “a transparent PNG” are not the same claim. Vocabulary becomes a tool for choosing the right meaning of a common word.
A file format does not grant permission to reuse an image
A student can download a photograph as JPEG, PNG or WebP, but the extension does not determine its copyright, licence, subject consent or permitted reuse. Re-encoding a photograph is not a legal permission. The related published free-to-view and Creative Commons image guide owns those usage-rights questions. This article stays focused on visual representation and delivery.
Similarly, file format is not a substitute for accessible text. If an image conveys meaningful information, a school webpage may need appropriate alternative text, a caption or the underlying text itself. A raster screenshot of a timetable can be readable visually but awkward for other users if the dates are not presented accessibly. The format decision and the accessibility decision are separate responsibilities.
Avoid four common mistakes
Mistake one: “PNG is always higher quality.” Repair: specify what must be preserved. PNG is lossless, but source quality and appropriate dimensions still matter. Mistake two: “SVG is simply a tiny PNG.” Repair: SVG generally describes vector graphics and has different scaling and security characteristics.
Mistake three: “WebP is always smallest.” Repair: test the actual content and chosen encoding settings. Mistake four: “Changing a .jpg extension to .png converts the file.” Repair: use proper conversion and inspect the saved result. Each repair combines a vocabulary distinction with a practical action.
A diagnostic exercise for a school team
Give students four pretend assets: a photograph, a chart with small text, a simple vector logo and a wide photographic hero. Ask each group to choose a suitable format and explain why. Accept more than one answer where the justification meets the requirements. Then add a twist: the website accepts only JPEG and PNG uploads. The SVG proposal now needs a compatible, safe export rather than a complaint that the platform is wrong.
Next ask: “Which comparison gives evidence that one export loads with less data?” Students should compare actual exported file sizes under comparable visual conditions. “WebP is modern” is a description, not a measurement of this file. “The banner looks sharp on my laptop” is a useful observation, but it does not yet establish performance on every phone or connection.
Retrieval practice with short answers
Question one: Which familiar format is well suited to photos and uses lossy compression? Answer: conventional JPEG.
Question two: Which common raster format can preserve pixel information losslessly and support transparency? Answer: PNG.
Question three: Which format is useful for geometric artwork at many display sizes? Answer: trusted SVG, subject to platform support.
Question four: Can WebP represent both lossy and lossless image compression? Answer: yes.
Question five: A screenshot has tiny text and the compressed image is illegible. Does a smaller file size mean it is automatically better? Answer: no. Legibility and the user’s task must be preserved.
Where this connects with English and digital learning
Words such as raster, vector, lossy, lossless, transparent, convert, resize and fallback allow pupils to describe what they changed and why. A vague instruction—“Make the image better”—can become “Export the chart as a legible PNG at the required dimensions.” Specific language makes project feedback actionable.
For secondary computing projects, the decision also reinforces testing: define a desired outcome, produce suitable alternatives and compare results. For English presentations and PSLE-level visual literacy, pupils can recognise that a diagram’s effectiveness depends on whether the audience can read its labels, not merely on colourful design. For older students preparing a portfolio, describing format choices precisely makes their production process easier to evaluate.
Parents and teachers: a safe ten-minute activity
Use one original family photograph and one original simple diagram. Save appropriately sized copies in two relevant formats each, then compare how each looks at actual viewing size. Ask the learner to predict which image is likely to benefit from lossless representation and which may tolerate lossy compression. Report what the actual files show; do not claim that a general format definition guarantees the result.
A teacher can use the fictional festival website to introduce an evidence ledger: image purpose, format chosen, reason, visual check, compatibility check. This activity does not require public publishing or downloading unknown files. Use trusted assets and appropriate permissions, especially if children appear in images.
A changed-context challenge: a science graph
A Science club wants to publish an investigation graph online. The line and axis labels must stay readable. If the graph was created as a trusted vector diagram, SVG could be appropriate if the platform permits it. If the tool provides only a raster export, a suitable PNG may be a good starting point. A high-compression JPEG export could reduce sharpness around small lettering. The correct test is whether the evidence remains understandable on the target screen.
When the same graph is printed on a poster, different colour-management and print-proof concerns arise. The published RGB, CMYK and print-proofs article covers that separate issue; changing from JPEG to PNG does not by itself solve printing-colour problems.
Frequently asked questions
Which is better for a photograph, PNG or JPEG? Often JPEG is a practical smaller-photo option, but compare actual quality and size. WebP can also be worth testing.
What is the difference between SVG and PNG? SVG describes vector artwork and scales well for many shapes; PNG encodes a raster image with lossless compression and optional transparency.
Does WebP support transparency? Yes. Both lossy and lossless WebP have transparency capabilities, subject to the specific file and software used.
Can I make a tiny, blurry image perfect by changing its extension? No. Renaming or re-encoding cannot recreate missing detail in the original.
Should students upload any SVG found online? No. SVG is structured content; use trusted assets and follow upload and sanitisation policies.
Use the right word, then choose the right representation
A file format is part of how an idea reaches a reader. JPEG, PNG, SVG and WebP are not a race with one permanent winner. They provide different mechanisms for representing pictures, shapes, transparency and compression. The child who can say “Our timetable needs sharp text, our logo needs clean scaling, and our photograph needs efficient delivery” has moved beyond memorising extensions into deliberate communication. Explore the Vocabulary Meaning and Precision Hub for more applied distinctions. Authoritative sources checked 29 October 2026: MDN image format guide, Google web.dev on image performance and Google WebP documentation. All file sizes, school festivals and test outcomes in this article are fictional illustrations.