JPG

JPG (also JPEG) is a lossy image format optimized for photographs and complex images — producing small files by discarding visual detail the human eye is less likely to notice.

How JPG compression works

JPG compression is a multi-step process designed to exploit the limits of human vision. First, the image is converted from RGB to the YCbCr color space, separating brightness (luma) from color (chroma). Human eyes are more sensitive to brightness changes than color changes, so the chroma channels can be stored at lower resolution — a technique called chroma subsampling.

Next, the image is divided into 8x8 pixel blocks. Each block is transformed using the Discrete Cosine Transform (DCT), which converts pixel values into frequency components. High-frequency components represent fine detail and sharp edges. Low-frequency components represent gradual color changes and broad shapes.

The compression step discards high-frequency components based on the quality setting. At high quality (85-95%), most detail is preserved and the file is relatively large. At low quality (30-50%), aggressive discarding produces small files but introduces visible artifacts — blurring around sharp edges, color banding in gradients, and blocky patterns in smooth areas.

This block-based approach is why JPG excels at photographs, where smooth gradients and complex textures dominate. It is also why JPG performs poorly on screenshots — the sharp, high-contrast edges of text and UI elements are exactly the kind of detail the algorithm discards.

JPG vs PNG vs WebP

• JPG — lossy only. Produces small files for photographic content. No transparency support. Artifacts appear around sharp edges and text. Universally supported in every browser, image viewer, and document format.
• PNG — lossless only. Preserves every pixel exactly. Supports transparency. Best for screenshots, text, and UI elements. Files are larger than JPG for photographic content.
• WebP — supports both lossy and lossless modes. At comparable quality, WebP produces smaller files than both JPG and PNG. Supports transparency. Widely supported in modern browsers and increasingly in native applications.

For screenshots, PNG is almost always the better choice. For photographs that will be displayed on the web, JPG remains the universal default due to its broad compatibility, though WebP is increasingly preferred when smaller file sizes are important.

When to use JPG

• Photographs — images with complex color gradients, natural textures, and continuous tones compress efficiently with minimal visible quality loss.
• Hero images and banners — large photographic backgrounds where file size directly impacts page load time and pixel-perfect accuracy is not critical.
• Thumbnail previews — small images where fine detail is not visible at the display size. JPG at moderate quality produces tiny files that load quickly.
• Email attachments — when the recipient's system may not support WebP and file size must be kept small. JPG is the most universally compatible lossy format.
• Social media uploads — platforms often re-compress uploaded images. Starting with a JPG at high quality gives the platform's compressor a better source to work from.

JPG is not the right choice for screenshots with text, images that need transparency, graphics with flat colors and sharp edges, or any asset that will be edited and re-saved multiple times (each save compounds lossy quality loss).

Common mistakes

• Using JPG for screenshots with text. JPG compression blurs text edges and introduces ringing artifacts around high-contrast boundaries. Small text becomes unreadable, and UI labels look smudged. Use PNG for any capture that contains readable text.
• Re-compressing an already compressed JPG. Each save cycle applies lossy compression again, degrading quality further. This is called generation loss. Always edit from the original source file, not a previously compressed JPG.
• Setting quality too low to reduce file size. Below 60-70% quality, artifacts become clearly visible — blocky patterns in smooth areas, color bleed around edges, and loss of fine detail. The file size savings at very low quality are rarely worth the visual degradation.
• Assuming JPG supports transparency. Saving an image with a transparent background as JPG fills the transparent area with a solid color. If transparency is needed, use PNG or WebP instead.