Learn
Guides, format references, and concept explainers for working with images on the web.
Image Formats
Deep dives into every major image and video format — how they work, when to use them, and how they compare.
WebP
FormatModern web format from Google — smaller than JPEG and PNG with alpha and animation support.
JPEG / JPG
FormatThe dominant photo format since 1992 — lossy compression, universal support, no transparency.
PNG
FormatLossless format with full alpha channel transparency — ideal for logos, UI, and screenshots.
AVIF
FormatNext-generation format based on AV1 — up to 50% smaller than JPEG at equivalent quality.
HEIC / HEIF
FormatApple's default iPhone format — excellent compression, but limited outside Apple devices.
GIF
Format1987 animation format with a 256-color limit — largely superseded by MP4 and WebP for animation.
SVG
FormatXML-based vector format — infinitely scalable, perfect for logos, icons, and illustrations.
TIFF
FormatProfessional lossless format for print and archival — not suitable for web delivery.
BMP
FormatWindows bitmap format — uncompressed, very large files, legacy use only.
MP4
FormatThe dominant web video container — dramatically smaller than GIF for animated content.
WebM
FormatGoogle's open-source video format — royalty-free VP9/AV1 codec, smaller than MP4 in some cases.
Base64
FormatImage encoding (not a format) — embeds binary image data as ASCII text in HTML, CSS, or JSON.
Core Concepts
Foundational knowledge: compression, resolution, color profiles, transparency, metadata, and aspect ratios.
Image Compression
ConceptHow lossy and lossless compression work, what quality settings mean, and when to use each.
Resolution & DPI
ConceptThe difference between pixel dimensions, PPI, and DPI — and why 72 DPI means nothing on screen.
Metadata & EXIF
ConceptWhat data is embedded in your photos — GPS, camera settings, timestamps — and how to remove it.
Aspect Ratios
ConceptHow width-to-height ratios work, common values like 16:9 and 1:1, and social media crop requirements.
Transparency & Alpha
ConceptHow alpha channels enable transparency, which formats support it, and common pitfalls when converting.
Color Profiles
ConceptICC profiles, sRGB vs Adobe RGB vs P3, and why color looks different on different screens.
Practical Guides
Step-by-step walkthroughs for common tasks — optimizing for web, reducing file size, and sizing for social.
Reduce Image File Size
GuideFive concrete methods: compress, resize, convert format, strip metadata, and reduce color depth.
Optimize Images for Web
GuideA step-by-step guide covering format choice, dimensions, compression, lazy loading, and caching.
Best Image Format for Websites
GuideJPEG vs PNG vs WebP vs AVIF — a direct comparison with a format-by-use-case decision guide.
Images for Social Media
GuideEvery platform's required dimensions in one place — Instagram, Facebook, Twitter/X, LinkedIn, and more.
