By Pawan Nayar · LLOS.ai · ~24 min read · Engineering Design
Every JPG is a negotiation; every PNG is a promise. This is not a table of file extensions — it is why billion-dollar companies obsess over image formats: the physics of each, the perception it exploits, the doctrine the big platforms follow, and the money a single kilobyte moves at scale.
10 formats & conceptsScience → perception → industryThe economics of a kilobyte
Why Companies Care About a Kilobyte
Most guides teach what a format is. That is the least interesting part. The real question is why the largest companies on earth pour engineering into image formats — and the answer is scale. Google stores trillions of images. At that size, every unnecessary kilobyte is bandwidth, battery, latency, carbon and money, multiplied across billions of loads. A format is never just a format; it is infrastructure.
So a JPG is a business decision, a PNG is a promise of exact pixels, an SVG is a systems decision, and compression is a bet on your perception. Read that way, image management stops being a menu of extensions and becomes product design.
Every format below runs the same layers, in the same order: the science (what is physically happening), the perception (why a human notices), the industrial production (how the big platforms actually handle it), the business impact (what it costs in money, speed and trust), a failure story, the rule of thumb — and only then, tucked at the end, the mechanics.
Compression bets on your eye. It keeps the faces and text you notice, and discards the rest first.
How the Platforms Handle Images
The same file obeys different doctrine at different companies. Memorise the doctrine, not the setting.
NetflixCompress hard and optimise for recognition at thumbnail size — faces dominate, because that is all the eye can read at that scale.
InstagramRe-compresses every upload. Export high, so their recompression starts from quality, not from an already-degraded file.
ApplePNG for app icons, SF Symbols as vector — exact pixels or infinite scale, never a soft in-between.
GoogleWebP, AVIF and Core Web Vitals — image weight is a ranking signal, so lighter images literally rank higher.
AmazonPure-white product images, zoomable hi-res, CDN-optimised — every format choice tuned for conversion.
FigmaExports differ by settings — scale, format and suffix are decisions, so a design system sets them once and exports the same way every time.
Every rule serves an outcome — rank, recognition, conversion, or exact fidelity. That is what makes formats a product decision, not a preference.
The Ten Formats
Each runs the same layers — science, perception, industry, business, failure, rule of thumb, then the mechanics.
Format 01
Raster & Vector
1 · The science
There are two kinds of image. A raster is a fixed grid of coloured pixels — it stores the finished result. A vector is a set of maths instructions (points and curves) — it stores the recipe, and redraws fresh at any size.
2 · Human perception
At a glance you cannot tell them apart — until you scale. Enlarge a raster and the eye sees blur and blocks; enlarge a vector and it stays razor-sharp. The difference only shows at the edges, magnified.
3 · Industrial production
GoogleStores trillions of images; at that scale every raster kilobyte is bandwidth, battery, latency, carbon and money — so image weight is infrastructure, not decoration.
FAANG design systemsStore icons and logos as vector precisely to avoid the raster tax — one asset, every size, no re-export.
4 · Business impact
Choosing raster or vector decides whether one asset serves every size or needs six exports — it sets storage, CDN and re-work cost for years.
5 · Failure storyA logo delivered as a 200px raster looked fine on the mockup. On a billboard it was a blurry smear — redrawn as a vector and reprinted, at ten times the cost.
6 · The rule of thumb
“Photographs are raster; everything else — logos, icons, UI, type — is vector.” Raster freezes your choices; vector delays them.
Is this a photo (raster) or a graphic (vector)?
Does it need to scale to many sizes? → vector
Is a vector master kept for anything that will grow?
Photoshop is a raster tool — pixels. Fine for photos; wrong for logos.
In Illustrator
Illustrator is a vector tool — build logos, icons and UI here so they scale forever.
In Canva
Canva mixes both; upload SVG for crisp logos, PNG/JPG for photos.
One thing to remember
The designer’s real job is preserving optionality — a vector keeps every future decision open.
Format 02
JPG — What Compression Buys
1 · The science
JPG is lossy: it discards the detail humans notice least (fine, high-frequency variation and subtle colour) and keeps what we do. Every re-save re-compresses and degrades again.
2 · Human perception
We notice edges, faces, text and gradients long before grass, sky and walls. JPEG’s algorithm literally bets “you won’t see this” and throws the rest away — and usually it wins.
The algorithm bets on your eye. It keeps faces and text, discards what you would never have noticed.
3 · Industrial production
GoogleCore Web Vitals score you on image weight — every extra kilobyte costs SEO rank, battery, server and CDN cost, and user retention.
The webJPG won because it made photographs small enough to send; it remains the default for photos everywhere.
4 · Business impact
JPG is not a format choice — it is a business decision. Network speed, search rank, bounce rate and retention all ride on where you set the quality slider.
A hero ships at quality 100 (2 MB) instead of 80 (200 KB)
↓
Largest Contentful Paint slows → Core Web Vitals fail
↓
Search ranking drops · bounce rises
↓
Revenue falls — and quality 80 looked identical
5 · Failure storyA hero shot shipped at quality 100. The page failed Core Web Vitals, ranking slipped, and revenue with it — a 200 KB export at quality 80 would have looked the same.
6 · The rule of thumb
“Quality 70–85 is almost always invisible and far smaller — and never store a master as JPG, because every save degrades it.”
Save for Web (Legacy) — drag quality, watch the live file-size read-out.
In Illustrator
Export the raster from a vector/photo source; don’t round-trip JPGs.
In Canva
Download › JPG; use the quality/compress options (Pro).
One thing to remember
Compression is the algorithm betting on your perception — price the bet before you push the slider.
Format 03
PNG — Exact Pixels & Transparency
1 · The science
PNG is lossless — every pixel is preserved exactly, with no artifacts and no ringing. It also carries an alpha channel for transparency, which JPG cannot.
2 · Human perception
The eye is unforgiving of artifacts on flat colour, text and sharp edges — the exact places JPG fails and PNG stays clean.
3 · Industrial production
AppleShips app icons as PNG — exact pixels at fixed sizes, no compression fuzz on the corners.
UI & screenshotsPNG is the default anywhere flat colour, text or a crisp edge must survive intact.
4 · Business impact
The wrong call here is the “white box” logo bug — a trust-destroying error visible on a live site.
5 · Failure storyA transparent logo saved as JPG showed a white box on a dark header. PNG (or SVG) would have carried the transparency and the logo would have floated cleanly.
6 · The rule of thumb
“PNG for anything with transparency, flat colour, text or sharp edges; JPG for photographs.”
Does it need transparency or exact edges? → PNG
Is it a photo? → JPG/WebP instead
PNG-24 (with alpha) or PNG-8 (tiny flat art), chosen deliberately?
PNG exists for exactness — use it wherever a single wrong pixel would show.
Format 04
SVG — One Asset, Every Size
1 · The science
SVG is vector — shapes defined by maths, rendered fresh at any size. Infinitely crisp, and tiny for simple art.
2 · Human perception
On a Retina screen or a billboard, SVG never pixelates — the eye reads it as ‘made for this size’ everywhere it appears.
3 · Industrial production
Every FAANG design systemStores icons as SVG because one asset becomes 16 / 20 / 24 / 32 / 48 / 96 / 128 px without six exports — a systems decision, not a taste.
The webSVG is text, so it compresses well, styles with CSS, and animates — a living asset, not a flat picture.
4 · Business impact
SVG collapses an icon library’s export and maintenance cost, and guarantees crispness across every device, forever.
5 · Failure storyA team shipped PNG icons at 1×. On Retina they looked soft, and every new size meant a new export. One SVG set would have covered every screen from one file.
Export for Screens or Save As SVG; keep paths clean and minimal.
In Canva
Upload SVG for logos/icons so they stay crisp in the design.
One thing to remember
SVG is how you stop exporting and start scaling.
Format 05
WebP & AVIF — The Modern Economics
1 · The science
WebP and AVIF are modern formats that compress far better than JPG or PNG at the same quality, and support transparency and animation.
2 · Human perception
At normal web sizes they are visually identical to JPG/PNG — the difference lives entirely in the file size, not in the eye.
3 · Industrial production
GoogleBuilt WebP and AVIF to win Core Web Vitals; large sites serve them via CDN with a JPG/PNG fallback.
CDNsNegotiate the best format per browser automatically — you upload one master, the network delivers the smallest safe file.
4 · Business impact
A 30–50% smaller file at the same quality means faster pages, better SEO, and lower CDN bills — multiplied across every visit.
A catalog serves 2 MB JPGs to 10M visits/month
↓
That is terabytes of avoidable bandwidth
↓
Slower pages · higher CDN and energy cost
↓
WebP/AVIF would have roughly halved it
5 · Failure storyA catalog served heavy JPGs when WebP was supported everywhere it mattered — paying twice the bandwidth for a picture no one could tell apart.
6 · The rule of thumb
“Serve WebP/AVIF where supported, with a JPG/PNG fallback — let the CDN negotiate the format.”
Export raster to WebP through Squoosh / a CDN pipeline.
In Canva
Download PNG/JPG, then convert via Squoosh or your CDN.
One thing to remember
The modern format question is purely economic — the same picture, for half the bytes.
Format 06
Resolution — Pixels For A Size
1 · The science
An image has a pixel count; DPI/PPI is only an instruction about how densely to place those pixels at a physical size. The printer cares only how many pixels exist for the size — that one sentence ends years of confusion.
2 · Human perception
Past roughly 300 PPI at reading distance (or the device’s pixel ratio on screen), the eye cannot resolve more — extra resolution is invisible and only heavier.
3 · Industrial production
Print shopsSpec pixel dimensions at final size (300 PPI at the printed inches) — never a DPI tag on a random file.
The webIgnores DPI entirely — it cares only about CSS pixels × device pixel ratio (1×/2×/3×).
4 · Business impact
Over-resolution bloats storage and pages for no visible gain; under-resolution scraps a print run — the cost sits on both sides of the right number.
5 · Failure story‘Set it to 300 DPI’ on an 800px web image, sent to print. The tag changed, the pixels didn’t, and the run printed soft.
6 · The rule of thumb
“Think pixels-for-a-size, not DPI. Uncheck Resample to re-tag density; never upscale to fake resolution.”
Image › Image Size, Resample off to re-tag; export 2× for retina.
In Illustrator
Set Document Raster Effects resolution for exported effects.
In Canva
Use PDF Print (300 DPI) or the Size slider (Pro) for more pixels.
One thing to remember
DPI is only the sentence; pixel-count-for-a-size is the meaning.
Format 07
Colour Spaces — Emit vs Absorb
1 · The science
RGB is additive — screens emit light and add red, green and blue. CMYK is subtractive — ink absorbs light. One emits, one absorbs, and RGB reaches far more colours.
2 · Human perception
The same colour looks different in emitted light than in reflected ink — which is exactly why print looks duller than a screen.
Emit vs absorb. RGB (screen light) reaches more colours than CMYK (ink) — so bright hues flatten in print.
3 · Industrial production
Film / NetflixGrade in wide colour for screens, where emitted light can be vivid.
Print housesConvert to CMYK and Pantone for ink accuracy — the press cannot show what it cannot mix.
4 · Business impact
An RGB file sent to a CMYK press comes back wrong — brand colours off, campaigns reprinted.
5 · Failure storyAn RGB billboard printed with the neon flattened. The whole campaign was reprinted — the colours were right on screen and impossible in ink.
6 · The rule of thumb
“sRGB for web, CMYK/Pantone for print — convert on your terms and soft-proof before you send.”
Edit › Convert to Profile; soft-proof via View › Proof Setup.
In Illustrator
Set the document colour mode (RGB/CMYK) up front.
In Canva
Canva is sRGB; for CMYK print, prep in Photoshop/Illustrator.
One thing to remember
Colour is not a value you pick — it is an agreement between light, device and eye.
Format 08
Transparency — The Fourth Channel
1 · The science
Transparency lives in the alpha channel — a fourth per-pixel channel beside red, green and blue, recording how opaque each pixel is. JPEG stores only three channels, so it has nowhere to keep it.
2 · Human perception
The tell is the “white box” — the eye instantly catches a rectangle of background where transparency should be.
3 · Industrial production
UI & compositingEvery overlay, icon and cutout rides on alpha — the fourth channel is what lets one image sit on another.
FormatsPNG, SVG, WebP and TIFF carry alpha; JPEG never can.
4 · Business impact
A lost alpha channel is the white-box bug — a visible, trust-eroding error in production.
5 · Failure storyA logo flattened to JPG lost its alpha and boxed itself on a coloured header — the fourth channel was thrown away at export.
6 · The rule of thumb
“Keep transparency in PNG or SVG. Picture alpha as a fourth colour channel and the white-box bug explains itself.”
Export PNG-24 with Transparency on; a transparent layer stack, not a flattened one.
In Illustrator
Export SVG/PNG from vector to preserve transparency.
In Canva
Download PNG with Transparent background (Pro).
One thing to remember
Transparency is a channel, not a setting — and JPEG has no room for it.
Format 09
Compression — The Information Bet
1 · The science
Compression removes redundancy (lossless) or discards the least-noticeable information (lossy). Lossy compression is, at heart, a bet: you won’t see this.
2 · Human perception
It works because human vision is predictable — we lock onto luminance edges and faces, not subtle colour shifts, so those are thrown away first.
3 · Industrial production
Netflix / YouTube / CDNsTune compression per device and network in real time — the same video or image ships at a different weight to a phone on 4G than a TV on fibre.
The webEvery image is compressed; the only question is how far before the eye notices.
4 · Business impact
Compression is the trade between file size and perceived quality — smaller is faster and cheaper, but pushed too far the artifacts show.
5 · Failure storyAn over-compressed gradient banded visibly across a hero image — the bet was pushed one notch too far and the eye caught the seams.
6 · The rule of thumb
“Compress to the point just before the eye notices — quality 80, WebP where supported, and always keep a master.”
Save for Web; compare formats and quality against live file size.
In Illustrator
Export with deliberate quality; keep the vector master.
In Canva
Use the Compress option (Pro) or Squoosh after download.
One thing to remember
Compression is applied psychology — it discards exactly what you were never going to see.
Format 10
ICC Profiles — Colour Is An Agreement
1 · The science
Colour is not stored in the file as a fixed thing — it only exists when light, device and viewer agree. An ICC profile is that agreement: a translation so a colour means the same across screen and press.
2 · Human perception
Without a shared profile the same file looks different on every monitor — the eye is fooled by whatever device it happens to be on.
3 · Industrial production
Calibrated pipelinesFilm, print and brand teams embed ICC profiles so a colour survives intact from the designer’s screen to the press.
PublishingA magazine specifies the exact profile — colour is contractually defined, not eyeballed.
4 · Business impact
A mismatched profile means washed-out or muddy output — returns, reprints and off-brand colour.
5 · Failure storyAn untagged image printed dark and muddy because the press guessed the profile — an embedded profile would have carried the intent.
6 · The rule of thumb
“Work in a known space (sRGB / Adobe RGB), embed the profile, and soft-proof before print.”
Assign/Convert Profile; embed the profile on Save/Export.
In Illustrator
Set and embed the document profile; soft-proof for print.
In Canva
Canva abstracts profiles; hand off to PS/AI for controlled print colour.
One thing to remember
ICC is the reminder that colour is not a thing you own — it is an agreement you maintain.
The Million-Dollar Mistakes
Format errors are not cosmetic. Each of these is a real business chain with a real cost at the end.
Million-dollar mistake
The 8 MB hero
An 8 MB hero image ships uncompressed
↓
Pages crawl → Core Web Vitals fail
↓
Google ranking drops · bounce rate climbs
↓
Traffic and revenue fall
Millions in lost organic traffic
Million-dollar mistake
The RGB billboard
An RGB file is sent straight to a CMYK press
↓
Brand colours come back wrong — dull, shifted
↓
The client rejects the entire print run
↓
Everything is reprinted
A full campaign reprinted
Million-dollar mistake
The flattened master
The layered PSD is flattened ‘to save space’
↓
Months later, marketing needs another language
↓
Nothing is editable — text is baked in
↓
The artwork is recreated across every market
40 markets rebuilt from scratch
The Debugging Ladder
“The image looks blurry.” Amateurs guess; professionals walk a question chain until the culprit is cornered.
Image looks blurry? Ask, in order:
Only on Retina / hi-DPI screens?
↓
Only after upload to the CMS?
↓
Only in the browser, not the original?
↓
Only in one browser (e.g. Safari)?
↓
Is the original file sharp?
↓
Is the export sharp?
↓
Is the CDN re-compressing it?
↓
Is CSS scaling it past its pixels?
↓
Does the device pixel ratio need a 2× asset?
Each answer eliminates half the suspects. The blur is almost always the original, the export, the CDN, or CSS scaling — the ladder tells you which.
The Vocabulary
The adjacent terms that come up around formats and compression.
DPI / PPI
Definition
Dots (or pixels) per inch — an instruction about how densely to place existing pixels at a physical size.
Why it matters
It does not add detail; print sharpness comes from having enough pixels for the size.
Colour Gamut
Definition
The range of colours a device can reproduce — wide for RGB screens, narrower for CMYK ink.
Why it matters
It explains why bright screen colours look duller in print.
Lossy vs Lossless
Definition
Lossy discards data you are unlikely to notice (JPG); lossless keeps every pixel (PNG).
Why it matters
Photos tolerate lossy; logos, text and flat colour need lossless.
Bit Depth
Definition
How many bits describe each colour — 8-bit is millions of colours, 16-bit far more headroom for edits.
Why it matters
Higher bit depth resists banding in gradients during heavy editing.
Banding
Definition
Visible steps in what should be a smooth gradient, from too few colours or too much compression.
Why it matters
It is the classic tell of over-compression or low bit depth.
EXIF / Metadata
Definition
Data stored inside an image — camera settings, copyright, keywords, colour profile.
Why it matters
It carries rights and searchability; strip it for the web, keep it in the archive.
Anti-aliasing
Definition
Smoothing the jagged edge of a shape by blending edge pixels.
Why it matters
It is why crisp vector text stays smooth when rasterised.
Master File
Definition
The full-quality, layered, editable source everything else is exported from.
Why it matters
Protect it — every deliverable is a derivative, never a replacement.
Common Questions
The format and compression questions designers actually ask.
Which format should I choose — JPG, PNG, SVG or WebP?
JPG for photographs, PNG when you need transparency or exact pixels (logos, UI, screenshots), SVG for anything that must scale (icons, logos), and WebP for smaller web files at the same quality where it is supported.
Why is JPG bad for logos and text?
JPG is lossy and adds compression artifacts around sharp edges and flat colour — exactly what logos and text are made of. It also cannot store transparency, which produces the white-box bug. Use PNG or SVG instead.
What is the difference between raster and vector?
Raster images are a fixed grid of pixels (photographs) and blur when enlarged. Vector images are maths instructions (logos, icons) and stay perfectly sharp at any size. Photos are raster; graphics should be vector.
Does a higher DPI make a web image look sharper?
No. The web ignores DPI entirely and cares only about pixel dimensions and the device pixel ratio. DPI matters only for print, where it tells the printer how densely to pack existing pixels.
Why do my colours look different in print than on screen?
Screens use RGB (emitted light, a wide colour range); printers use CMYK (absorbed light, a narrower range). Bright screen colours outside the CMYK gamut flatten in print. Convert to CMYK and soft-proof before printing.
How do I make images smaller without visible quality loss?
Export JPGs at quality 70–85, serve WebP or AVIF where supported, size images to the exact pixels they display, and keep a full-quality master to re-export from. Most of the file size goes before the eye can tell.
Test Your Format Sense
Ten questions in seven formats, each with layered hints — a nudge, the reasoning, then a deeper connection. Served from the bank, never hardcoded.
Loading the question bank…
Question 1 of 10
Multiple choice
Which Is the Right Format?
Five rounds. Two options each — which is the right call, and why?