Never-ending Pumpkin Mulch


    1.1.9 • Public • Published



    Serve any images' retina set with easy by react-picture-webp (Intelligent webP support included)!

    npm Price License: MIT GitHub package version


    How to use:

    • Prepare: Install react-picture-webp as a regular node_modules package via:
      npm i react-picture-webp

    or yarn:

      yarn add react-picture-webp

    WebP Important Notice! - to serve webP images via react-picture-webp you need to install webp-checker package via npm i web-checker or yarn add webp-checker. And then run it as soon as possible inside the very first component/module that has an interaction with the whole DOM. (more details here:

    Quick Start:

    • You can start using react-picture-webp with just name, path and type fields providing. Only one important notice about folder structure. As this package works with the varios layouts (mobile, tablet, desktop, ect.), you need to put your images consistently by its folders. For example:
     root ---|
             | images ---| // or some particupar image folder
                         | desktop --- |
                                       | landscape@1x.png
                                       | landscape@2x.png
                                       | landscape@1x.webp // Tip: you can avoid webp format if needed.
                                       | landscape@2x.webp
                         | tablet  --- |
                                       | landscape@1x.png
                                       | landscape@2x.png
                                       | landscape@1x.webp
                                       | landscape@2x.webp
                         | mobile  --- |
                                       | landscape@1x.png
                                       | landscape@2x.png
                                       | landscape@1x.webp
                                       | landscape@2x.webp
                         | any etc --- | // some other folder with custom resolutions

    This is only one strict requirement while using this package. Probably it would be improved in future, but for not it's the only one way to easily serve various images resolutions inside one <picture />.

    So, if your image's folder structure looks like above, you can go ahead and start using this awesome package!

    -- Example:

      // ...some logic
      import Picture from 'react-picture-webp'
      class App extends React.Component {
        // ...some logic
        render() {
          return (
            <// ..some view start>
              <Picture name='landscape' path='root/images/' pixelDensity={2} type='png' />
            <// ..some view end>


    • In case when you need to set up a better custom config you can throw props as object.

    -- Example:

      import Picture from 'react-picture-webp' // import it;
      const config = {
        alt: 'alt_text', // basic alt text for `img` tag describing
        type: 'png', // type of the image provided
        path: 'root/images/', // path to your image (**important:** do not add path here with resolutions' paths including)
        name: 'landscape', // image name
        pixelDensity: 4, // count of the images densinity
        extraResolutions: { // resolutions to layout. By default `react-picture-webp` will serve all these three image resolutions
          desktop: 'min-width: 1001px',
          tablet: 'max-width: 1000px',
          mobile: 'max-width: 600px'
        classes: { // some classes for providing CSS control for your `<picture />`
          picture: 'some_class',
          img: 'some_class'
      return (
        <Picture {...config} />
      ); // run picture


    npm i react-picture-webp

    DownloadsWeekly Downloads






    Unpacked Size

    156 kB

    Total Files


    Last publish


    • biosboy