Always create webp version about next-optimized-images

[majksner]

If I understand correctly what you're trying to achieve you can do it this way:

import React from 'react'

export default function Image(props) {
  return (
    <picture>
      <source
        srcSet={require(`../static/images/${props.src}?webp`)}
        type="image/webp"
      />
      <source
        srcSet={require(`../static/images/${props.src}`)}
        type={`image/${props.src.split('.').pop()}`}
      />
      <img
        src={require(`../static/images/${props.src}`)}
        width={props.width}
        height={props.height}
        alt={props.alt}
        className={props.className}
      />
    </picture>
  )
}

Then then use component anywhere in your pages or other components:

<Image src="image.png" width="237" height="237" className="img-fluid" alt="Improve comfort" />

[cyrilwanner]

Hi @klase
Unfortunately, this isn't possible at the moment. But I take it on the todo list, I think this could be quite useful. Thank you for creating this issue :)