Learn

Modern web format from Google — smaller than JPEG and PNG with alpha and animation support.

JPEG / JPG

The dominant photo format since 1992 — lossy compression, universal support, no transparency.

PNG

Lossless format with full alpha channel transparency — ideal for logos, UI, and screenshots.

AVIF

Next-generation format based on AV1 — up to 50% smaller than JPEG at equivalent quality.

HEIC / HEIF

Apple's default iPhone format — excellent compression, but limited outside Apple devices.

GIF

1987 animation format with a 256-color limit — largely superseded by MP4 and WebP for animation.

SVG

XML-based vector format — infinitely scalable, perfect for logos, icons, and illustrations.

TIFF

Professional lossless format for print and archival — not suitable for web delivery.

BMP

Windows bitmap format — uncompressed, very large files, legacy use only.

MP4

The dominant web video container — dramatically smaller than GIF for animated content.

WebM

Google's open-source video format — royalty-free VP9/AV1 codec, smaller than MP4 in some cases.

Base64

Image 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

How lossy and lossless compression work, what quality settings mean, and when to use each.

Resolution & DPI

The difference between pixel dimensions, PPI, and DPI — and why 72 DPI means nothing on screen.

Metadata & EXIF

What data is embedded in your photos — GPS, camera settings, timestamps — and how to remove it.

Aspect Ratios

How width-to-height ratios work, common values like 16:9 and 1:1, and social media crop requirements.

Transparency & Alpha

How alpha channels enable transparency, which formats support it, and common pitfalls when converting.

Color Profiles

ICC 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

Five concrete methods: compress, resize, convert format, strip metadata, and reduce color depth.

Optimize Images for Web

A step-by-step guide covering format choice, dimensions, compression, lazy loading, and caching.

Best Image Format for Websites

JPEG vs PNG vs WebP vs AVIF — a direct comparison with a format-by-use-case decision guide.

Images for Social Media