Page size: 3,672 kB and 219 requests
Image size: 11,390 kB (http://www.webbloatscore.com/Screenshots/58b58030-6807-4638-...)
WebBS score: 0.322
It's apparently easy to obtain a good WebBS score by including lots of JPEG images. The PNG used for the image size calculation is typically much larger for the same bitmap, so every JPEG reduces the WebBS score.
The site timed out while trying to calculate the scores, so I had to do it manually. The respective sizes were 3377 (html), 283130 (png) and 3323 (html), 92815 (png).
This example is a bit contrived, but you'll see the same effect for more subtle decorations as well (e.g. box-shadow, ...).
I wanted to measure visual information content of a page, and yes, PNG is maybe not the best to do that. JPEGs are smaller, but it introduces another problem of visible artifacts around text.
If anybody knows a better way to measure visual information content, please suggest.
19.5 / 10 = 1.95. (assuming the PNG is 10 MB for simplicity).
You could be fancy and use exponent.
But I doubt there's a good mechanical way to do this. Whether an image is bloat or valuable content requires sophisticated judgment and understanding of what the purpose of the page is.
I completely agree with that. Quick check is to replace all images on a page with placeholder images—if that doesn't reduce functionality of the page then maybe you don't need that images at all.
By the way, your calculator seems to include prefetched pages in the calculation. (link rel="prefetch".) Not sure if that's deliberate or not.
I've got a very similar score of 0.323 for an Angular SPA with a bunch of dependencies (1,276 kB, 44 requests) that basically shows 5 jpeg images.
Would be interesting to see the result when using JPEG instead of PNG. However it's still easy to gamble, just display some large JPEG images in full size and the score will approach 1.
Edit: By the way, here's a working screenshot link for the score above (image size 3,947 kB): http://www.webbloatscore.com/Screenshots/aeea9b6a-4852-4b01-... They screenshot the whole page.
Or less, depending on the JPEG quality setting used in each case I guess. That's not completely unreasonable though - if I only want to look at a few large images (e.g. from Mars) and my browser downloads mostly just that, it's not really bloated.