CCSF Advanced HTML & CSS

This web page displays how image file size increases dramatically when the JPEG quality factor is greater than 70%.
The version of the image displayed changes as the point on the graph moves.
The vertical axis on the graph is the image size (KB), and the horizontal axis is the JPEG quality factor.
The jpeg compression algorithm is so good that it is difficult to notice a difference even when the jpeg quality factor is low.
If you look carefully at the plastic box near the lemons, you might notice that it looks slightly blotchy when the quality level is < 20.

I took the photo at the Vegetable Market in Venice Italy.
These files were compressed using the free project for the unix command line jpegoptim
There is also a Windows version of this project jpegoptim for Windows
Please see this article for a case study of using jpegoptim Losslessly Compressing My JPEG Photos with jpegoptim
The graph was created using the Node version of the JavaScript package d3 and bundled using webpack
To view the image in greater detail, resize your browser very wide and click the "Toggle Max Width" button.
I minimzed the HTML using html-minifier and validated the HTML using html-validator
I minimized the CSS using >clean-css and validated the CSS using >css-validator