Why Does JPEG Struggle With Simple Graphics Like Logos and What Should You Use Instead

JPEG struggles with simple graphics because it was built to discard precisely the information sharp edges depend on. Its 8×8 block transform, quantization, and chroma subsampling smear hard boundaries, so a crisp logo acquires fuzz, halos, and color noise. For flat-color art, use PNG for lossless finery, SVG for vector masters, WebP for modern web delivery, or GIF only for legacy animation.

The 8×8 block transform, and why edges are its worst case

JPEG does not store pixels. It divides the image into 8×8-pixel blocks, converts each block into 64 frequency coefficients with a discrete cosine transform, and quantizes those coefficients. Low frequencies describe broad gradients. High frequencies describe detail and abrupt transitions. A logo edge, or a line of text, is almost pure high frequency.

Quantization divides each coefficient by a step size and rounds the result. For high-frequency coefficients the step is large, so many values become zero. That is the compression. On a photograph, the loss hides in texture. On flat color, the discarded highs were the entire signal, so the block average leaks across the boundary.

The inverse transform then reconstructs each block independently. Because blocks share no information, a hard edge inside one block becomes a gradual ramp, and adjacent blocks start at slightly different averages. You see this as ringing, a faint echo of bright and dark ripples near the edge. The block grid itself can become visible as faint 8-pixel tiling.

A plain-language version: JPEG describes each small tile as a blend of soft waves, and a knife-sharp edge needs infinitely many waves to describe, so the compressor drops almost all of them. What survives is a blurred approximation of the edge.

Quantified context: what the loss costs on graphics

The damage scales with the quality setting and with how flat the source is. Saving at quality 90 versus quality 60 on the same logo does not just change file size; it changes the edge profile from slightly soft to visibly stepped.

The fidelity-versus-size trade is not symmetric. A logo PNG might be larger than the same logo as JPEG, but the JPEG is degraded every time it is re-saved, and the degradation compounds. PNG re-saves losslessly forever. That compounding matters more than a one-time size difference for assets reused across a brand system.

Chroma subsampling compounds the problem. Many encoders store color at half resolution in each axis, keeping luma full. A red logo on white is a color edge, so subsampling blurs the color boundary even before quantization touches the luma detail. Saturated reds and blues are the worst offenders because they concentrate signal in chroma channels.

Edge cases: where the artifacts cluster

Text inside graphics is brutal. Small black type on white is a high-contrast edge at every stroke, and JPEG ringing makes small text look dirty or shadowed. The same file viewed at 100 percent may look acceptable and at 200 percent reveal halos.

Gradients and smooth blends degrade differently. A logo with a subtle drop shadow or a radial gradient can band in JPEG because smooth transitions are approximated by few coefficients, producing visible steps across the 8-pixel grid. Flat vector fills, by contrast, fail at the boundary.

Repeated edits are a quiet killer. Each JPEG save-and-edit cycle re-quantizes, and the artifacts accumulate. A logo emailed through several departments and re-saved each time can drift noticeably from the master. Keep one lossless master and derive all other formats from it.

Scanning and screenshot pipelines add a second layer. Screen captures and document scans are usually saved as JPEG by default, so a logo captured that way already carries artifacts before you touch it. Compare against a vector original whenever possible.

One counterintuitive detail: higher JPEG quality does not fully solve the problem. Even at quality 100, the DCT and rounding still perturb hard edges, and the file can be larger than a clean PNG while looking slightly soft. Lossless is a different mode, not a point on the quality slider. Professionals treat JPEG as a delivery format for photographic content only, never as a master.

Misconceptions worth retiring

Low file size does not mean low quality is acceptable for graphics. The smallest JPEG may look fine in a thumbnail and unusable on a retina display or printed large. Judge at the size and device where the asset will actually appear.

The format label is not the whole story. A file named .jpg that is actually a PNG will be handled by its real content. Extension lies are common in downloaded assets and confuse automated pipelines.

Transparency is not a JPEG feature. GIF has only 1-bit transparency, so anti-aliased edges against an unknown background look ragged. PNG and WebP carry full alpha, which is why logos sit cleanly on any background.

Vector is not automatically better everywhere. SVG is ideal for shapes and type but unsuitable for photographic texture, and some raster-heavy logos become complex SVG files. Use SVG for geometric brand marks and raster lossless for anything with photographic detail inside it.

Practical actions: choosing and exporting the right format

Start from a vector master whenever the logo exists as vector. Export SVG for web and print where supported. When a raster is required, export PNG at the display size, or at 2× and 3× for high-density screens, from that master.

For web delivery, prefer WebP or AVIF with a lossless or high-quality setting for graphics, and keep PNG as the compatibility fallback. For legacy email and old clients, PNG is the safe universal choice.

Match the format to the content. Photographs and photographic composites go to JPEG. Flat logos, icons, text, and screenshots go to PNG or a lossless modern format. Animation of a simple graphic goes to WebP or APNG where supported, and GIF only for compatibility.

Red flags that a graphic asset is already damaged: Visible halo ripples beside hard edges when zoomed to 200 percent or more. A faint 8-pixel checkerboard or tiling across flat areas. Color fringing on saturated red or blue shapes. Text that looks shadowed or dirty at small sizes. A file that grows larger and blurrier after each re-save. Alpha edges that show a white or colored fringe on new backgrounds.

Audit existing assets by opening them at 200 percent and checking the edge profile. Replace any JPEG logo with a regenerated lossless file from the vector source.

Limitations and the honest boundary of this guidance

Format support is not universal. Some email clients, older browsers, and print workflows still handle WebP or AVIF poorly or not at all, so PNG remains the dependable baseline and JPEG the dependable photographic fallback. Conversion tools vary in how aggressively they quantize, so two encoders given identical settings can produce different artifact levels; you must inspect actual output rather than trust a slider label.

Lossless files are larger, and that is a real cost at scale for high-traffic pages; weigh size against fidelity per asset class rather than applying one rule everywhere. The mechanisms above are stable properties of the JPEG standard, but specific encoder implementations and current format support change over time, so verify against your own delivery targets before committing a brand system to one format.