React boosted image 💪 🌄

Smarter image component that has a blurred preview and a possibility to use WebP image type. It can also adjust to a device width. Feel free to check it out!

Features

• Blurred preview image [optional]
• Provide a default preview image
• Lazy load mode [optional]
• WebP format support [optional]
• Fallback for your "favourite" Safari 💩
• Custom breakpoints (media-query widths) [optional]
• Different images for each device [optional]

Possible enhancements

• Custom animation effect / css
• Add video support
• ...

Install

npm install --save react-boosted-image

Usage

import * as React from 'react'

import { BoostedImage } from 'react-boosted-image'

class Example extends React.Component {
  render () {
    return (
      <BoostedImage
        alt={"example"}
        sources={{
          breakpoints: [900],
          webpSrcSet: [
            "/assets/your-image-for-width-less-than-900.webp",
            "/assets/your-image-for-width-more-than-900.webp"
          ],
          fallbackSrcSet: [
            "/assets/your-image-for-width-less-than-900.jpg",
            "/assets/your-image-for-width-more-than-900.jpg"
          ]
        }}
        width="640"
        height="540"
        lazyMode={true}
      />
    )
  }
}

Authors

• Antonina Lebedeva
• Tomáš Uhrík

License

MIT