The base theme introduces a custom Image component called “ExpImage”, designed to deliver optimized images according to your specifications. Additionally, it offers various customization options to tailor the image precisely to your requirements.

​
Importance of ExpImage

Don’t we all agree that when information is presented in a visual/graphical format, it creates deeper impact on the user! This enhances the UX (User Experience) altogether.
Improving user experience helps in:
  • Increasing user retention
  • Decreasing bounce rates on your website
To add image support in website, a user can use ExpImage. This component helps in handling images from the admin panel.

​
ExpImage

The ExpImage component is responsible for rendering customized images based on different configurations. It accepts a variety of props including src, name, height, width, alt, title, style, lazyLoad, retina, preLoad, options, navigationUrl, and navigationTarget. Many of these attributes mirror those typically used in standard HTML image tags. The ExpImage component accepts the following props:
PropDetails
srcImage data you which you are getting from the admin panel or a simple image link will also work same a HTML image tag.
nameThe name of the image, if you are using this component for multiple times in same component or page then make sure you pass a unique name
heightThe height of the <img> tag.
widthThe width of the <img>
heightThe height of the <img> element.
altAlt text for the image
titleTitle for the image
styleTo provide a inline style for image
lazyLoadThe flag to load the image lazy by default value for this will be false.
preloadThe flag to preload image, by default value for this will be false. If you want to prealod the image then you need to pass true for the component
classNameClass names which you want to apply to the image tag you can pass it to this prop as a string
retinaThis boolean value will be specifying the to add 2x images to srcSet for Retina display
optionsThis prop will be used to specify the image options for the picture tag and the image optimization.
Here is an example to show the usage of ExpCustomImageRenderer. 
// This indicates the width of array based on screen size
const options: string[] = [
  {
    width: 1920,
  },
  {
    width: 1024,
  },
  {
    width: 768,
    aspect_ratio: "16:10",
    crop_gravity: "west",
  },
  {
    width: 568,
    aspect_ratio: "16:13",
    crop_gravity: "west",
  },
  {
    width: 450,
    aspect_ratio: "16:16",
    crop_gravity: "west",
  },
];

<ExpImage
  src={imageData}
  options={options}
  height="790"
  width="616"
  alt="Excore"
  title="Excore"
  preload={true}
/>;
The object within the options array can contain multiple values as illustrated below:
{
    /*
    * Parameter: breakPoint    Units: Pixels
    * breakPoint will be useful, when all the options object have a breakPoint for the options array for ExpImage component,
    * if not found then it will use the default breakPoints, which you can find in ExpImage Component.
    * */
    breakPoint?: number;
    /*
    * Parameter: width    Units: Pixels    Default: auto
    * Resize the output image to the given width maintaining the current aspect ratio.
    * */
    width?: number;
    /*
    * Parameter: height    Units: Pixels    Default: auto
    * Resize the output image to the given height maintaining the current aspect ratio.
    * */
    height?: number;
    /*
    * Parameter: aspectratio    **_Default**: auto
    * Crop the output image to match the given aspect ratio. The default origin point (gravity) is positioned on the center of the image.
    * */
    aspect_ratio?: string;
    /*
    * Parameter: quality    Units: Number    Range: 0-100    Default: 85
    * Determines the compression level of the resulting image with 100 being the lowest level of compression and 0 being the highest.
    * Higher compression means smaller files, but might visually degrade the image (e.g. JPEG compression under 70 tends to produce visible artefacts.
    * */
    quality?: number;
    /*
    * Parameter: sharpen    Units: Boolean    Default: false
    * Sharpen the output image.
    * */
    sharpen?: boolean;
    /*
    * Parameter: blur    Units: Number    Range: 0-100    Default: 0
    * Blur the output image.
    * */
    blur?: boolean;
    /*
    * Parameter: crop    Units: Pixels    Format 1: width,height    Format 2: width,height,x,y
    * Crop the output image to the given width and height. Two formats are accepted. Format 1 one only includes the width and height of the crop.
    * Format 2 also includes the X and Y position where the crop should start. Image resizing with the width and height parameters is processed after the crop and the resized measurements apply.
    * If only width and height are given, the Crop Gravity parameter will be used.
    * */
    crop?: string;
    /*
    * Parameter: cropgravity    **_Default: center
    * Values**: center,forget,east,north,south,west,northeast,northwest,southeast,southwest
    * Set the gravity of the crop operation. This is used with the Format 1 cropping only and snaps the crop to the selected position.
    * */
    crop_gravity?: string;
    /*
    * Parameter: flip    Units: Boolean    Default: false
    * Flip the output image vertically.
    * */
    flip?: boolean;
    /*
    * Parameter: flop    Units: Boolean    Default: false
    * Flip the output image horizontally
    * */
    flop?: boolean;
    /*
    * Parameter: brightness    Units: Number    Range: -100-100    Default: 0
    * Adjusts the brightness of the output image. This can either brighten or darker the image.
    * */
    brightness?: number;
    /*
    * Parameter: saturation    Units: Number    Range: -100 - 100    Default: 0
    * Adjusts the saturation of the output image. Use -100 for grayscale.
    * */
    saturation?: number;
    /*
    * Parameter: hue    Units: Number    Range: 0-100    Default: 0
    * Adjusts the hue of the output image by rotating the color wheel.
    * The default value of 0 is the base color and increasing the value modulates to the next color for each 33 change.
    * */
    hue?: number;
    /*
    * Parameter: contrast    Units: Number    Range: -100 - 100    Default: 0
    * Adjusts the contrast of the output image.
    * */
    contrast?: number;
    /*
    * Parameter: sepia Units: Integer Values: 0 - 100 Default: 0
    * Changes the image color to the sepia color scheme.
    * */
    sepia?: number;
}
Head to the next document to learn more about the Menu Component in this base theme.