skip to content

Your edge configuration applies Brotli to every response, including JPEG and AVIF images, WOFF2 fonts and MP4 video. Which of those actually get smaller, and what does compressing the rest cost you?

level: middleimportance: should knowfreq 42%

answer

  1. two families of bytes
  2. already-compressed containers gain nothing
  3. WOFF2 is Brotli inside
  4. allowlist by type, plus a size floor
  5. SVG is text wearing an image type

basics

~20 s

Only text-shaped responses shrink: HTML, CSS, JavaScript, JSON, XML and SVG. JPEG, AVIF, MP4 and WOFF2 are already compressed by their own formats, so re-compressing them gains a percent or two while burning CPU on every response.

solid answer

~50 s

Only the text-shaped responses shrink. HTML, CSS, JavaScript, JSON, XML and SVG typically fall to a quarter or a third of their size. JPEG, AVIF, WebP, PNG, GIF and MP4 are already compressed by their own formats, and WOFF2 already compresses its font tables with Brotli internally — running Brotli over any of them buys a percent or two at best. The cost is real: dynamic compression burns CPU on every response, which shows up as extra time to first byte under load and as CPU you would rather spend compressing text harder. So the rule is a MIME-type allowlist plus a minimum response size, not compress-everything. The mistake in the other direction is just as common: skipping SVG because it is served as an image, and skipping JSON API responses. Both compress very well.

code

bash · 6 lines
bash
# Wire size with and without Brotli, per asset
for u in https://example.com/app.css https://example.com/icons.svg https://example.com/hero.jpg; do
  raw=$(curl -s "$u" | wc -c)
  br=$(curl -sH 'Accept-Encoding: br' "$u" | wc -c)
  echo "$u  raw=$raw  br=$br"
done

go deeper

for a junior

Say plainly that text compresses and images and video do not, and that the real win is having HTML, CSS and JavaScript compressed at all.

for a middle

Explain why already-compressed containers resist further compression, and name the ones people get wrong in both directions — SVG and JSON yes, WOFF2 and MP4 no.

for a senior

Show that you weigh the CPU: high-quality on-the-fly compression on large responses costs time to first byte under load, so match the quality level and the allowlist to the actual traffic mix.

for a principal

Own where compression happens across build, origin and edge, so one team's config change cannot silently double CPU cost or leave an entire asset class shipping uncompressed for months.

## Two families of bytes For compression purposes every response you serve falls into one of two families. **Text-shaped** payloads — HTML, CSS, JavaScript, JSON, XML, plain text, and SVG — are full of repeated tokens, long identifiers and predictable structure, which is exactly what a general-purpose compressor exploits. Ratios of three to five times are routine, and minified JavaScript sits comfortably in that band. **Already-compressed containers** — JPEG, PNG, GIF, WebP, AVIF, MP4, WOFF2, and anything ending in `.zip` or `.gz` — have had format-specific compression applied at creation time, and the output of a good compressor looks close to random data to the next compressor in line. The reason is not that these formats are "binary". Gzip and Brotli operate on arbitrary bytes and will happily compress a binary file that contains redundancy. The reason is that the redundancy is already gone: PNG applies DEFLATE to its pixel data, GIF uses LZW, JPEG and AVIF and MP4 use their own domain-specific coding, and WOFF2 compresses its font tables with Brotli as part of the format definition. Compressing those again finds essentially nothing to exploit. ## What compressing them anyway costs The saving is roughly zero; the cost is not. **CPU per response.** On-the-fly compression runs on every cache miss, and Brotli in particular is asymmetric: decoding is cheap, encoding at high quality is expensive. Spending that budget on a 4 MB video segment that will not shrink is CPU you cannot spend compressing the HTML harder, and under load it turns into queueing that users experience as slower time to first byte. **Latency on large responses.** A compressor has to work through the bytes before output can flow, so for large payloads on-the-fly compression can add delay to a response that would otherwise have started streaming immediately — a bad trade when the outcome is a saving of a fraction of a percent. **Operational noise.** Compressed variants are stored and served per encoding, so blanket compression multiplies stored variants at the edge for asset classes that gain nothing from having them. Hence the standard shape of a correct configuration: an explicit MIME-type allowlist of text-shaped types, plus a **minimum size threshold** — very small responses of a few hundred bytes are not worth compressing at all, because the ratio on tiny inputs is poor and the per-response overhead outweighs the win. ## The two mistakes teams actually make In practice, over-compression wastes CPU quietly while **under-compression wastes bandwidth quietly**, and the second is more damaging. The classic misses: - **SVG.** It is served with an image-flavoured content type, so it falls off allowlists built by thinking "images are already compressed". SVG is XML — an icon sprite or illustration frequently compresses by 70% or more. Always compress it. - **JSON API responses.** Dynamic endpoints on a different origin or behind a different proxy often miss the config the static site got. Repetitive JSON compresses extremely well, and on a data-heavy screen it is the largest text payload on the page. - **Assets on a second origin.** A storage bucket or a legacy host serving your CSS and JS may default to no compression at all. This is invisible unless you check. - **Web manifests, plain-text and source-map-adjacent files** for the same allowlist reason. The check is cheap: request an asset with and without an accepted encoding and compare sizes. ```bash for u in https://example.com/app.css https://example.com/icons.svg https://example.com/hero.jpg; do raw=$(curl -s "$u" | wc -c) br=$(curl -sH 'Accept-Encoding: br' "$u" | wc -c) echo "$u raw=$raw br=$br" done ``` Identical numbers on a text asset mean it is not being compressed. Near-identical numbers on the JPEG are the expected, correct outcome. ## Static versus dynamic The same allowlist reasoning applies to build outputs, with one extra lever: compression work you do once at build time can afford a much higher quality setting than work you do per request, because nobody is waiting on it. That is precisely why the analysis matters — you want that expensive, one-time effort spent on your text assets and never spent on your media. ## The answer in one line Compress by content shape, not by reflex. Text yes, already-compressed containers no, SVG and JSON emphatically yes, small responses not worth it — and verify what is actually happening on the wire rather than trusting the configuration to mean what it says.

  • Which text-like responses do teams most often forget to compress?
    SVG, because it is served with an image content type and gets dropped from allowlists; JSON API responses, because the API is often behind a different proxy or origin than the static site; and any assets served straight from a storage bucket, which frequently defaults to no compression. All three compress very well, so the loss is pure waste.
  • Why is Brotli described as asymmetric, and why does that matter for the decision?
    Decoding is cheap and roughly constant, while encoding at high quality is expensive and grows with the setting. That means compression work is worth paying for once at build time on static text assets, where you can afford a high quality level, and worth being conservative about on every dynamic response — and worth spending on nothing that will not shrink.
  • How would you spot an asset class that is silently uncompressed in production?
    Fetch a sample from each origin twice, once advertising an encoding and once not, and compare byte counts — identical sizes on a text asset means no compression is happening. Do it per origin and per content type, since the gaps usually appear where a bucket, an API gateway or a legacy host has its own configuration nobody reviewed.

saying these in an interview costs you the question

  • Says compressing everything is free and always safe
  • Claims JPEG or MP4 shrink meaningfully under Brotli
  • Skips SVG because it is served as an image
  • Thinks gzip only works on text files
  • Ignores that on-the-fly compression costs CPU per response

context