beekai-oss / react-simple-img

🌅 React lazy load images with IntersectionObserver API and Priority Hints
MIT License
989 stars 41 forks source link

Using webp images with <picture> and multiple source sets? #72

Closed andreimc closed 5 years ago

andreimc commented 5 years ago

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I would like to use react-simple image with webp as well: eg https://responsivedesign.is/articles/adding-webp-images-progressively/

Describe the solution you'd like A clear and concise description of what you want to happen.

  <picture>
    <source type="image/webp"
            srcset="images/worlds-300.webp 300w,
                    images/worlds-600.webp 600w,
                    images/worlds-800.webp 800w,
                    images/worlds.webp 1000w"
             />
    <source srcset="images/worlds-300.jpg 300w,
                    images/worlds-600.jpg 600w,
                    images/worlds-800.jpg 800w,
                    images/worlds.jpg 1000w"
            />
    <img src="images/worlds-300.jpg"
    alt="The Speed of Light and the Timing of Eclipses" />
  </picture>

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

bluebill1049 commented 5 years ago

Good suggestion, but I will start to work on that when img src tag support webp. Otherwise, it's a massive change inside the codebase to adopt element.

bluebill1049 commented 5 years ago

going to close this for now. until img src tag support webp