https://github.com/evavic44/picture-element

A tutorial for explaining how to use the html picture element
https://github.com/evavic44/picture-element

css html html5 media-queries picture picture-element picture-tag tutorial tutorial-code

Last synced: about 2 months ago
JSON representation

A tutorial for explaining how to use the html picture element

• Host: GitHub
• URL: https://github.com/evavic44/picture-element
• Owner: Evavic44
• Created: 2022-05-22T21:52:02.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-23T22:56:16.000Z (over 2 years ago)
• Last Synced: 2024-10-06T05:22:13.791Z (4 months ago)
• Topics: css, html, html5, media-queries, picture, picture-element, picture-tag, tutorial, tutorial-code
• Language: CSS
• Homepage: https://picture-element.netlify.app
• Size: 8.51 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
HTML Picture Element


[![Netlify Status](https://api.netlify.com/api/v1/badges/3f059b5f-657b-42a0-b835-b717355d5a58/deploy-status)](https://app.netlify.com/sites/picture-element/deploys)

The 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 —`` tag which makes use of the `srcset` property to specify different images based on different screen sizes and a compulsory `` tag that acts as a fallback image in case the browser doesn't support the picture element.

There are a few use-case scenarios in which the picture tag can be very useful, below are three examples of these cases.

- Image type support

- Image width

- Saving Bandwidth

```html

   

   

   

```

## Browser Compatibility

![picture-tag-support.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653076517086/7XbrEluqY.png)

Source: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)