image-optimize-cli

image-optimize-cli is a powerful library designed to dynamically optimize images based on the user's internet speed and quality settings. It provides components for React, Vue, and Angular frameworks, as well as a utility for static HTML. The library leverages advanced image processing to deliver optimized images efficiently and effectively.

MIT License

Downloads
8
Stars
1
Committers
2

image-optimize-cli

Installation

To install image-optimize-cli, run:

npm install image-optimize-cli

Usage

React

To use image-optimize-cli with React, import the OptimizeImage component and use it in your components:

import React from 'react';
import { OptimizeImage } from 'image-optimize-cli/react';
  
function App() {
  return (
    <div>
      <OptimizeImage src="image.jpg" alt="Image" />
    </div>
  );
}

Vue

To use image-optimize-cli with Vue, import the OptimizeImage component and use it in your components:

<template>
  <div>
    <OptimizedImage src="image.jpg" alt="Image" />
  </div>
</template>

<script>
import { OptimizeImage } from 'image-optimize-cli/vue';

export default {
  components: {
    OptimizeImage,
  },
};
</script>

Angular

To use image-optimize-cli with Angular, import the OptimizeImage component and use it in your components:

import { Component } from '@angular/core';
import { OptimizeImage } from 'image-optimize-cli/angular';

@Component({
  selector: 'app-root',
    template: `
        <div>
        <OptimizeImage src="image.jpg" alt="Image"></OptimizeImage>
        </div>
    `,
})
export class AppComponent {}

JavaScript

To use image-optimize-cli with plain JavaScript, import the OptimizeImage class and use it in your scripts:

import { OptimizeImage } from 'image-optimize-cli';

const OptimizeImage = new OptimizeImage('image.jpg', 'Image');
document.body.appendChild(OptimizeImage);

Contributing

We welcome contributions to the project! Please follow the guidelines in CONTRIBUTING.md for submitting issues and pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details. include.

Package Rankings
Top 39.75% on Npmjs.org
Badges
Extracted from project README
Contributors Last Commit npm version GitHub issues GitHub pull requests GitHub forks GitHub stars GitHub followers Sponsor on GitHub Join Our Discord
Related Projects