How I Built an Honest Website Image Auditor Without Pretending Estimates Are Measurements
Most image-audit tools end with one big, confident number: "You could save 73%!" When I built BatchSet's Website Image Auditor, I kept asking what that number actually was . Was it measured? Estimated? Guessed from a file extension? Most tools don't say. The bytes they measured, the bytes they assumed, and the bytes they couldn't see all end up in one percentage. My goal became simple: clearly…
Building an image-audit tool that doesn't pretend estimates are measurements requires careful consideration of what can be honestly claimed. The first step is to measure transfer sizes closer to what modern browsers receive. This involves setting the Accept header to request modern formats like AVIF, WebP, and AVIF, which can yield more accurate results. However, this method may not perfectly replicate every browser decision, but it's far more representative than using the generic fallback.
Another challenge is handling responsive images. Counting multiple image variants as separate images can inflate the total size, so the auditor groups same-path variants and uses the largest width as a conservative estimate. This is a deliberate choice to avoid understating the true size, even though it doesn't prove every visitor downloaded that file.
When fetching images, the auditor uses HEAD requests to obtain the transfer size without downloading the entire file. This method is effective when a server returns a trustworthy Content-Length for a HEAD request. However, it's not foolproof, as HEAD can be missing, blocked, or incorrect. In such cases, the transfer size is recorded as unknown and excluded from the analysis to maintain a coherent score. This choice has a cost, as unmeasurable images may hide accessibility issues like missing alt attributes.
The auditor also distinguishes between static HTML and the rendered page. It parses the served HTML to identify images, srcset attributes, lazy-loading patterns, and background images. However, it doesn't execute JavaScript or fetch sub-resources, which means images injected by JavaScript or CSS background images aren't included in the analysis. The auditor also detects challenge pages, such as Cloudflare's "Just a moment…" page, and refuses to score them, ensuring that confidences aren't misplaced.
While the header-based sizing approach is accurate for a set of real product images, with a median difference of 0%, it's not perfect. To further improve accuracy, the auditor includes a fallback method for unknown transfer sizes. It sends a one-byte Range request (Range: bytes=0-0) and reads the total size from the Content-Range header. If that fails, the transfer size remains unknown and is reported as a coverage figure, never artificially inflated to zero.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
