{"id":13632231,"url":"https://github.com/ascorbic/unpic-img","last_synced_at":"2025-04-23T20:58:33.074Z","repository":{"id":65767000,"uuid":"598278593","full_name":"ascorbic/unpic-img","owner":"ascorbic","description":"Multi-framework responsive image component","archived":false,"fork":false,"pushed_at":"2025-04-03T21:57:30.000Z","size":14289,"stargazers_count":1698,"open_issues_count":25,"forks_count":53,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-23T20:57:33.599Z","etag":null,"topics":["angular","astro","images","lit","preact","qwik","react","solidjs","svelte","vue","webc"],"latest_commit_sha":null,"homepage":"https://unpic.pics","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ascorbic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2023-02-06T19:22:33.000Z","updated_at":"2025-04-18T16:10:40.000Z","dependencies_parsed_at":"2024-01-08T00:27:59.082Z","dependency_job_id":"cd282979-1cca-4df9-95a4-2a0eae022da3","html_url":"https://github.com/ascorbic/unpic-img","commit_stats":{"total_commits":625,"total_committers":29,"mean_commits":"21.551724137931036","dds":0.4848,"last_synced_commit":"1b450c12b20bcd71a95be789cb9ce69c41fafef0"},"previous_names":[],"tags_count":485,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Funpic-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Funpic-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Funpic-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Funpic-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ascorbic","download_url":"https://codeload.github.com/ascorbic/unpic-img/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514767,"owners_count":21443208,"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":["angular","astro","images","lit","preact","qwik","react","solidjs","svelte","vue","webc"],"created_at":"2024-08-01T22:02:56.964Z","updated_at":"2025-04-23T20:58:33.054Z","avatar_url":"https://github.com/ascorbic.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e🌳 unpic-img\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA cross-framework component for responsive, high-performance images using image CDNs\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\n\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/react.svg\" height=\"16\" alt=\"react\" /\u003e React](https://unpic.pics/img/react)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/vue.svg\" height=\"16\" alt=\"vue\" /\u003e Vue](https://unpic.pics/img/vue)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/solidjs-icon.svg\" height=\"16\" alt=\"solidjs\" /\u003e SolidJS](https://unpic.pics/img/solid)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/svelte-icon.svg\" height=\"16\" alt=\"svelte\" /\u003e Svelte](https://unpic.pics/img/svelte)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/astro-icon.svg\" height=\"16\" alt=\"astro\" /\u003e Astro](https://unpic.pics/img/astro)\n\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/preact.svg\" height=\"16\" alt=\"preact\" /\u003e Preact](https://unpic.pics/img/preact)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/qwik-icon.svg\" height=\"16\" alt=\"qwik\" /\u003e Qwik](https://unpic.pics/img/qwik)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/eleventy.svg\" height=\"16\" alt=\"webc\" /\u003e WebC](https://unpic.pics/img/webc)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/angular-icon.svg\" height=\"16\" alt=\"angular\" /\u003e Angular](https://unpic.pics/img/angular)\n•\n[\u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/main/logos/lit-icon.svg\" height=\"16\" alt=\"lit\" /\u003e Lit](https://unpic.pics/img/lit)\n\n\u003c/h3\u003e\n\n## Features\n\n- Just an `\u003cimg\u003e` tag! No extra elements, no runtime JavaScript. Easy to style.\n  No legacy hacks or workarounds.\n- Automatically generates correct srcset and sizes attributes for responsive\n  images.\n- Handles responsive resizing of images, preserving aspect ratio and avoiding\n  layout shift.\n- Uses native lazy loading and async decoding for offscreen images.\n- Handles different image layouts: fixed, constrained and full width.\n- Uses eager loading and high priority fetching for important images.\n- Delivers modern image formats, including WebP and AVIF if supported by the\n  browser.\n- No build step or server-side rendering required for the images: uses your\n  existing image CDN or CMS, with no additional configuration.\n- Uses [unpic lib](https://unpic.pics/lib) to support most image CDNs, including\n  Cloudinary, Imgix, and Shopify.\n- Can generate a low-res background image for a blurred placeholder effect, or\n  use with [`@unpic/placeholder`](https://unpic.pics/placeholder) for more\n  options.\n\n## Usage\n\nFor details of usage, see [the documentation](https://unpic.pics/img).\n\n## FAQ\n\n### Why do I need this?\n\nWhile it's easy to use an `\u003cimg\u003e` tag for images, if you want to follow best\npractices and deliver the most performant image to your users then it can take a\nlot of work. Some frontend frameworks will automate this for you, but they often\nrely on slow pre-rendering of images, or on running image optimizers on your own\nsite. They also generate complex HTML with wrappers and spacer elements that\nmake images hard to style.\n\nMost images on modern websites are hosted on a CDN or CMS that can resize images\non the fly and deliver them at the edge. Despite this, most web frameworks will\nstill download and resize the image at build time or on your server, rather than\nusing the CDN, or just uses a single source image rather than handling multiple\nresolutions.\n\nThis library works with any frontend framework or none, and uses your existing\nimage CDN or CMS, with no additional configuration.\n\nFor more details, see\n[this post](https://dev.to/ascorbic/a-minimal-multi-framework-responsive-image-component-3iop).\n\n## How does this work?\n\nThis library uses unpic to detect the image CDN, and then uses the CDN's URL API\nto resize and format images. It then generates the correct `srcset` and `sizes`\nattributes for the image. It uses new features built into modern browsers to\nhandle lazy loading, fetch priority and decoding. It also uses pure CSS to\nhandle responsive resizing of images, preserving aspect ratio and avoiding\nlayout shift. Unlike most other image components, it does not use any\nclient-side JavaScript by default, and generates just a single `\u003cimg\u003e` tag\nwithout any wrapper divs or padding elements.\n\n## What HTML does this generate?\n\n\u003cdetails\u003e\n\u003csummary\u003eGenerated HTML for a constrained image\u003c/summary\u003e\nIt turns this:\n\n```tsx\n\u003cImage\n  src=\"https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg\"\n  layout=\"constrained\"\n  width={800}\n  height={600}\n  alt=\"Shopify\"\n/\u003e\n```\n\n...into this:\n\n```html\n\u003cimg\n  alt=\"Shopify\"\n  loading=\"lazy\"\n  decoding=\"async\"\n  sizes=\"(min-width: 800px) 800px, 100vw\"\n  srcset=\"\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=1600\u0026amp;height=2133 1600w,\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=1280\u0026amp;height=1707 1280w,\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=1080\u0026amp;height=1440 1080w,\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=960\u0026amp;height=1280   960w,\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=828\u0026amp;height=1104   828w,\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=800\u0026amp;height=1067   800w,\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=750\u0026amp;height=1000   750w,\n    https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center\u0026amp;width=640\u0026amp;height=853    640w\n  \"\n  src=\"https://cdn.shopify.com/static/sample-images/bath.jpeg?width=800\u0026amp;height=600\u0026amp;crop=center\"\n  style=\"\n        object-fit: cover;\n        max-width: 800px;\n        max-height: 600px;\n        aspect-ratio: 1.33333 / 1;\n        width: 100%;\n      \"\n/\u003e\n```\n\n\u003c/details\u003e\n\n## Supported CDNs\n\nYou can use any image CDN supported by [unpic lib](https://unpic.pics/lib),\nincluding:\n\n- Adobe Dynamic Media (Scene7)\n- Builder.io\n- Bunny.net\n- Cloudflare\n- Contentful\n- Cloudinary\n- Directus\n- Imgix, including Unsplash, DatoCMS, Sanity and Prismic\n- Kontent.ai\n- Netlify\n- Shopify\n- Storyblok\n- Vercel / Next.js\n- WordPress.com and Jetpack Site Accelerator\n\n## License\n\nPublished under the MIT licence. ©\n[Matt Kane](https://github.com/ascorbic) 2023.\n","funding_links":[],"categories":["TypeScript","Images","Qwik"],"sub_categories":["ascorbic/unpic-img"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascorbic%2Funpic-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fascorbic%2Funpic-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascorbic%2Funpic-img/lists"}