https://github.com/mobiletelesystems/image-optimize-react
React component for image optimizer.
https://github.com/mobiletelesystems/image-optimize-react
Last synced: about 1 year ago
JSON representation
React component for image optimizer.
- Host: GitHub
- URL: https://github.com/mobiletelesystems/image-optimize-react
- Owner: MobileTeleSystems
- License: apache-2.0
- Created: 2021-12-10T06:02:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-06T13:22:27.000Z (over 1 year ago)
- Last Synced: 2025-04-23T06:18:09.240Z (about 1 year ago)
- Language: TypeScript
- Size: 323 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React component for using optimized images in the browser.
Works in conjunction with the [Image Optimizer](https://github.com/MobileTeleSystems/image-optimize).
Optimizing images helps reduce image weight and increases website loading speed, which is very important for both users and search engines. For these purposes, we have created a microservice that perfectly copes with this task.
Features:
- Resize images for the user's screen size,
- Image compressions to reduce traffic,
- Converting images to modern formats such as webp and avif,
- Works with dynamically content, compression occurs on the fly,
- High compression speed, an average picture is processed in just 200 ms,
- Includes exporter of metrics for Prometheus,
- Supports basic authorization for multiple domains and endpoints,
- Supports security restrictions for allowed addresses.
### Before use
[The optimization microservice](https://github.com/MobileTeleSystems/image-optimize) must be deployed on the server along the path `/optimizer`. React component will use it.
### Instalation
Run script:
```
npm i @mts-pjsc/image-optimize
```
### Using
Just replace the \![]()
element with the Image component from the package. The component is fully compatible with the \![]()
element. Next, the component will do all the magic on its own.
Sample:
```typescript
import {Image} from "@mts-pjsc/image-optimize";
```