Graphics Common Image Formats

Five Formats, Five Trade-offs

Image formats aren't interchangeable wrappers around the same data — each one makes different choices about compression, color, and transparency, and those choices make it well-suited to some content and poor for others. Picking wrong doesn't just waste bytes; it can visibly wreck quality (compressing a logo as JPEG) or bloat a page (saving a photo as PNG).

PNG — Lossless and Transparent

PNG never throws away pixel data, so re-saving a PNG repeatedly doesn't degrade it the way repeated JPEG saves do. It also supports full alpha-channel transparency, meaning individual pixels can be anywhere from fully opaque to fully see-through — essential for logos or icons that need to sit over different backgrounds. The trade-off is size: because nothing is discarded, photographic PNGs are typically far larger than an equivalent JPEG.

JPEG — Small Files for Photos

JPEG achieves its small file sizes by discarding detail the human eye is less sensitive to, then compressing what's left. That works beautifully for photos with smooth gradients and lots of color, but it introduces visible artifacts — blocky patches or blurring around hard edges — which makes it a poor choice for text, sharp UI lines, or anything re-compressed many times. JPEG also has no transparency support at all; every pixel is fully opaque.

WebP — A Modern All-Rounder

WebP was designed to replace both PNG and JPEG with a single format that supports lossy compression (like JPEG), lossless compression (like PNG), transparency, and even simple animation — usually at a noticeably smaller file size than the older formats for comparable visual quality. Browser support is now essentially universal, which is why many sites default to serving WebP (or the even newer AVIF) and fall back to JPEG/PNG only for older browsers.

GIF and SVG — The Specialists

• GIF is limited to a palette of 256 colors, which makes photographic GIFs look banded and blotchy — but it remains common for short, simple looping animations like reaction memes or basic loading indicators.
• SVG is the odd one out on this list: it isn't raster at all. Because it stores shapes as math rather than pixels, it scales losslessly to any size, making it the natural choice for logos, icons, and diagrams that need to look sharp on everything from a favicon to a hero banner.
• For SVG's actual markup and drawing syntax, see the dedicated SVG tutorial on this site — this lesson only covers when to reach for it.