Introduction
Images and video use a format pairing a storage/delivery container with codecs (encoders) that actually compress pixels and audio. Picking the right format changes file size, quality, compatibility, and how easy it is to edit.
· Uncompressed (BMP, some TIFF) — no quality loss / huge files
· Lossless (PNG, lossless WebP, FLAC, ProRes, …) — no quality loss, modest savings
· Lossy (JPEG, WebP, AVIF, MP4/H.264, …) — trades a little quality for much smaller files
Image Formats
JPEG / JPG .jpg .jpeg
The most common photo format. It exploits human vision (more sensitivity to luminance than color) via YCbCr + discrete cosine transform (DCT) + quantization, often shrinking photos to 1/10–1/20 the size.
Pros
- Great compression keeps photo files small
- Opens everywhere across devices and apps
- Can embed EXIF shooting metadata
Cons
- No transparency (alpha)
- Repeated edit-save cycles add loss (generation loss)
- Blockiness shows on logos, text, and line art
Typical uses: Photos, social posts, blog images, email attachments.
PNG .png
Created as a patent-free alternative to GIF. Truly lossless thanks to DEFLATE. Best for screenshots, logos, UI assets, diagrams, and anything with sharp edges.
Pros
- Zero loss; saves stay pixel-identical
- Supports transparency (alpha)
- Clean anti-aliased edges
Cons
- Photos are often 3–10× larger than JPEG
- No animation (APNG exists but has limited support)
Typical uses: Logos, icons, UI art, screenshots, diagrams.
WebP .webp
Google’s general-purpose web format. Often about 25–35% smaller than JPEG at similar quality, and in lossless mode often around 26% smaller than PNG.
Pros
- Often smaller than JPEG/PNG with faster loads (great for the web)
- One format can cover alpha and animation
Cons
- Some older OSes and apps cannot open it
- Print/DTP pipelines may still lack support
Typical uses: Sites, blog images, PWAs, in-app assets.
AVIF .avif
A leading next-gen format. At similar quality it can reach 1/2–1/3 the size of JPEG and beat WebP too. Supports HDR, wide gamut, and film grain; strong for photos and thumbnails.
Pros
- Outstanding compression
- HDR, 10-bit, and wide-gamut capable
- Supported in all major browsers
Cons
- Encoding is CPU-heavy
- Missing on older OSes (e.g., pre–iOS 15) and some apps
Typical uses: High-quality web imagery, CDN delivery, photo archives.
HEIC / HEIF .heic .heif
Spread quickly after Apple adopted it. A HEIF container holding HEVC-compressed imagery, often about half the JPEG size at equal-or-better quality.
Pros
- High quality at about half the JPEG size
- Can store depth maps, bursts, and edit metadata in one file
Cons
- HEVC licensing is why it never became a web universal
- Windows needs extra codecs; web browsers generally skip it
Typical uses: Default iPhone captures. Convert to JPEG/PNG/WebP for the web or Windows sharing.
GIF .gif
Old 256-color palette tech, still used for short looping motion. Files get large; poor fit for photos.
Pros
- Animations play almost everywhere
- Auto-plays in many chats and social apps
Cons
- 256-color palettes look rough on photos (banded gradients)
- Much heavier than equivalent WebM/MP4
Typical uses: Short memes, UI demos, tiny looping clips.
BMP .bmp
Simple Windows-heritage bitmaps; cheap to read/write for embedded gear and legacy tools. Rarely needed on the web or social media.
TIFF .tif .tiff
Long-time print/publish/scan favorite with rich options: CMYK, alpha, even layer metadata. Not aimed at web viewing.
SVG .svg
Vector graphics built from math, paths, and coordinates—not pixels. Stays sharp at any scale, ideal for logos, icons, and responsive UI; animatable with CSS/JS.
PDF .pdf
Strictly a document format, but great for bundling multiple images while preserving print quality—a popular export target.
RAW .cr2 .nef .arw .dng …
Records near-sensor data from digital cameras. Lets you re-tune white balance and exposure without generational loss. Usually developed to JPEG/TIFF before sharing or viewing.
Quick Compare
| Format | Compression | Alpha | Animation | Size (photos) | Typical uses |
|---|---|---|---|---|---|
| JPEG | Lossy | × | × | ○ Small | General photos |
| PNG | Lossless | ○ (8-bit) | × | △ Large | Logos, UI, screenshots |
| WebP | Both | ○ | ○ | ◎ Small | Web images |
| AVIF | Mostly lossy | ○ | ○ | ◎◎ Smallest tier | High-quality web |
| HEIC | Lossy | ○ | ○ | ◎ Small | iPhone capture |
| GIF | Lossless (256 colors) | 1-bit | ○ | × Heavy | Short loops |
| BMP | Uncompressed | Limited | × | ×× Huge | Legacy Windows |
| TIFF | Configurable | ○ | × | ×× Huge | Print & scan |
| SVG | (vector) | ○ | ○ | — (not for photos) | Logos & icons |
Video Formats
Containers like MP4 or MKV hold a video codec (H.264, H.265, VP9, AV1, …) and an audio codec (AAC, MP3, Opus, …).
Even the same
.mp4 filename can play differently depending on what codecs are inside.
MP4 .mp4
The default video container worldwide. “Export MP4 and it will probably play” is mostly true: YouTube, Vimeo, social apps, phones, TVs, and consoles all handle it.
WebM .webm
Royalty-free container aimed at <video> delivery; often more efficient than MP4.
Watch older Apple/Safari compatibility.
MOV .mov
Apple QuickTime heritage and an industry staple. Carries editorial codecs like ProRes, so color/pro workflows often keep MOV as an intermediate. For delivery, convert to MP4.
MKV (Matroska) .mkv
Open, flexible container for multi-language audio, subtitles, and chapters—popular with collectors. Phone stock players and social apps rarely like it; transcode to MP4 for sharing.
AVI .avi
Legacy PC-video workhorse; inefficient today with little reason for new projects. Mostly met when ingesting older archives.
M4V .m4v
FLV .flv
WMV .wmv
3GP / 3G2 .3gp .3g2
OGV / Ogg .ogv .ogg
TS / MPEG-TS .ts .m2ts
Major Codecs
| Codec | Generation | Efficiency | Patents / licensing | Typical containers |
|---|---|---|---|---|
| H.264 / AVC | 2003– | ○ Baseline | Yes (mostly clarified) | MP4, MOV, MKV, TS |
| H.265 / HEVC | 2013– | ◎ ~50% smaller than H.264 | Yes (complex licensing) | MP4, MOV, MKV, HEIC |
| VP9 | 2013– | ◎ Near HEVC class | No (royalty-free) | WebM, MKV |
| AV1 | 2018– | ◎◎ Smallest tier | No (royalty-free) | MP4, WebM, MKV (also AVIF) |
| VP8 | 2010– | △ Similar to H.264 | No | WebM |
| MPEG-2 | 1995– | × Legacy | Yes (expired patents) | TS, DVD-Video |
| ProRes | 2007– | Editing (larger files) | Apple | MOV |
Note: H.264 is a codec, not a container name—it also lives in MKV, MOV, TS, and others besides MP4.
Which Format Should I Use?
By use case (images)
- Photos for social or blogs →
JPEG; go smaller withWebPorAVIF - Logos, screenshots, UI →
PNG(required if you need transparency) - HEIC from an iPhone on PCs or the web → convert to
JPEGorWebP - Print or prepress →
TIFFor high-qualityJPEG/PDF - Crisp at any zoom (icons, etc.) →
SVG - Hand out many pages at once →
PDF - Lightweight short motion →
WebP (animated)>GIF(GIF if compatibility wins)
By use case (video)
- YouTube, social, messaging →
MP4 (H.264 + AAC)is the safest bet - Embed with
<video>on your site → ideal to offerMP4+WebM - High-quality mastering →
MOV (ProRes)or high-bitrateMP4 - Archive many audio/sub tracks →
MKV - Shrink animated GIFs →
WebM (VP9)orMP4 (H.264)(this tool can help) - Legacy video (FLV, WMV, AVI) → transcode to
MP4first
Size vs compatibility
| Top priority | Image | Video |
|---|---|---|
| Maximum compatibility | JPEG / PNG / GIF | MP4 (H.264 + AAC) |
| Smaller files | AVIF > WebP > JPEG | AV1 > H.265 > H.264 |
| Ongoing editing | TIFF / PNG / RAW | MOV (ProRes) / MKV |
| No quality loss | PNG / TIFF | (Lossless H.264 / FFV1) |
Glossary
- Container … Wraps video, audio, subtitles, and metadata (MP4, MKV, MOV, …).
- Codec … Compresses and decompresses media (H.264, H.265, AV1, AAC, …).
- Lossy compression … Discards subtle detail for much smaller files (JPEG, MP3, H.264, …).
- Lossless compression … Bit-perfect decode (PNG, FLAC, ProRes 4444, …).
- Bit depth … Bits per color channel (8-bit typical, 10-bit for HDR, …).
- Chroma subsampling (4:2:0, …) … Stores color at lower resolution than luma to boost compression.
- HDR (High Dynamic Range) … Bright, high-contrast imagery; usually needs 10-bit or more.
- Bitrate … Data per second; higher usually means better quality and larger files.
- Frame rate (fps) … Frames per second (24 for cinema, 30/60 for TV, 60–120+ for games).
- Keyframe (I-frame) … Fully self-contained frame you can seek to directly.
- EXIF … Metadata such as capture time, camera model, GPS, embedded in images.
- ICC profile … Color-management data so displays reproduce color spaces accurately.