title: Picture
name: picture
wrapper: col-md-6
variants:
  - name: cover
    title: Cover picture
    wrapper: 'col-md-12'
  - name: fullwidth-teaser
    title: Fullwidth teaser
    wrapper: 'col-md-12'
    notes: |
      Picture used in 'Organism > Fullwidth teaser' and 'News > Highlighted'.
  - name: avatar
    title: Avatar
    wrapper: col-sm-4 col-md-2
    notes: |
      Avatar picture need an equal height and width in order to be displayed as a circle
  - name: portrait
    title: Portrait
    wrapper: col-md-3
    notes: |
      Portrait picture is used in People pages
  - name: one-third
    title: One third picture
    wrapper: col-md-4
  - name: one-third-square
    title: One third Square picture
    wrapper: col-md-4
  - name: news-thumb
    title: News Listing Thumbnail
    wrapper: col-3 col-md-2
  - name: thumb-square
    title: Listing square Thumbnail
    wrapper: col-3 col-md-2
notes: |

  > The HTML **`<picture>` element** serves as a container for zero or more `<source>` elements and one `<img>` element to provide versions of an image for different display device scenarios. The browser will consider each of the child `<source>` elements and select one corresponding to the best match found; if no matches are found among the `<source>` elements, the file specified by the `<img>` element's src attribute is selected. The selected image is then presented in the space occupied by the `<img>` element. \
  > — *[Read more on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)*

  We are using `<picture>` in Elements instead of a simple `<img>` to **ensure that every user and device will receive the right image format, size and weight**.

  This page presents all image formats defined in Element and all their related sizes. **This implies implementing a lot of image sizes**, but CMS like Wordpress can easily manage [that logic](https://developer.wordpress.org/reference/functions/add_image_size/).

  ### Half desktop picture