Skip to content
Holtdroid

Debugging web content

Find heavy images and SVG icons

See which images a screen downloads for nothing or too big, and which SVG icons ship with extra digits or several times.

Why: the first screen is slow, and most of its bytes are often images nobody sees and icons with path data no one needs. These tabs say which files to fix first and how much each fix saves, without a DevTools window.

What happens

Section titled “What happens”
  1. The Images tab checks every image the app’s WebViews load.
  2. Turn on the image scan so it also sees where and how big the pages draw each image.
  3. The numbers on top add up what was downloaded, what never appeared on screen and what could be saved.
  4. Findings explain each problem: not on screen, bigger than drawn, a PNG that would be smaller as WebP.
  5. Warnings leaves what is worth fixing first.
  6. The SVG tab finds path data with too many decimals, longer commands than needed and icons shipped twice.

Examples

Section titled “Examples”
  • The first screen is slow. Launch with Check how pages draw their images, open the screen, wait ten seconds and read the warnings: wasn’t on screen and draws it nowhere are bytes the first screen paid for and didn’t show.
  • Report an image to a designer. Open the finding: natural size, drawn size and the WebP sizes are exactly what is needed to export it right.
  • Check a fix. Clear the tab, reload the page in the app and compare Downloaded and Could save with before.
  • Trim an icon set. Too many decimals in icons.js means the export kept six digits where two are enough; shipped more than once means the same icon is bundled into several chunks.

Good to know

Section titled “Good to know”
  • The image scan runs a small script in the app’s pages; the APK isn’t changed. It also lets the SVG tab see the pages’ inline <svg> elements.
  • Savings are measured by re-encoding the real file as WebP in your browser; when that isn’t possible the finding says about.
  • Recordings keep both tabs and judge everything up to the playhead.

If it doesn’t work

Section titled “If it doesn’t work”
  • The tabs are missing: the device doesn’t support DevTools.
  • No not on screen findings: the image scan is off, or the images loaded before it was turned on. Reload the page in the app.
  • An image isn’t listed: images inlined as data: URLs, redirects and failed requests are skipped.

More details: Images, SVG.