{"id":19185495,"url":"https://github.com/qwikdev/qwik-image","last_synced_at":"2025-04-05T14:03:26.205Z","repository":{"id":153855229,"uuid":"630834839","full_name":"QwikDev/qwik-image","owner":"QwikDev","description":"Qwik Image Component","archived":false,"fork":false,"pushed_at":"2024-11-25T10:48:58.000Z","size":6839,"stargazers_count":57,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T19:36:11.567Z","etag":null,"topics":["core-web-vitals","image","optimization"],"latest_commit_sha":null,"homepage":"","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/QwikDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2023-04-21T08:59:51.000Z","updated_at":"2025-03-28T10:30:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"74bf895e-6be9-4d38-bf5c-f579db744d2e","html_url":"https://github.com/QwikDev/qwik-image","commit_stats":null,"previous_names":["qwikdev/qwik-image"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QwikDev%2Fqwik-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QwikDev%2Fqwik-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QwikDev%2Fqwik-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QwikDev%2Fqwik-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QwikDev","download_url":"https://codeload.github.com/QwikDev/qwik-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345850,"owners_count":20924102,"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":["core-web-vitals","image","optimization"],"created_at":"2024-11-09T11:10:44.732Z","updated_at":"2025-04-05T14:03:26.184Z","avatar_url":"https://github.com/QwikDev.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n\u003cbr/\u003e\n  \u003cimg width=\"300\" src=\"https://github.com/QwikDev/qwik-image/blob/main/assets/qwik-image-logo.png?raw=true\" alt=\"The goal is a component to support performant images on the web and automatic image optimization.\nThat will be built as a pluggable component so devs could connect different image loaders to it (like Cloudinary, or builder)\"\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n\u003c/p\u003e\n\n\u003ch1 align='center'\u003e\u003ca href='https://github.com/BuilderIO/qwik'\u003eQwik\u003c/a\u003e Image Component\u003c/h1\u003e\n\n\u003cdiv align='center'\u003e\n  \u003ch3\u003eThe goal is a component to support performant images on the web and automatic image optimization.\nThat will be built as a pluggable component so devs could connect different image loaders to it (like builder.io or Cloudinary)\u003c/h3\u003e\n  \n  \u003cbr\u003e\u003cbr\u003e\n\n  \u003ca href='https://img.shields.io/npm/v/qwik-image?label=npm%20version'\u003e\n  \u003cimg src='https://img.shields.io/npm/v/qwik-image?label=npm%20version' alt='qwik-image npm'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://opensource.org/licenses/MIT'\u003e\n  \u003cimg src='https://img.shields.io/badge/License-MIT-green.svg' alt='MIT'\u003e\n  \u003c/a\u003e\n  \u003ca href='#contributors'\u003e\n  \u003cimg src='https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square' alt='All Contributors'\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n\u003cbr\u003e\n\n## Showcase ( network Slow 3G 🤯 )\n\n![qwik-image-showcase](https://github.com/QwikDev/qwik-image/blob/main/assets/qwik-image-showcase.gif?raw=true)\n\n## Installation\n\n```\nnpm install qwik-image\nor\nyarn install qwik-image\nor\npnpm install qwik-image\n```\n\n## Usage\n\n### Global Provider (required)\n\n```\nconst imageTransformer$ = $(({ src, width, height }: ImageTransformerProps): string =\u003e {\n  return `${src}?w=${width}\u0026h=${height}\u0026format=webp`;\n});\n\n// Provide your default options\nuseImageProvider({\n  // you can set this property to overwrite default values [640, 960, 1280, 1920, 3840]\n  resolutions: [640],\n  // you we can define the source from which to load our image\n  imageTransformer$,\n});\n```\n\n### Image component\n\n```\n\u003cImage\n  layout=\"fixed\"\n  objectFit=\"cover\"\n  width=\"300\"\n  height=\"300\"\n  src={...}\n  alt={...}\n  placeholder={...}\n/\u003e\n```\n\n## loading values:\n\nHere is the loading values and behaviors https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading\ndefault: `lazy`\n\n## layout values:\n\n### `constrained`\n\nIf the width of the image is larger than the screen, the screen size is taken, otherwise the actual image size is kept\n\n### `fixed`\n\nregardless of the screen width, the width of the image is kept\n\n### `fullWidth`\n\nthe width of the image is always equal to the width of the screen\n\n## objectFit values:\n\nHere is the objectFit values and behaviors https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\ndefault: `cover`\n\n## placeholder values:\n\nYou can define a placeholder to wait for the image to load.\ndefault: `transparent`\n\n#### `background: 'rgba(37,99,235,1)';`\n\n\u003cimg width=\"320\" alt=\"placeholder-1\" src=\"https://github.com/QwikDev/qwik-image/blob/main/assets/placeholder-1.png?raw=true\"\u003e\n\n#### `background: 'linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(166,206,247,1) 0%, rgba(37,99,235,1) 83%);';`\n\n\u003cimg width=\"320\" alt=\"placeholder-2\" src=\"https://github.com/QwikDev/qwik-image/blob/main/assets/placeholder-2.png?raw=true\"\u003e\n\n#### `background: 'url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNUTX59BgAEaQJBWyqr7QAAAABJRU5ErkJggg==\")';`\n\n\u003cimg width=\"320\" alt=\"placeholder-3\" src=\"https://github.com/QwikDev/qwik-image/blob/main/assets/placeholder-3.png?raw=true\"\u003e\n\n#### `background: 'url(\"/public/placeholder.jpg\") no-repeat center / cover';`\n\n\u003cimg width=\"320\" alt=\"placeholder-4\" src=\"https://github.com/QwikDev/qwik-image/blob/main/assets/placeholder-4.png?raw=true\"\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqwikdev%2Fqwik-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqwikdev%2Fqwik-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqwikdev%2Fqwik-image/lists"}