{"id":20710431,"url":"https://github.com/mobiletelesystems/image-optimize-react","last_synced_at":"2025-04-23T06:18:14.969Z","repository":{"id":40776809,"uuid":"436868766","full_name":"MobileTeleSystems/image-optimize-react","owner":"MobileTeleSystems","description":"React component for image optimizer.","archived":false,"fork":false,"pushed_at":"2024-11-06T13:22:27.000Z","size":331,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T06:18:09.240Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MobileTeleSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-10T06:02:57.000Z","updated_at":"2025-03-19T06:48:53.000Z","dependencies_parsed_at":"2024-11-17T02:12:03.363Z","dependency_job_id":"21e21da7-450b-40d0-8499-8d62a697594b","html_url":"https://github.com/MobileTeleSystems/image-optimize-react","commit_stats":{"total_commits":29,"total_committers":1,"mean_commits":29.0,"dds":0.0,"last_synced_commit":"1a22767c98896f840708ec0240fe85952514b84d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileTeleSystems%2Fimage-optimize-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileTeleSystems%2Fimage-optimize-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileTeleSystems%2Fimage-optimize-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileTeleSystems%2Fimage-optimize-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MobileTeleSystems","download_url":"https://codeload.github.com/MobileTeleSystems/image-optimize-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250379809,"owners_count":21420841,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T02:11:56.047Z","updated_at":"2025-04-23T06:18:14.937Z","avatar_url":"https://github.com/MobileTeleSystems.png","language":"TypeScript","readme":"# React component for using optimized images in the browser.\n\nWorks in conjunction with the [Image Optimizer](https://github.com/MobileTeleSystems/image-optimize).\n\nOptimizing 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.\n\nFeatures:\n- Resize images for the user's screen size,\n- Image compressions to reduce traffic,\n- Converting images to modern formats such as webp and avif,\n- Works with dynamically content, compression occurs on the fly,\n- High compression speed, an average picture is processed in just 200 ms,\n- Includes exporter of metrics for Prometheus,\n- Supports basic authorization for multiple domains and endpoints,\n- Supports security restrictions for allowed addresses.\n\n### Before use\n[The optimization microservice](https://github.com/MobileTeleSystems/image-optimize) must be deployed on the server along the path `/optimizer`. React component will use it.\n\n### Instalation\nRun script:\n```\nnpm i @mts-pjsc/image-optimize\n```\n\n### Using\n\nJust replace the \\\u003cimg\\\u003e element with the Image component from the package. The component is fully compatible with the \\\u003cimg\\\u003e element. Next, the component will do all the magic on its own.\n\nSample:\n```typescript\nimport {Image} from \"@mts-pjsc/image-optimize\";\n\n\u003cImage\n    alt=\"Sample of work Image Optimizer\"\n    src=\"/static/landing/images-getmeback/phone-fon.png\"\n/\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobiletelesystems%2Fimage-optimize-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmobiletelesystems%2Fimage-optimize-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobiletelesystems%2Fimage-optimize-react/lists"}