Images Optimization

Images are the most important part of a website. They are the first thing that a user sees when they visit a website. So, it is important to optimize images to make the website load faster.

Rasengan.js provides an external package called @rasenganjs/image (opens in a new tab) to display images on the website with a lazy loading feature. The package doesn't compress images but it loads them only when they are in the viewport.

Installation

By default, when using the Rasengan CLI to create a new project, the @rasenganjs/image package is already installed.

If not, you can install it by running the following command:

npm install @rasenganjs/image

Usage

First of all, you have to import the css file in your project. You can do this by adding the following line in your main.js file:

import "@rasenganjs/image/lib/styles/index.css";

Then, you can use the Image component to display images on your website.

Local Image

This package supports local images. You can import the image and pass it as a src prop to the Image component. file extensions like .jpg, .jpeg, .png, .gif, .webp, .svg are supported.

import React from "react";
import Image from "@rasenganjs/image";
import avatar from "@assets/images/avatar.jpg";
 
export default function Avatar() {
  return <Image src={avatar} alt="Avatar" width={200} height={200} />;
}

External Image

You can also use external images by passing an object with an uri property as a src prop to the Image component.

import React from "react";
import Image from "@rasenganjs/image";
 
export default function Avatar() {
  return (
    <Image
      src={{ uri: "https://example.com/avatar.jpg" }}
      alt="Avatar"
      width={200}
      height={200}
    />
  );
}

Next steps