react-next-gen-image

React Next Gen Image Component

Usage no npm install needed!

<script type="module">
  import reactNextGenImage from 'https://cdn.skypack.dev/react-next-gen-image';
</script>

README

React Next Gen Image Component

This is an extremely lightweight component with several image optimisation features useful for small companies that want to improve page load time through a simple and streamlined process.

What is required

Preliminary step: Take all images that are used in your application and put them into a folder. jpg or jpeg and png are the only formats that will work.

  • Something just like this repo: Next Gen Image Creation

    • This repo contains several scripts. If you do these three steps (perhaps more if you do not have an AWS account) then you will be setup to use this component. Each step is a script in the repository.

      1. Create an S3 bucket (basically a place to store images on AWS).
      2. Convert these images into a corresponding .webp (for most browsers... Chrome, Firefox, Opera, Android) and .jp2 for Safari (Web and Mobile).
      3. Call a shell script that pushes each every file to S3. The script puts .webp images into a webpImages folder and corresponding folders for other image types. This is necessary for the component.

If you do this you are set.

How to install

npm install react-next-gen-image

How to use it

import NextGenImage from 'react-next-gen-image';

<NextGenImage
  bucket="yours3bucketname"
  imageName="name-of-image"
  placeholder="name-of-image.jpg"
  imageProperties={{
    alt: 'this signifies the name of image',
    className: 'this-image-is-nice',
    ...whateverImageElementPropertiesYouWant
  }}
/>

Properties

  • bucket - string
    • This is required.
    • It's an S3 bucket name.
      • Yes, you have to use S3. It's cheap, unless you're a very big company. In which case, it's probably cheaper than what you were using before.
  • imageUrl - string
    • This is required.
    • It's kind of the path to the image in the S3 bucket. AWS calls it a Key.
      • Why kind of? Because you only put the image name, not the extension (jpg, png, etc.). This is done to make it so you don't have to go someFolderName/image-name.someExtension for all image types.
  • placeholder - string
    • This is not required.
    • This is what is shown while the image is loading. If it's a big image, a small placeholder will create a smoother transition.
  • imageProperties - object
    • This is not required.
    • Put whatever properties you want in here. They're spread into the image element: <img src={s3url} {...imageProperties} />.

Super tiny, npm install it or (better) copy the code and use it /src/index.js && /src/utils.js is all you need.

File sizes after gzip:

  umd/react-next-gen-image.js      3.14 KB
  umd/react-next-gen-image.min.js  1.18 KB
...