diff --git a/README.md b/README.md index eabb2576..f66d545a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,32 @@ # Squoosh! -Squoosh will be an image compression web app that allows you to dive into the -advanced options provided by various image compressors. +Squoosh is an image compression web app that allows you to dive into the advanced options provided +by various image compressors. +# Privacy + +Google analytics is used to record the following: + +* [Basic visit data](https://support.google.com/analytics/answer/6004245?hl=en&ref_topic=2919631). +* Before and after image size once an image is downloaded. These values are rounded to the nearest + kilobyte. + +Impage compression is handled locally, no additional data is sent to the server. + +# Building locally + +Clone the repo, and: + +```sh +npm install +npm run build +``` + +You'll get an error on first build because of [a stupid bug we haven't fixed +yet](https://github.com/GoogleChromeLabs/squoosh/issues/251). + +You can run the development server with: + +```sh +npm start +``` diff --git a/src/components/intro/index.tsx b/src/components/intro/index.tsx index f87b022e..30fec35c 100644 --- a/src/components/intro/index.tsx +++ b/src/components/intro/index.tsx @@ -129,6 +129,11 @@ export default class Intro extends Component { ); diff --git a/src/components/results/index.tsx b/src/components/results/index.tsx index acebc26a..1886ae5b 100644 --- a/src/components/results/index.tsx +++ b/src/components/results/index.tsx @@ -60,11 +60,16 @@ export default class Results extends Component { @bind onDownload() { + // GA can’t do floats. So we round to ints. We're deliberately rounding to nearest kilobyte to + // avoid cases where exact image sizes leak something interesting about the user. + const before = Math.round(this.props.source!.file.size / 1024); + const after = Math.round(this.props.imageFile!.size / 1024); + const change = Math.round(after / before * 1000); + ga('send', 'event', 'compression', 'download', { - // GA can’t do floats. So we round to ints. - metric1: Math.floor(this.props.source!.file.size), - metric2: Math.floor(this.props.imageFile!.size), - metric3: Math.floor(this.props.imageFile!.size / this.props.source!.file.size * 1000), + metric1: before, + metric2: after, + metric3: change, }); }