Gathering detailed insights and metrics for @sitelintcode/optimize-image-on-the-client-side
Gathering detailed insights and metrics for @sitelintcode/optimize-image-on-the-client-side
Optimize image when selecting using input type file
Installations
npm install @sitelintcode/optimize-image-on-the-client-sideDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
23.3.0
NPM Version
10.9.1
Score
67.1
Supply Chain
95.6
Quality
81
Maintenance
100
Vulnerability
80.4
License
Releases
35
Languages
2
TypeScript
JavaScript
TypeScript (66.97%)
JavaScript (33.03%)
Developer
sitelint
Download Statistics
Total Downloads
5,582
Last Day
2
Last Week
12
Last Month
40
Last Year
1,353
GitHub Statistics
MPL-2.0 License
91 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Dec 03, 2024
Bundle Size
8.51 kB
Minified
4.41 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.0.44
Package Id
@sitelintcode/optimize-image-on-the-client-side@0.0.44
Unpacked Size
41.11 kB
Size
12.96 kB
File Count
6
NPM Version
10.9.1
Node Version
23.3.0
Published on
Dec 03, 2024
Total Downloads
Cumulative downloads
Total Downloads
5,582
Dependencies
1
Dev Dependencies
37
@alex_neo/jest-expect-message@types/jest@types/jquery@types/jsdom@types/node@types/sharp@typescript-eslint/eslint-plugin@typescript-eslint/parserbootstrapchokidar-clicopyfilesdpdmeslinteslint-clieslint-plugin-importeslint-plugin-markdownhtml-loaderhuskyjestjest-environment-jsdommarkdownlint-clirelease-itrolluprollup-plugin-commonjsrollup-plugin-dtsrollup-plugin-htmlrollup-plugin-jsonrollup-plugin-minificationrollup-plugin-node-resolverollup-plugin-typescript2rollup-plugin-visualizershelljs-nodeclishxstandard-versiontypescripttypescript-eslintwebpack-bundle-analyzer
Optimize image on the client side
Optimize image after selecting using <input type="file">. The optimization process takes place in the background and it's done automatically by listening for changes on all inputs type file.
Note that images that are larger in size after compression are not taken into account.
Features
- Compressing by the browser, client-side. No image is sent outside of the browser anywhere.
- When compression takes more than 1 second then the user will see a busy indicator.
Demo
Optimize image on the client side
Benefits
- Faster uploading and downloading data.
- Reducing memory consumption.
- Saves the space on the server.
Getting started
NPM
1npm install @sitelintcode/optimize-image-on-the-client-side --save
TypeScript
1import { OptimizeImage } from '@sitelintcode/optimize-image-on-the-client-side'; 2 3const optimizeImage: OptimizeImage = new OptimizeImage(); 4 5optimizeImage.install();
Options
cssQuerySelector?: string | undefined - you can specify here custom CSS selector to find your own input type file. By default there is a global change event listener that handles all inputs type file.
onCompressionDoneCallback?: Function - pass callback after compression is done. const onCompressionDone = (filesBeforeCompression, filesAfterCompression) => {};
quality: number = 0.75 - you may change the default quality parameter. Read more about quality paremeter on MDN Docs.
This could be set through install method arguments:
1const optimizeImage = new OptimizeImage(); 2 3optimizeImage.install(undefined, undefined, 0.85);
or at any time later
1const optimizeImage = new OptimizeImage(); 2 3optimizeImage.quality = 0.85;
Browser environment
1<script src="https://cdn.jsdelivr.net/npm/@sitelintcode/optimize-image-on-the-client-side@0.0.39/dist/optimize-image-on-the-client-side.js"></script> 2<script> 3(function() { 4 const optimizeImage = new window.sitelint.OptimizeImage(); 5 optimizeImage.install(); 6}()) 7</script>
Notes
Note the version number in the jsdelivr URL: 0.0.39. Don't forget to set desired version. You may check releases: https://github.com/sitelint/optimize-image-on-the-client-side/releases
Worth to mention that jsdelivr suggests:
Omit the version completely or use latest to load the latest one (not recommended for production usage).
Technical
import { terser } from "rollup-plugin-terser";was replaced withimport { terser } from "rollup-plugin-minification";becauserollup-plugin-terseris not compatible with Rollup 3.x version. See: https://github.com/TrySound/rollup-plugin-terser/issues/119
Contributing
Contributions are welcome, and greatly appreciated! Contributing doesn't just mean submitting pull requests. There are many different ways for you to get involved, including answering questions on the issues, reporting or triaging bugs, and participating in the features evolution process.
License
MOZILLA PUBLIC LICENSE, VERSION 2.0
No vulnerabilities found.
No security vulnerabilities found.