Subjects and lessons to explore.

Law

Graphic Design & Digital Media · Foundations

File Formats

9 min read 5 practice questions
10 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

A is the container that decides how an image is stored: how it is compressed, whether it can hold transparency or animation, what colors it can carry, and where it works well. JPEG squeezes photographs small by throwing data away. PNG keeps every pixel and adds smooth transparency for web graphics. GIF handles simple animation in 256 colors. TIFF and PDF serve print. WebP and AVIF are the modern, smaller web options. stays razor-sharp at any size. Choosing well means matching the format to the job.

Why this matters

Every image you make is saved in some format, and the wrong one shows up as a blurry logo, a photo that takes forever to load, a white box where transparency should be, or a print job that comes back the wrong color. Designers, marketers, and developers make this choice dozens of times a week, and it directly affects page speed, print quality, and how professional the work looks. The reasoning also travels: the same lossy-versus-lossless and web-versus-print logic underlies image optimization, accessibility, and file handoffs between a designer and a printer or developer. Learning to pick a format on purpose, rather than defaulting to whatever a tool suggests, is basic fluency in digital media.

The college version

Compression: lossy versus lossless

A file format is the agreed-upon structure for storing an image so that software can read it back. The single most useful thing to know about any raster (pixel-based) format is how it compresses data, because that splits the whole field in two. makes files small by permanently discarding information the format judges you will not miss, usually fine detail and subtle color differences. You cannot get that data back; save a JPEG, re-open it, and save again, and it degrades a little more each time. also shrinks the file, but it does so by encoding the same pixels more efficiently, so the image can be reconstructed exactly. PNG, GIF, TIFF, and the lossless modes of WebP are all lossless. The trade-off is size versus fidelity: lossy formats win dramatically on file size for photographs, where a little discarded detail is invisible; lossless formats win where every pixel matters, such as text, sharp edges, screenshots, and line art, or where the file will be edited and re-saved repeatedly. This lesson classifies formats; the difference between pixel-based (raster) images and mathematically-described (vector) images is developed in the Raster versus Vector topic, and resolution in the Image Resolution topic.

The four workhorse raster formats

JPEG is the lossy photograph format. It stores 24-bit color (millions of colors), compresses aggressively, and is the most common format for photos on the web and in cameras. Its limits are the flip side of that strength: no transparency, no animation, and visible blocky artifacts if you compress too hard or save it many times. PNG is the lossless web-graphics format. It keeps every pixel and, crucially, supports an alpha channel, meaning each pixel can be fully opaque, fully transparent, or anywhere in between, which is how a logo sits cleanly over any background. PNG suits screenshots, icons, diagrams, and anything with crisp edges; the cost is larger files than JPEG for photographs. GIF is the old, limited format that survives for one reason: simple animation. It uses lossless LZW compression but caps the palette at 256 colors (8-bit indexed), and its transparency is binary, a pixel is either fully transparent or fully opaque, with no soft edges. TIFF is the print and archival heavyweight: lossless, high bit depth, able to carry CMYK and other color spaces, and trusted by libraries and museums for master copies. Its files are large, and standard TIFF is capped near four gigabytes, a limit the BigTIFF extension removes.

The modern web formats and vector SVG

WebP and AVIF are newer formats built for the web, and both improve on the old options. Each offers a lossy mode and a lossless mode, supports alpha-channel transparency, and can animate. The payoff is size: lossy WebP images average roughly 25 to 35 percent smaller than JPEGs of similar visual quality, and lossless WebP runs about 26 percent smaller than PNG. AVIF generally compresses even better than WebP. The catch is support: AVIF reached browsers more recently than WebP, so on the web you serve a modern format with an older fallback, commonly using the HTML picture element so each browser gets the best format it understands. SVG is different in kind. It is not a grid of pixels at all but an XML text file describing shapes, paths, and text as drawing commands, so it scales to any size, from a favicon to a billboard, with no blur. That makes SVG ideal for logos, icons, and diagrams, and its shapes can even be styled or animated with CSS. Because it describes geometry rather than photographic detail, SVG is a poor fit for photographs. Alongside SVG, EPS and AI are vector formats used in professional print and editing workflows.

Choosing a format, and the CMYK question

Put the traits together and the choice usually makes itself. For a photograph on the web, reach for WebP or AVIF with a JPEG fallback. For a graphic that needs a transparent background, use PNG (or WebP). For a logo or icon that must stay sharp at every size, use SVG. For a short looping animation, modern advice favors WebP or animated PNG over GIF, though GIF still works everywhere. For print, the deliverable is usually a , with TIFF used for high-quality raster images and archival masters. One trait often decides print work: color space. TIFF, EPS, and PDF can carry CMYK, the four-ink model presses use, while JPEG, PNG, GIF, WebP, and SVG live in the RGB world of screens (PNG, GIF, and SVG do not support CMYK at all). That is why sending a printer a PNG of your artwork can cause color surprises, and why print files are prepared as PDF or TIFF instead. The color models themselves, RGB and CMYK and why their gamuts differ, are covered in the Color Models topic; here the point is simply that the format you pick determines whether CMYK can ride along at all.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Saving a picture is like choosing a container to carry it in, and different containers are good at different things. JPEG is a vacuum bag: it squishes a photo really small by throwing away tiny details you would not notice, but you can never get them back. PNG is a sturdy box with a see-through lid: it keeps every detail and lets parts of the picture be transparent, so a logo can float on any background. GIF is a tiny flip-book that can move but only knows 256 crayons. TIFF is a heavy archive crate for perfect print copies. WebP and AVIF are newer, lighter bags that hold more with less weight. And SVG is not a photo at all, it is a recipe of shapes, so you can blow it up to the size of a wall and it still looks crisp. Pick the container that fits what the picture needs to do.

Picture it like this

Choosing an image format is like choosing how to carry water: a paper cup (JPEG) is light and fine for a quick drink but crushes and leaks detail; a sealed thermos (PNG/TIFF) keeps everything perfectly but is heavier; and a written recipe for water (SVG) weighs almost nothing and scales to any amount, but only works because water is simple to describe.

Where the picture stops working

The water analogy captures the size-versus-fidelity trade-off, but it understates transparency, animation, and color space, which have no water equivalent, and it overstates SVG: real photographs are far too complex to describe as a short recipe, which is exactly why vector formats fail for photos.

Worked example

Imagine a coffee shop needs four image files. First, a hero photo of a latte for its homepage: choose WebP (or AVIF) for the smallest file at good quality, with a JPEG fallback for older browsers, because it is a photograph headed for the web. Second, the shop's logo, which appears as a tiny site icon and on a large window decal: choose SVG, because a vector logo stays razor-sharp at both sizes and can be recolored in code, and it must sit transparently over a photo. Third, a short animated 'Open' badge: a GIF works everywhere, but animated WebP or APNG gives full color at a smaller size. Fourth, the artwork for a printed menu the shop sends to a print shop: deliver a press-ready PDF, with any embedded photos supplied as CMYK TIFFs, because PDF and TIFF carry the CMYK color the press needs while a PNG cannot. Each choice follows from one question: what does this image have to do, and where?

Key takeaway

Match the format to the job: JPEG or WebP/AVIF for photos, PNG for web graphics needing transparency, SVG for logos and icons that must scale, GIF for simple legacy animation, and PDF or TIFF (which carry CMYK) for print and archives. The first question is always lossy versus lossless, and the second is web versus print.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

Which raster format uses lossy compression, stores 24-bit color, and does not support transparency, making it the common default for photographs?

Choose an answer, then check it.
Question 2 of 3intermediate

How does GIF differ from PNG?

Choose an answer, then check it.
Question 3 of 3intermediate

A studio needs one logo file that stays perfectly sharp everywhere, from a tiny site icon to a highway billboard, and whose colors can be restyled in code. Which format best fits?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define a file format and distinguish lossy from lossless compression.
  • Describe the compression, transparency, animation, and color-space traits of JPEG, PNG, GIF, and TIFF.
  • Explain what WebP, AVIF, and SVG add, and when each is the right modern choice.
  • Apply format traits to choose a format for a given web or print scenario.
  • Identify which formats carry CMYK for print versus which are RGB-oriented for screens.

Common mistakes

  • Saving a logo or icon as a JPEG.

    JPEG is lossy and has no transparency, so a logo gets fuzzy edges and a solid rectangle background. Use SVG for a scalable vector logo, or PNG when you need a fixed-size raster with transparency.

  • Using PNG for large photographs on a website.

    PNG is lossless, so photos become huge files that slow page loads. Use JPEG, or better WebP/AVIF, for photographs; reserve PNG for graphics, screenshots, and images that need transparency or crisp edges.

  • Assuming a PNG is fine to send to a commercial printer.

    PNG is RGB-only and does not support CMYK. Prepare print files as a press-ready PDF, with raster images as CMYK TIFF, so the color space the press needs is preserved.

  • Reaching for GIF whenever you need transparency or animation.

    GIF is capped at 256 colors with only on/off transparency. For smooth transparency use PNG or WebP; for higher-quality animation use WebP or APNG. GIF is best kept for simple, legacy-compatible loops.

  • Re-saving a JPEG many times during editing.

    Each JPEG save discards more data (generation loss). Edit in a lossless format such as PNG or TIFF (or the app's native file) and export to JPEG only once, at the end.

Easily confused

Lossy (JPEG) vs. Lossless (PNG, TIFF)

Lossy permanently discards data for much smaller files, ideal for photos; lossless preserves every pixel for exact reproduction, ideal for graphics, text, edges, and editing.

JPEG vs. PNG

Both are common raster web formats, but JPEG is lossy with no transparency (best for photos), while PNG is lossless with a full alpha channel (best for graphics needing crisp edges or transparency).

GIF vs. WebP / AVIF

All can animate, but GIF is capped at 256 colors with binary transparency, while WebP and AVIF offer full color, smooth alpha, and far better compression.

Raster formats (JPEG, PNG, TIFF) vs. Vector SVG

Raster stores a fixed pixel grid that blurs when enlarged; SVG stores drawing commands that scale to any size sharply, but is unsuitable for photographs.

Web formats (PNG, WebP, SVG) vs. Print formats (TIFF, PDF, EPS)

Web-oriented formats work in RGB for screens; TIFF, PDF, and EPS can carry CMYK, which is why print deliverables are prepared as PDF or TIFF rather than PNG.

Key vocabulary

File format
A defined structure for storing an image (or other data) so software can write and read it, determining its compression, transparency, animation, and color capabilities.
Lossy compression
Compression that shrinks a file by permanently discarding some image data; the original cannot be fully recovered. Used by JPEG.
Lossless compression
Compression that reduces file size by encoding the same pixels more efficiently, so the exact original image can be reconstructed. Used by PNG, GIF, TIFF, and lossless WebP.
Alpha channel (transparency)
An extra channel storing how opaque each pixel is, allowing smooth partial transparency so an image blends over any background. Supported by PNG, WebP, AVIF, and SVG.
Indexed color
A scheme that stores an image using a limited palette of specific colors referenced by index; GIF is limited to a 256-color (8-bit) indexed palette.
Raster (bitmap) image
An image stored as a fixed grid of pixels. JPEG, PNG, GIF, TIFF, WebP, and AVIF are raster formats; enlarging one past its resolution shows blur or blockiness.
Vector image
An image stored as mathematical drawing commands (points, lines, curves) rather than pixels, so it scales to any size without losing sharpness. SVG, EPS, and AI are vector formats.
SVG
Scalable Vector Graphics: an XML-based vector format for the web, resolution-independent and styleable with CSS, ideal for icons, logos, and diagrams.
WebP / AVIF
Modern web image formats offering both lossy and lossless compression, transparency, and animation, with markedly smaller files than JPEG or PNG at comparable quality.
Press-ready PDF
A portable, page-oriented, device- and resolution-independent file used as the final deliverable for professional printing; can carry CMYK color.

Sources & references

  1. Image file type and format guide — MDN Web Docs (Mozilla)
  2. Portable Network Graphics (PNG) Specification (Third Edition) — World Wide Web Consortium (W3C)
  3. Sustainability of Digital Formats: TIFF, Revision 6.0 (FDD000022) — Library of Congress
  4. Sustainability of Digital Formats: PDF (Portable Document Format) Family (FDD000030) — Library of Congress
  5. Graphic Design and Print Production Fundamentals — BCcampus / Graphic Communications Open Textbook Collective (Ken Jeffery, Alan Martin, Roberto Medeiros, Steve Tomljanovic)
  6. Including vector graphics in HTML (SVG) — MDN Web Docs (Mozilla)

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-19

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.