Image optimization in REACT during upload.

The sole purpose of optimize the image is to find the balance between file size and acceptable quality. We all want our website to render fast as a possible. In an average website, if there is no video or less use of video, image makes up more average page weight.

Credits: wp-rocket

To eliminate the slow rendering because of images we can either put the needed image size during deployment or if user can upload image, resize to the idle size and then upload to the cloud. It also helps less usage of disk in cloud storage.

Okay, lets get started….

Some tools we are gonna use are as follows:
- For handling image upload (ANTD Upload)
- For image resize. (react-image-file-resizer)
- For image file width checker. (Custom utils functions)

How we are doing image upload?

import { Upload } from "antd";
<Upload
          customRequest={() => null}
          accept="image/jpeg,image/png,image/jpg"
          onChange={(file) => {
            handleUpload(file);
          }}
          showUploadList={false}
      >
   <Button>Upload</Button>
</Upload>

Since, we are using ANTD image upload we are just accepting image type file and handling our image function on handleUpload function and sending the received file as params.

How we are handling image upload?

const handleUpload = async (img) => {
    const width = await checkImageWidth(img.file.originFileObj);
if (width <= 1440) {
      uploadImage(img);
    } else {
     const resizedImage = await resizeImage(img.file.originFileObj);
      const resizedFile = {
        file: {
          originFileObj: resizedImage,
        },
      };
  uploadImage(resizedFile);
    }
  };

We are checking image width before resizing the image. If, its simply below 1440px we just upload it if not it will be be resized and upload. You can change these conditions as per your preference or simply resize it.

Utils function for image width check.

const checkImageWidth = async (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (event: any) => {
      const image = new Image();
      image.src = event.target.result;
      image.onload = () => {
        resolve(image.width);
        return image.width;
      };
      reader.onerror = (err) => reject(err);
    };
  });
};
export { checkImageWidth };

This function will simply return the image width size by sending image file as a parameters.

How we are resizing image?

import Resizer from "react-image-file-resizer";
const resizeImage = (file) => {
  let quality = 100;
//4MB image file
  if (file.size > 4000000) {
    quality = 90;
  }
//8MB image file
  if (file.size > 8000000) {
    quality = 85;
  }
  return new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      1400,
      1000,
      "JPEG",
      quality,
      0,
      (uri) => {
        resolve(uri);
      },
      "blob"
    );
  });
};
export { resizeImage };

We just installed the “react-image-file-resizer”. And check different image file size and resize it accordingly. Its a personal preference so you can resize it as per your choice. For this .. we just used for greater than 4mb to reduce quality to 90% and greater than 8mb to reduce quality by 85%. You can reduce it accordingly.

And, we are done, after that we gonna upload image in the cloud.

Note:
For thumbnails like menu list, avatar icon or small image size you can resize it in back-end before you upload it and send it as response separately.

Follow be: @beevekmgrz

Thank you for reading…Keep coding!!!