LW IT Solutions logo LW IT Solutions logo LW IT Solutions
« Blog Overview /Web Development/Tutorials / Which Image Format a Browser Receives: Checking...
Read this article in other languages:

Which Image Format a Browser Receives: Checking Format Selection and Cache Rules

Which Image Format a Browser Receives: Checking Format Selection and Cache RulesWhich Image Format a Browser Receives: Checking Format Selection and Cache Rules

Management Summary

Websites can deliver the same picture in different formats to suit different browsers and reduce transfer size. Temporary storage must keep those variants separate; the Vary instruction tells it which request differences matter. A historical twenty-site sample found format differences, but mixed request methods limit conclusions about their cause. Good image delivery also depends on the page itself: reserved space prevents layout shifts, suitable loading avoids delays and descriptions make visual content more accessible.

Contents
  1. What the historical sample actually recorded
  2. How a more useful comparison works
  3. Vary controls reuse, not permission to store
  4. A verified lesson from the checker
  5. Dimensions, loading and alternative text
  6. What was outside the sample
  7. A bounded comparison for one URL
  8. Questions and answers
  9. Sources

A server can return different image formats at the same URL. The request header Accept expresses media-type preferences; the response header Vary helps caches select a suitable stored response. These are related mechanisms, but neither a different content type nor a missing header proves that visitors received a broken image.

A historical check of twenty front pages on 6 September 2026 recorded 1,345 image entries and sampled 76 image URLs. The saved results remain useful, but the original interpretation overstated the method: the implementation compared a GET request with a HEAD request, not two otherwise identical GET requests. GET requests the response body as well as headers; HEAD requests the headers without the body. The findings below distinguish recorded values from conclusions that require a new controlled test.

Historical sample: twenty pages, 76 image URLs, fourteen media-type differences in a GET/HEAD comparison, 783 incomplete dimension pairs.
Saved results from 6 September 2026; method differences prevent an isolated Accept-based conclusion.

What the historical sample actually recorded

Fourteen of the 76 pairs had different declared media types. Six New York Times samples reported WebP versus JPEG with Vary: Accept. Six Zeit samples reported WebP versus JPEG without a recorded Vary value; two Onet samples reported AVIF versus PNG without one. The remaining 62 pairs had the same declared media type. This does not establish identical file contents.

The requests differed in method as well as Accept. The alternative request also used Accept: image/*, which permits AVIF and WebP rather than modelling a browser without those formats. Consequently, the fourteen differences are leads for a follow-up test, not fourteen proven cases of Accept-based negotiation. The saved data contains summaries, not both response bodies and complete raw headers.

How a more useful comparison works

A controlled comparison uses GET for both requests, the same URL and matching options apart from Accept. A baseline request can explicitly exclude AVIF and WebP with q=0; a preference such as image/* does not exclude either format. Accept still expresses a request preference: the actual response needs checking.

Useful evidence includes the final URL, status, declared media type, actual file format, byte count, body hash and complete response headers. Equal type and length do not prove equal bytes. Different bytes can also reflect a changing image, CDN behaviour or request timing. Repeated comparisons and, where available, server configuration provide stronger evidence about the cause.

Vary controls reuse, not permission to store

When a cacheable response is selected according to Accept, Vary: Accept normally communicates that selection criterion. A cache cannot simply reuse that stored response for a request with a non-matching Accept value. HTTP permits normalization when comparing field values; storing a separate copy for every literal spelling is not an unavoidable rule.

Whether storage and reuse are allowed also depends on cache controls, freshness and the cache configuration. Missing Vary can create an incorrect-reuse risk, but the historical sample did not demonstrate a faulty CDN response. Restrictions such as no-store and a deliberately configured cache key change the assessment. Vary: * prevents direct reuse without validation.

The header needs token-based parsing. Vary: Accept-Encoding concerns content encoding and is not equivalent to Vary: Accept. An implementation that merely searches for the substring accept can confuse the two.

A verified lesson from the checker

An older local implementation passed the requested header in an option named accept. The shared request library expects kopfzeilen. Comparing those source files verifies the interface mismatch; the intended header was not passed through that option. A test therefore needs to inspect the outgoing request as well as the simulated response. Identical responses alone do not rule out negotiation.

Dimensions, loading and alternative text

The saved markup analysis counted 783 of 1,345 image entries with at least one missing or invalid numeric dimension. This is not a count of images missing both width and height. Six sampled pages had valid dimensions for every detected image. On Heise, 423 of 426 entries lacked a complete valid pair.

Correct width and height help reserve the aspect ratio before an image loads. CSS can also reserve suitable space. Missing attributes therefore identify a review point, not a measured layout shift. Cumulative Layout Shift measures how much visible content unexpectedly moves on the page. Measuring it requires observing the rendered page.

The figure 762 is another heuristic: these entries appeared after the first three images in source order and did not carry loading="lazy". No viewport or CSS layout was measured. Source order cannot determine visibility, and an important initial-view image should not be delayed merely because it is the fourth image in HTML.

Twenty-seven entries lacked an alt attribute. Empty alt="" can be appropriate for purely decorative images or images whose information is already provided nearby. Whether that choice is appropriate depends on the image’s purpose; informative and functional images need a suitable accessible alternative.

What was outside the sample

The checker selected at most six distinct image URLs per page from detected markup. This did not cover every CSS background, script-created image or responsive candidate actually chosen by a browser. Six samples do not establish the behaviour of an entire delivery service.

Three records contained no detected images: Stack Overflow returned 429, Allegro returned 403, and the recorded Bund response yielded no image entries. These cases do not prove that those pages normally contain no images or that two rely on JavaScript. A refused or rate-limited request describes that attempted access, not a complete browser visit.

A bounded comparison for one URL

The following Bash example uses curl 8.4 or later, file and GNU coreutils. The example URL is a placeholder. Both requests are GETs, redirects remain HTTPS, and each download is limited to 10 MiB and 30 seconds. Output remains in a newly created temporary directory for inspection.

Shell
#!/usr/bin/env bash
set -euo pipefail
url='https://example.com/image.png'
out=$(mktemp -d)
printf 'Output: %s\n' "$out"
for variant in modern baseline; do
  if [ "$variant" = modern ]; then
    accept='image/avif,image/webp,image/jpeg,image/png;q=0.8,*/*;q=0'
  else
    accept='image/jpeg,image/png,image/avif;q=0,image/webp;q=0,*/*;q=0'
  fi
  curl --silent --show-error --fail --location \
    --proto '=https' --proto-redir '=https' --max-redirs 3 \
    --connect-timeout 10 --max-time 30 --max-filesize 10485760 \
    -H "Accept: $accept" -D "$out/$variant.headers" \
    -o "$out/$variant.body" \
    -w "$variant status=%{http_code} type=%{content_type} url=%{url_effective}\n" \
    "$url"
  file --mime-type "$out/$variant.body"
  wc -c < "$out/$variant.body"
  sha256sum "$out/$variant.body"
done
printf 'Full response headers: %s/*.headers\n' "$out"

The header files retain redirect responses as well as the final response. Assessment needs the final response’s Vary, Cache-Control and any ETag, alongside the printed status and final URL. file is a format-detection aid, not a complete image-decoder test. Repeated tests are needed before attributing a difference to Accept alone.

The Image Delivery and Format Negotiation Auditor offers a page-level starting point. The implementation reviewed for this article still uses the GET/HEAD comparison and the source-order heuristic described above; its output is not equivalent to the two-GET example. Its Vary check also searches for a substring, so Accept-Encoding can be misclassified. These limitations require checking before treating a result as confirmed negotiation or a caching fault.

Questions and answers

Can modern formats use separate URLs?

Yes. A picture element can offer typed sources and an img fallback. Browser selection also considers media conditions, responsive candidates and display requirements. If each URL is configured to return a fixed format, choosing between those URLs avoids Accept-based format variation at that address. Other reasons for Vary can still exist.

Does every image after the first three need lazy loading?

No. The rendered layout and the initial viewport matter. Below-the-fold images can benefit from deferred loading; initially visible images, especially the likely Largest Contentful Paint image, should not be delayed by a source-order rule.

Lukas Wojcik

Lukas Wojcik

Systems architect and technology enthusiast specializing in scalable tracking solutions, GMP Stack (GA4 & GTM), and robust backend architectures. Advocate for clean code and privacy-first design.

Get in touch

A question or an idea for a web project? Tell me a little about it. This form uses reCAPTCHA and formconfirmed to protect against spam.

Write a comment

Edge cases the article misses and questions about the code are welcome here.

The email address is not published. Required fields are marked with an asterisk.

LUKASWOJCIK.COM · NEWSLETTER

Fresh ideas in your inbox

New articles, practical tools and updates from the projects.

Choose topics (optional)
No selection: all topics.

Subscription starts after confirmation by email. · Privacy

Privacy · Newsletter

Email address, language, selected topics and subscription/confirmation dates are stored to deliver the newsletter. Double opt-in is required. Every issue includes an immediate unsubscribe link. Formconfirmed checks the signup for spam. No email open or click tracking.

Read the full privacy policy ↗