Using .webp images with correct fallback

ErbComponent.erb

<picture class="">
  <source srcset="<%= asset_path('.../.../WEBP_ASSET.webp') %>" type="image/webp" />
  <img src="<%= asset_path('../../FALLBACK_ASSET.jpg') %>" type="image/jpg" />
</picture>

ReactElement.js

// @flow

import * as React from 'react'

import WEBP_ASSET_PATH from '../../../....webp'
import FALLBACK_ASSET_PATH from '../../../....jpg'

const renderWebpImage = (): React.Element<'picture'> => (
  <picture>
    <source
      className=''
      srcSet={WEBP_ASSET_PATH}
      type='image/webp'
    />
    <img
      alt=''
      className=''
      src={FALLBACK_ASSET_PATH}
    />
  </picture>
)