{"id":13758999,"url":"https://github.com/Josh-McFarlin/remix-image","last_synced_at":"2025-05-10T09:31:37.224Z","repository":{"id":36963635,"uuid":"449976662","full_name":"Josh-McFarlin/remix-image","owner":"Josh-McFarlin","description":"A React component for responsive images in Remix","archived":false,"fork":false,"pushed_at":"2023-08-22T11:03:24.000Z","size":10099,"stargazers_count":330,"open_issues_count":11,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-31T11:45:06.009Z","etag":null,"topics":["image","react","remix","responsive"],"latest_commit_sha":null,"homepage":"https://remix-image.mcfarl.in","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Josh-McFarlin.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":"2022-01-20T06:10:53.000Z","updated_at":"2024-10-13T05:39:26.000Z","dependencies_parsed_at":"2024-06-18T15:35:15.987Z","dependency_job_id":"7c1cbec8-8a39-4e17-8e85-703ad88b63ad","html_url":"https://github.com/Josh-McFarlin/remix-image","commit_stats":{"total_commits":185,"total_committers":8,"mean_commits":23.125,"dds":"0.048648648648648596","last_synced_commit":"6371e8d51ef611efa634f455636ac97a3b8319ac"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josh-McFarlin%2Fremix-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josh-McFarlin%2Fremix-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josh-McFarlin%2Fremix-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Josh-McFarlin%2Fremix-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Josh-McFarlin","download_url":"https://codeload.github.com/Josh-McFarlin/remix-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224940760,"owners_count":17395752,"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":["image","react","remix","responsive"],"created_at":"2024-08-03T13:00:43.065Z","updated_at":"2024-11-16T16:30:25.195Z","avatar_url":"https://github.com/Josh-McFarlin.png","language":"TypeScript","funding_links":[],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"# Remix-Image\n\n![](https://badgen.net/npm/v/remix-image)\n![](https://badgen.net/npm/license/remix-image)\n![](https://badgen.net/npm/types/remix-image)\n![](https://badgen.net/bundlephobia/min/remix-image)\n![](https://badgen.net/npm/dt/remix-image)\n\n## 👋 Intro\n\nA React component for responsive images in Remix.\n\nThis library lets you:\n* Resize images to the minimum size needed for faster page loading\n* Convert images to more efficient file types for faster page loader\n* Apply transformations to images such as `resize`, `crop`, `rotate`, `blur`, and `flip`\n* Cache commonly requested assets for the best performance\n\nTurning:\n\n```typescript jsx\n\u003cImage\n  src=\"https://i.imgur.com/5cQnAQC.png\"\n  responsive={[\n    {\n      size: { width: 100, height: 100 },\n      maxWidth: 500,\n    },\n    {\n      size: { width: 600, height: 600 },\n    },\n  ]}\n  dprVariants={[1, 3]}\n/\u003e\n```\n\nInto:\n\n```typescript jsx\n\u003cimg\n  src=\"/api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png\u0026width=600\u0026height=600\"\n  srcset=\"/api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png\u0026width=100\u0026height=100 100w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png\u0026width=600\u0026height=600 600w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png\u0026width=300\u0026height=300 300w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png\u0026width=1800\u0026height=1800 1800w\"\n  sizes=\"(max-width: 500px) 100px, 600px\"\n\u003e\n```\n\nWhere the `responsive` sizes provided through the props are turned into image URLs served by the local server that are cached for fast and performant loading.\n\n## 🚀 How to use\n\n### Install\n\nTo install this library and its peer deps, use one of the following commands:\n```bash\nnpm install -S remix-image @next-boost/hybrid-disk-cache\nyarn add remix-image @next-boost/hybrid-disk-cache\n```\n\n### Docs\n\n- Documentation for this library can be found at: [https://remix-image.mcfarl.in](https://remix-image.mcfarl.in)\n- Several examples can be found in [examples/](examples/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJosh-McFarlin%2Fremix-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJosh-McFarlin%2Fremix-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJosh-McFarlin%2Fremix-image/lists"}