├── src ├── vue │ ├── index.ts │ ├── index.js │ ├── index.d.ts │ ├── index.js.map │ ├── index.d.ts.map │ └── OptimizedImage.vue ├── angular │ ├── index.ts │ ├── index.js │ ├── index.d.ts │ ├── index.js.map │ ├── index.d.ts.map │ ├── optimized-image.component.d.ts │ ├── optimized-image.component.d.ts.map │ ├── optimized-image.component.ts │ ├── optimized-image.component.js.map │ └── optimized-image.component.js ├── react │ ├── index.ts │ ├── index.js │ ├── index.d.ts │ ├── index.js.map │ ├── index.d.ts.map │ ├── OptimizedImage.d.ts │ ├── OptimizedImage.d.ts.map │ ├── OptimizedImage.js │ ├── OptimizedImage.js.map │ └── OptimizedImage.tsx ├── index.ts ├── index.d.ts ├── index.js ├── index.d.ts.map ├── index.js.map ├── shims-vue.d.ts ├── optimizer.d.ts ├── optimizer.d.ts.map ├── optimizer.js.map ├── optimizer.js └── optimizer.ts ├── bun.lockb ├── .prettierrc.json ├── .github ├── dependabot.yml └── FUNDING.yml ├── tsconfig.json ├── LICENSE ├── package.json ├── CONTRIBUTING.md ├── .gitignore ├── README.md └── CODE_OF_CONDUCT.md /src/vue/index.ts: -------------------------------------------------------------------------------- 1 | export * from './OptimizedImage.vue' 2 | -------------------------------------------------------------------------------- /src/angular/index.ts: -------------------------------------------------------------------------------- 1 | export * from './optimized-image.component' 2 | -------------------------------------------------------------------------------- /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monkey531/image-optimize-cli/HEAD/bun.lockb -------------------------------------------------------------------------------- /src/react/index.ts: -------------------------------------------------------------------------------- 1 | export { default as OptimizedImage } from './OptimizedImage' 2 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | // src/index.ts 2 | 3 | export { optimizeImage } from './optimizer' 4 | -------------------------------------------------------------------------------- /src/vue/index.js: -------------------------------------------------------------------------------- 1 | export * from './OptimizedImage.vue'; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | export { optimizeImage } from './optimizer'; 2 | //# sourceMappingURL=index.d.ts.map -------------------------------------------------------------------------------- /src/vue/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './OptimizedImage.vue'; 2 | //# sourceMappingURL=index.d.ts.map -------------------------------------------------------------------------------- /src/angular/index.js: -------------------------------------------------------------------------------- 1 | export * from './optimized-image.component'; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/angular/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './optimized-image.component'; 2 | //# sourceMappingURL=index.d.ts.map -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // src/index.ts 2 | export { optimizeImage } from './optimizer'; 3 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/react/index.js: -------------------------------------------------------------------------------- 1 | export { default as OptimizedImage } from './OptimizedImage'; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/react/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default as OptimizedImage } from './OptimizedImage'; 2 | //# sourceMappingURL=index.d.ts.map -------------------------------------------------------------------------------- /src/vue/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"} -------------------------------------------------------------------------------- /src/angular/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA"} -------------------------------------------------------------------------------- /src/vue/index.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"} -------------------------------------------------------------------------------- /src/angular/index.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA"} -------------------------------------------------------------------------------- /src/index.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA"} -------------------------------------------------------------------------------- /src/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,eAAe;AAEf,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA"} -------------------------------------------------------------------------------- /src/react/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA"} -------------------------------------------------------------------------------- /src/react/index.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA"} -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue' 3 | const component: DefineComponent<{}, {}, any> 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "semi": false, 4 | "tabWidth": 2, 5 | "singleQuote": true, 6 | "printWidth": 100, 7 | "trailingComma": "none" 8 | } -------------------------------------------------------------------------------- /src/optimizer.d.ts: -------------------------------------------------------------------------------- 1 | interface OptimizeOptions { 2 | quality?: number; 3 | width?: number; 4 | height?: number; 5 | format?: string; 6 | } 7 | export declare function optimizeImage(url: string, options?: OptimizeOptions): string; 8 | export {}; 9 | //# sourceMappingURL=optimizer.d.ts.map -------------------------------------------------------------------------------- /src/angular/optimized-image.component.d.ts: -------------------------------------------------------------------------------- 1 | export declare class OptimizedImageComponent { 2 | src: string; 3 | alt: string; 4 | quality: number; 5 | width: number; 6 | height: number; 7 | format: string; 8 | get optimizedSrc(): string; 9 | } 10 | //# sourceMappingURL=optimized-image.component.d.ts.map -------------------------------------------------------------------------------- /src/optimizer.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"optimizer.d.ts","sourceRoot":"","sources":["optimizer.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,MAAM,CAuBhF"} -------------------------------------------------------------------------------- /src/angular/optimized-image.component.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"optimized-image.component.d.ts","sourceRoot":"","sources":["optimized-image.component.ts"],"names":[],"mappings":"AAGA,qBAIa,uBAAuB;IACzB,GAAG,EAAG,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAK;IAChB,OAAO,EAAE,MAAM,CAAK;IACpB,KAAK,EAAE,MAAM,CAAM;IACnB,MAAM,EAAE,MAAM,CAAM;IACpB,MAAM,EAAE,MAAM,CAAK;IAE5B,IAAI,YAAY,WAOf;CACF"} -------------------------------------------------------------------------------- /src/react/OptimizedImage.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface OptimizedImageProps { 3 | src: string; 4 | alt?: string; 5 | quality?: number; 6 | width?: number; 7 | height?: number; 8 | format?: string; 9 | } 10 | declare const OptimizedImage: React.FC; 11 | export default OptimizedImage; 12 | //# sourceMappingURL=OptimizedImage.d.ts.map -------------------------------------------------------------------------------- /src/react/OptimizedImage.d.ts.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"OptimizedImage.d.ts","sourceRoot":"","sources":["OptimizedImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,mBAAmB;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAWjD,CAAA;AAED,eAAe,cAAc,CAAA"} -------------------------------------------------------------------------------- /src/react/OptimizedImage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { optimizeImage } from '@/optimizer'; 3 | const OptimizedImage = ({ src, alt = '', quality, width, height, format }) => { 4 | const optimizedSrc = optimizeImage(src, { quality, width, height, format }); 5 | return React.createElement("img", { src: optimizedSrc, alt: alt, width: width, height: height }); 6 | }; 7 | export default OptimizedImage; 8 | //# sourceMappingURL=OptimizedImage.js.map -------------------------------------------------------------------------------- /src/react/OptimizedImage.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"OptimizedImage.js","sourceRoot":"","sources":["OptimizedImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW3C,MAAM,cAAc,GAAkC,CAAC,EACrD,GAAG,EACH,GAAG,GAAG,EAAE,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,MAAM,EACP,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,aAAa,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IAE3E,OAAO,6BAAK,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAAA;AAC3E,CAAC,CAAA;AAED,eAAe,cAAc,CAAA"} -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /src/react/OptimizedImage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { optimizeImage } from '@/optimizer' 3 | 4 | interface OptimizedImageProps { 5 | src: string 6 | alt?: string 7 | quality?: number 8 | width?: number 9 | height?: number 10 | format?: string 11 | } 12 | 13 | const OptimizedImage: React.FC = ({ 14 | src, 15 | alt = '', 16 | quality, 17 | width, 18 | height, 19 | format 20 | }) => { 21 | const optimizedSrc = optimizeImage(src, { quality, width, height, format }) 22 | 23 | return {alt} 24 | } 25 | 26 | export default OptimizedImage 27 | -------------------------------------------------------------------------------- /src/angular/optimized-image.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core' 2 | import { optimizeImage } from '@/optimizer' 3 | 4 | @Component({ 5 | selector: 'app-optimized-image', 6 | template: `` 7 | }) 8 | export class OptimizedImageComponent { 9 | @Input() src!: string 10 | @Input() alt: string = '' 11 | @Input() quality: number = 80 12 | @Input() width: number = 800 13 | @Input() height: number = 600 14 | @Input() format: string = '' 15 | 16 | get optimizedSrc() { 17 | return optimizeImage(this.src, { 18 | quality: this.quality, 19 | width: this.width, 20 | height: this.height, 21 | format: this.format 22 | }) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/vue/OptimizedImage.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "jsx": "react", 7 | "esModuleInterop": true, 8 | "skipLibCheck": true, 9 | "allowJs": true, 10 | "types": ["vue"], 11 | "strict": true, 12 | "baseUrl": "./", 13 | "paths": { 14 | "@/*": ["src/*"] 15 | }, 16 | "declaration": true, // Generate .d.ts files for TypeScript declarations 17 | "declarationMap": true, // Generate sourcemaps for .d.ts files 18 | "sourceMap": true // Generate sourcemaps for .js files 19 | }, 20 | "include": [ 21 | "src/**/*.ts", 22 | "src/**/*.d.ts", 23 | "src/**/*.tsx", 24 | "src/**/*.vue" 25 | ], 26 | "exclude": [ 27 | "node_modules", 28 | "dist" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [muhammad-fiaz] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 15 | -------------------------------------------------------------------------------- /src/angular/optimized-image.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"optimized-image.component.js","sourceRoot":"","sources":["optimized-image.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;IAM9B,uBAAuB;4BAJnC,SAAS,CAAC;YACT,QAAQ,EAAE,qBAAqB;YAC/B,QAAQ,EAAE,4EAA4E;SACvF,CAAC;;;;;;;;;;;;;;;;;;;;;;;QASA,IAAI,YAAY;YACd,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAA;QACJ,CAAC;;YAdQ,QAAG,sDAAS;YACZ,QAAG,gGAAW,EAAE,GAAA;YAChB,YAAO,oGAAW,EAAE,GAAA;YACpB,UAAK,sGAAW,GAAG,GAAA;YACnB,WAAM,qGAAW,GAAG,GAAA;YACpB,WAAM,sGAAW,EAAE,GAAA;;;;;;;2BAL3B,KAAK,EAAE;2BACP,KAAK,EAAE;+BACP,KAAK,EAAE;6BACP,KAAK,EAAE;8BACP,KAAK,EAAE;8BACP,KAAK,EAAE;QALC,2JAAA,GAAG,6BAAH,GAAG,iFAAS;QACZ,2JAAA,GAAG,6BAAH,GAAG,iFAAa;QAChB,uKAAA,OAAO,6BAAP,OAAO,yFAAa;QACpB,iKAAA,KAAK,6BAAL,KAAK,qFAAc;QACnB,oKAAA,MAAM,6BAAN,MAAM,uFAAc;QACpB,oKAAA,MAAM,6BAAN,MAAM,uFAAa;QAN9B,6KAgBC;;;QAhBY,uDAAuB;;;;SAAvB,uBAAuB"} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Muhammad Fiaz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/optimizer.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"optimizer.js","sourceRoot":"","sources":["optimizer.ts"],"names":[],"mappings":"AAOA,MAAM,UAAU,aAAa,CAAC,GAAW,EAAE,UAA2B,EAAE;IACtE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAA;IAElD,8BAA8B;IAC9B,MAAM,UAAU,GACb,SAAiB,CAAC,UAAU;QAC5B,SAAiB,CAAC,aAAa;QAC/B,SAAiB,CAAC,gBAAgB,CAAA;IACrC,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,UAAU;IAErE,IAAI,eAAe,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAA,CAAC,mCAAmC;IACvE,IAAI,aAAa,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,GAAG,CAAA,CAAC,iCAAiC;IAClE,IAAI,cAAc,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,GAAG,CAAA,CAAC,kCAAkC;IAErE,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;QACtB,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,EAAE,EAAE,EAAE,CAAC,CAAA,CAAC,gBAAgB;QACrE,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC,CAAA,CAAC,eAAe;QAC/D,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,CAAA,CAAC,gBAAgB;IACpE,CAAC;SAAM,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;QAC7B,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,EAAE,EAAE,EAAE,CAAC,CAAA,CAAC,6BAA6B;IACpF,CAAC;IAED,OAAO,GAAG,GAAG,YAAY,eAAe,UAAU,aAAa,WAAW,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;AAChI,CAAC"} -------------------------------------------------------------------------------- /src/optimizer.js: -------------------------------------------------------------------------------- 1 | export function optimizeImage(url, options = {}) { 2 | const { quality, width, height, format } = options; 3 | // Handle dynamic optimization 4 | const connection = navigator.connection || 5 | navigator.mozConnection || 6 | navigator.webkitConnection; 7 | const downloadSpeed = connection ? connection.downlink : 1; // in Mbps 8 | let adjustedQuality = quality !== null && quality !== void 0 ? quality : 80; // Default quality if not specified 9 | let adjustedWidth = width !== null && width !== void 0 ? width : 800; // Default width if not specified 10 | let adjustedHeight = height !== null && height !== void 0 ? height : 600; // Default height if not specified 11 | if (downloadSpeed < 1) { 12 | adjustedQuality = Math.max(adjustedQuality - 20, 30); // lower quality 13 | adjustedWidth = Math.floor(adjustedWidth * 0.8); // reduce width 14 | adjustedHeight = Math.floor(adjustedHeight * 0.8); // reduce height 15 | } 16 | else if (downloadSpeed < 3) { 17 | adjustedQuality = Math.max(adjustedQuality - 10, 50); // moderate quality reduction 18 | } 19 | return `${url}?quality=${adjustedQuality}&width=${adjustedWidth}&height=${adjustedHeight}${format ? `&format=${format}` : ''}`; 20 | } 21 | //# sourceMappingURL=optimizer.js.map -------------------------------------------------------------------------------- /src/optimizer.ts: -------------------------------------------------------------------------------- 1 | interface OptimizeOptions { 2 | quality?: number 3 | width?: number 4 | height?: number 5 | format?: string 6 | } 7 | 8 | export function optimizeImage(url: string, options: OptimizeOptions = {}): string { 9 | const { quality, width, height, format } = options 10 | 11 | // Handle dynamic optimization 12 | const connection = 13 | (navigator as any).connection || 14 | (navigator as any).mozConnection || 15 | (navigator as any).webkitConnection 16 | const downloadSpeed = connection ? connection.downlink : 1 // in Mbps 17 | 18 | let adjustedQuality = quality ?? 80 // Default quality if not specified 19 | let adjustedWidth = width ?? 800 // Default width if not specified 20 | let adjustedHeight = height ?? 600 // Default height if not specified 21 | 22 | if (downloadSpeed < 1) { 23 | adjustedQuality = Math.max(adjustedQuality - 20, 30) // lower quality 24 | adjustedWidth = Math.floor(adjustedWidth * 0.8) // reduce width 25 | adjustedHeight = Math.floor(adjustedHeight * 0.8) // reduce height 26 | } else if (downloadSpeed < 3) { 27 | adjustedQuality = Math.max(adjustedQuality - 10, 50) // moderate quality reduction 28 | } 29 | 30 | return `${url}?quality=${adjustedQuality}&width=${adjustedWidth}&height=${adjustedHeight}${format ? `&format=${format}` : ''}` 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image-optimize-cli", 3 | "version": "0.0.0", 4 | "description": "A library for optimizing images dynamically based on user internet speed and quality settings.", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "types": "src/index.d.ts", 8 | "scripts": { 9 | "build": "tsc", 10 | "prepublishOnly": "npm run build", 11 | "format": "prettier --write src/", 12 | "lint": "eslint 'src/**/*.{js,jsx,ts,tsx,vue}' --fix" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/muhammad-fiaz/image-optimize-cli.git" 17 | }, 18 | "keywords": [ 19 | "image-optimization", 20 | "dynamic-image", 21 | "image-processing" 22 | ], 23 | "author": "Muhammad Fiaz", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/muhammad-fiaz/image-optimize-cli/issues" 27 | }, 28 | "homepage": "https://github.com/muhammad-fiaz/image-optimize-cli#readme", 29 | "peerDependencies": { 30 | "react": "^18.0.0", 31 | "vue": "^3.4.33", 32 | "@angular/core": "^18.1.1" 33 | }, 34 | "devDependencies": { 35 | "typescript": "^5.5.4", 36 | "vue-tsc": "^2.0.28", 37 | "prettier": "^3.3.3" 38 | }, 39 | 40 | "exports": { 41 | ".": "./src/index.js", 42 | "./react": "./src/react/index.js", 43 | "./vue": "./src/vue/index.js", 44 | "./angular": "./src/angular/index.js" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to `image-optimize-cli` 2 | 3 | Thank you for your interest in contributing to `image-optimize-cli`! We welcome contributions of all types, from bug fixes and features to documentation improvements. Please follow these guidelines to help us maintain a high-quality project. 4 | 5 | ## Getting Started 6 | 7 | 1. **Fork the Repository**: Click the "Fork" button at the top right of the repository page to create your own copy of the project. 8 | 9 | 2. **Clone Your Fork**: Clone your forked repository to your local machine using: 10 | ```sh 11 | git clone https://github.com/your-username/image-optimize-cli.git 12 | ``` 13 | 14 | 3. **Create a New Branch**: Create a new branch for your work. It's good practice to name your branch descriptively based on the changes you're making. 15 | ```sh 16 | git checkout -b my-feature-branch 17 | ``` 18 | 19 | 4. **Make Changes**: Implement your changes in the code. If you're adding a new feature or fixing a bug, make sure to write clear and concise commit messages. 20 | 21 | 5. **Run Tests**: Ensure that all tests pass before submitting your changes. If you’re adding new features, consider writing tests for them as well. 22 | ```sh 23 | npm test 24 | ``` 25 | 26 | 6. **Commit Your Changes**: Commit your changes with a descriptive message. 27 | ```sh 28 | git add . 29 | git commit -m "Describe your changes here" 30 | ``` 31 | 32 | 7. **Push Your Branch**: Push your changes to your forked repository. 33 | ```sh 34 | git push origin my-feature-branch 35 | ``` 36 | 37 | 8. **Open a Pull Request**: Go to the original repository and open a pull request from your forked repository and branch. Provide a clear description of your changes and why they are needed. 38 | 39 | ## Coding Guidelines 40 | 41 | - **Follow the Code Style**: Ensure your code adheres to the existing code style of the project. This includes formatting, naming conventions, and coding practices. 42 | 43 | - **Write Tests**: If you're adding new features or fixing bugs, include tests to cover your changes. Ensure that all existing tests pass. 44 | 45 | - **Documentation**: Update the documentation if your changes affect how the project is used or configured. This includes README, code comments, and inline documentation. 46 | 47 | ## Reporting Issues 48 | 49 | If you find a bug or have a feature request, please open an issue on the [issue tracker](https://github.com/muhammad-fiaz/image-optimize-cli/issues). Provide as much detail as possible, including steps to reproduce the issue, expected behavior, and actual behavior. 50 | 51 | ## Contact 52 | 53 | For any questions or additional help, feel free to reach out to the maintainers via the [issue tracker](https://github.com/muhammad-fiaz/image-optimize-cli/issues) or join [discord](https://discord.com/invite/pMw7nfBzXz) directly. 54 | 55 | --- 56 | 57 | Thank you for contributing to `image-optimize-cli`! 58 | 59 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # IntelliJ project files 3 | .idea 4 | *.iml 5 | out 6 | gen 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | lerna-debug.log* 14 | .pnpm-debug.log* 15 | 16 | # Diagnostic reports (https://nodejs.org/api/report.html) 17 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 18 | 19 | # Runtime data 20 | pids 21 | *.pid 22 | *.seed 23 | *.pid.lock 24 | 25 | # Directory for instrumented libs generated by jscoverage/JSCover 26 | lib-cov 27 | 28 | # Coverage directory used by tools like istanbul 29 | coverage 30 | *.lcov 31 | 32 | # nyc test coverage 33 | .nyc_output 34 | 35 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 36 | .grunt 37 | 38 | # Bower dependency directory (https://bower.io/) 39 | bower_components 40 | 41 | # node-waf configuration 42 | .lock-wscript 43 | 44 | # Compiled binary addons (https://nodejs.org/api/addons.html) 45 | build/Release 46 | 47 | # Dependency directories 48 | node_modules/ 49 | jspm_packages/ 50 | 51 | # Snowpack dependency directory (https://snowpack.dev/) 52 | web_modules/ 53 | 54 | # TypeScript cache 55 | *.tsbuildinfo 56 | 57 | # Optional npm cache directory 58 | .npm 59 | 60 | # Optional eslint cache 61 | .eslintcache 62 | 63 | # Optional stylelint cache 64 | .stylelintcache 65 | 66 | # Microbundle cache 67 | .rpt2_cache/ 68 | .rts2_cache_cjs/ 69 | .rts2_cache_es/ 70 | .rts2_cache_umd/ 71 | 72 | # Optional REPL history 73 | .node_repl_history 74 | 75 | # Output of 'npm pack' 76 | *.tgz 77 | 78 | # Yarn Integrity file 79 | .yarn-integrity 80 | 81 | # dotenv environment variable files 82 | .env 83 | .env.development.local 84 | .env.test.local 85 | .env.production.local 86 | .env.local 87 | 88 | # parcel-bundler cache (https://parceljs.org/) 89 | .cache 90 | .parcel-cache 91 | 92 | # Next.js build output 93 | .next 94 | out 95 | 96 | # Nuxt.js build / generate output 97 | .nuxt 98 | dist 99 | 100 | # Gatsby files 101 | .cache/ 102 | # Comment in the public line in if your project uses Gatsby and not Next.js 103 | # https://nextjs.org/blog/next-9-1#public-directory-support 104 | # public 105 | 106 | # vuepress build output 107 | .vuepress/dist 108 | 109 | # vuepress v2.x temp and cache directory 110 | .temp 111 | .cache 112 | 113 | # Docusaurus cache and generated files 114 | .docusaurus 115 | 116 | # Serverless directories 117 | .serverless/ 118 | 119 | # FuseBox cache 120 | .fusebox/ 121 | 122 | # DynamoDB Local files 123 | .dynamodb/ 124 | 125 | # TernJS port file 126 | .tern-port 127 | 128 | # Stores VSCode versions used for testing VSCode extensions 129 | .vscode-test 130 | 131 | # yarn v2 132 | .yarn/cache 133 | .yarn/unplugged 134 | .yarn/build-state.yml 135 | .yarn/install-state.gz 136 | .pnp.* 137 | 138 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # `image-optimize-cli` 4 | 5 | [![Contributors](https://img.shields.io/github/contributors/muhammad-fiaz/image-optimize-cli.svg)](https://github.com/muhammad-fiaz/image-optimize-cli/graphs/contributors) 6 | [![Last Commit](https://img.shields.io/github/last-commit/muhammad-fiaz/image-optimize-cli/main.svg)](https://github.com/muhammad-fiaz/image-optimize-cli/commits/main) 7 | [![npm version](https://badge.fury.io/js/image-optimize-cli.svg)](https://badge.fury.io/js/image-optimize-cli) 8 | [![GitHub issues](https://img.shields.io/github/issues/muhammad-fiaz/image-optimize-cli.svg)](https://github.com/muhammad-fiaz/image-optimize-cli/issues) 9 | [![GitHub pull requests](https://img.shields.io/github/issues-pr/muhammad-fiaz/image-optimize-cli)](https://github.com/muhammad-fiaz/image-optimize-cli/pulls) 10 | [![GitHub forks](https://img.shields.io/github/forks/muhammad-fiaz/image-optimize-cli.svg)](https://github.com/muhammad-fiaz/image-optimize-cli/network) 11 | [![GitHub stars](https://img.shields.io/github/stars/muhammad-fiaz/image-optimize-cli.svg)](https://github.com/muhammad-fiaz/image-optimize-cli/stargazers) 12 | [![GitHub followers](https://img.shields.io/github/followers/muhammad-fiaz?label=Follow)](https://github.com/muhammad-fiaz?tab=followers) 13 | [![Sponsor on GitHub](https://img.shields.io/badge/Sponsor%20on%20GitHub-Become%20a%20Sponsor-blue)](https://github.com/sponsors/muhammad-fiaz) 14 | 15 |
16 |

Join our Discord Community:

17 | 18 | [![Join Our Discord](https://img.shields.io/badge/Discord-Join_us!-blue?style=flat&logo=discord)](https://discord.com/invite/pMw7nfBzXz) 19 | 20 |
21 |
22 |
23 | `image-optimize-cli` is a library that dynamically optimizes images based on user internet speed and quality settings. It provides components for React, Vue, and Angular, and also supports plain JavaScript usage. 24 | 25 | ## Installation 26 | 27 | To install `image-optimize-cli`, run: 28 | 29 | ```bash 30 | npm install image-optimize-cli 31 | ``` 32 | 33 | ## Usage 34 | 35 | ### React 36 | 37 | To use `image-optimize-cli` with React, import the `OptimizeImage` component and use it in your components: 38 | 39 | ```jsx 40 | import React from 'react'; 41 | import { OptimizeImage } from 'image-optimize-cli/react'; 42 | 43 | function App() { 44 | return ( 45 |
46 | 47 |
48 | ); 49 | } 50 | ``` 51 | 52 | ### Vue 53 | 54 | To use `image-optimize-cli` with Vue, import the `OptimizeImage` component and use it in your components: 55 | 56 | ```vue 57 | 62 | 63 | 72 | ``` 73 | 74 | ### Angular 75 | 76 | To use `image-optimize-cli` with Angular, import the `OptimizeImage` component and use it in your components: 77 | 78 | ```typescript 79 | import { Component } from '@angular/core'; 80 | import { OptimizeImage } from 'image-optimize-cli/angular'; 81 | 82 | @Component({ 83 | selector: 'app-root', 84 | template: ` 85 |
86 | 87 |
88 | `, 89 | }) 90 | export class AppComponent {} 91 | ``` 92 | 93 | ### JavaScript 94 | 95 | To use `image-optimize-cli` with plain JavaScript, import the `OptimizeImage` class and use it in your scripts: 96 | 97 | ```javascript 98 | import { OptimizeImage } from 'image-optimize-cli'; 99 | 100 | const OptimizeImage = new OptimizeImage('image.jpg', 'Image'); 101 | document.body.appendChild(OptimizeImage); 102 | ``` 103 | 104 | 105 | 106 | 107 | ## Contributing 108 | 109 | We welcome contributions to the project! Please follow the guidelines in [CONTRIBUTING.md](CONTRIBUTING.md) for submitting issues and pull requests. 110 | 111 | ## License 112 | 113 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 114 | include. -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /src/angular/optimized-image.component.js: -------------------------------------------------------------------------------- 1 | var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) { 2 | function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; } 3 | var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value"; 4 | var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null; 5 | var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {}); 6 | var _, done = false; 7 | for (var i = decorators.length - 1; i >= 0; i--) { 8 | var context = {}; 9 | for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p]; 10 | for (var p in contextIn.access) context.access[p] = contextIn.access[p]; 11 | context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); }; 12 | var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context); 13 | if (kind === "accessor") { 14 | if (result === void 0) continue; 15 | if (result === null || typeof result !== "object") throw new TypeError("Object expected"); 16 | if (_ = accept(result.get)) descriptor.get = _; 17 | if (_ = accept(result.set)) descriptor.set = _; 18 | if (_ = accept(result.init)) initializers.unshift(_); 19 | } 20 | else if (_ = accept(result)) { 21 | if (kind === "field") initializers.unshift(_); 22 | else descriptor[key] = _; 23 | } 24 | } 25 | if (target) Object.defineProperty(target, contextIn.name, descriptor); 26 | done = true; 27 | }; 28 | var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) { 29 | var useValue = arguments.length > 2; 30 | for (var i = 0; i < initializers.length; i++) { 31 | value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg); 32 | } 33 | return useValue ? value : void 0; 34 | }; 35 | var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) { 36 | if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : ""; 37 | return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name }); 38 | }; 39 | import { Component, Input } from '@angular/core'; 40 | import { optimizeImage } from '@/optimizer'; 41 | let OptimizedImageComponent = (() => { 42 | let _classDecorators = [Component({ 43 | selector: 'app-optimized-image', 44 | template: `` 45 | })]; 46 | let _classDescriptor; 47 | let _classExtraInitializers = []; 48 | let _classThis; 49 | let _src_decorators; 50 | let _src_initializers = []; 51 | let _src_extraInitializers = []; 52 | let _alt_decorators; 53 | let _alt_initializers = []; 54 | let _alt_extraInitializers = []; 55 | let _quality_decorators; 56 | let _quality_initializers = []; 57 | let _quality_extraInitializers = []; 58 | let _width_decorators; 59 | let _width_initializers = []; 60 | let _width_extraInitializers = []; 61 | let _height_decorators; 62 | let _height_initializers = []; 63 | let _height_extraInitializers = []; 64 | let _format_decorators; 65 | let _format_initializers = []; 66 | let _format_extraInitializers = []; 67 | var OptimizedImageComponent = _classThis = class { 68 | get optimizedSrc() { 69 | return optimizeImage(this.src, { 70 | quality: this.quality, 71 | width: this.width, 72 | height: this.height, 73 | format: this.format 74 | }); 75 | } 76 | constructor() { 77 | this.src = __runInitializers(this, _src_initializers, void 0); 78 | this.alt = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _alt_initializers, '')); 79 | this.quality = (__runInitializers(this, _alt_extraInitializers), __runInitializers(this, _quality_initializers, 80)); 80 | this.width = (__runInitializers(this, _quality_extraInitializers), __runInitializers(this, _width_initializers, 800)); 81 | this.height = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _height_initializers, 600)); 82 | this.format = (__runInitializers(this, _height_extraInitializers), __runInitializers(this, _format_initializers, '')); 83 | __runInitializers(this, _format_extraInitializers); 84 | } 85 | }; 86 | __setFunctionName(_classThis, "OptimizedImageComponent"); 87 | (() => { 88 | const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0; 89 | _src_decorators = [Input()]; 90 | _alt_decorators = [Input()]; 91 | _quality_decorators = [Input()]; 92 | _width_decorators = [Input()]; 93 | _height_decorators = [Input()]; 94 | _format_decorators = [Input()]; 95 | __esDecorate(null, null, _src_decorators, { kind: "field", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers); 96 | __esDecorate(null, null, _alt_decorators, { kind: "field", name: "alt", static: false, private: false, access: { has: obj => "alt" in obj, get: obj => obj.alt, set: (obj, value) => { obj.alt = value; } }, metadata: _metadata }, _alt_initializers, _alt_extraInitializers); 97 | __esDecorate(null, null, _quality_decorators, { kind: "field", name: "quality", static: false, private: false, access: { has: obj => "quality" in obj, get: obj => obj.quality, set: (obj, value) => { obj.quality = value; } }, metadata: _metadata }, _quality_initializers, _quality_extraInitializers); 98 | __esDecorate(null, null, _width_decorators, { kind: "field", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers); 99 | __esDecorate(null, null, _height_decorators, { kind: "field", name: "height", static: false, private: false, access: { has: obj => "height" in obj, get: obj => obj.height, set: (obj, value) => { obj.height = value; } }, metadata: _metadata }, _height_initializers, _height_extraInitializers); 100 | __esDecorate(null, null, _format_decorators, { kind: "field", name: "format", static: false, private: false, access: { has: obj => "format" in obj, get: obj => obj.format, set: (obj, value) => { obj.format = value; } }, metadata: _metadata }, _format_initializers, _format_extraInitializers); 101 | __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers); 102 | OptimizedImageComponent = _classThis = _classDescriptor.value; 103 | if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata }); 104 | __runInitializers(_classThis, _classExtraInitializers); 105 | })(); 106 | return OptimizedImageComponent = _classThis; 107 | })(); 108 | export { OptimizedImageComponent }; 109 | //# sourceMappingURL=optimized-image.component.js.map --------------------------------------------------------------------------------