Always create webp version

[klase]

How can I configure this plugin to always create a webp version when requiring an image (I.e without having to require twice )?

E.g so require('./images/someimage.jpg') should create two output files, one optimised .jpg and one optimised .webp

[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 :)

[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" />