{"id":15817115,"url":"https://github.com/evavic44/picture-element","last_synced_at":"2025-07-15T14:08:53.282Z","repository":{"id":103797048,"uuid":"495185780","full_name":"Evavic44/picture-element","owner":"Evavic44","description":"A tutorial for explaining how to use the html picture element","archived":false,"fork":false,"pushed_at":"2022-05-23T22:56:16.000Z","size":8927,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-06T05:22:13.791Z","etag":null,"topics":["css","html","html5","media-queries","picture","picture-element","picture-tag","tutorial","tutorial-code"],"latest_commit_sha":null,"homepage":"https://picture-element.netlify.app","language":"CSS","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/Evavic44.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}},"created_at":"2022-05-22T21:52:02.000Z","updated_at":"2024-01-29T21:55:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"12440ae9-f77d-45e4-aaf3-5f040a6aa5b8","html_url":"https://github.com/Evavic44/picture-element","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Evavic44/picture-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Fpicture-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Fpicture-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Fpicture-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Fpicture-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Evavic44","download_url":"https://codeload.github.com/Evavic44/picture-element/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Fpicture-element/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265437787,"owners_count":23765136,"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":["css","html","html5","media-queries","picture","picture-element","picture-tag","tutorial","tutorial-code"],"created_at":"2024-10-05T05:22:17.941Z","updated_at":"2025-07-15T14:08:53.211Z","avatar_url":"https://github.com/Evavic44.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eHTML Picture Element\u003c/h1\u003e\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/3f059b5f-657b-42a0-b835-b717355d5a58/deploy-status)](https://app.netlify.com/sites/picture-element/deploys)\n\nThe picture element is an HTML element for declaring images based on different screen sizes or viewport without the need of writing CSS media queries. It takes in two properties, the —`\u003csource\u003e` tag which makes use of the `srcset` property to specify different images based on different screen sizes and a compulsory `\u003cimg\u003e` tag that acts as a fallback image in case the browser doesn't support the picture element.\n\nThere are a few use-case scenarios in which the picture tag can be very useful, below are three examples of these cases.\n\n- Image type support\n- Image width\n- Saving Bandwidth\n\n```html\n\u003cpicture\u003e\n   \u003csource media=\"(min-width: 768px)\" srcset=\"desktop-image.gif\" /\u003e\n   \u003csource media=\"(min-width: 500px)\" srcset=\"tablet-image.png\" /\u003e\n   \u003cimg src=\"mobile-image.png\" alt=\"Banner image\" /\u003e\n\u003c/picture\u003e\n```\n\n## Browser Compatibility\n\n![picture-tag-support.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653076517086/7XbrEluqY.png)\n\nSource: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevavic44%2Fpicture-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevavic44%2Fpicture-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevavic44%2Fpicture-element/lists"}